@charset "utf-8";

:root{--color:#0061ae;--fontcolortitle:#000;--fontcolorintro:#333;--fonthometitle:36px;--fonttitle:18px;--fontintro:16px;--fontweight:700;--fontfamily:'Lato','Open Sans','Roboto','Poppins','Oswald','Noto Sans','Montserrat',sans-serif}

@media (max-width:1280px){:root{--fonthometitle:30px}}

@media (max-width:768px){:root{--fonthometitle:20px;--fonttitle:16px;--fontintro:14px}}

*,html,body,h1,h2,h3,h4,h5,h6,table,th,td,ol,ul,li,dl,dt,dd,div,p{padding:0px;margin:0px;box-sizing:border-box}

html{-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}

body{margin:0px auto;max-width:1920px;color:var(--fontcolortitle);font-size:16px;line-height:1.6;overflow-x:hidden;overflow-y:scroll;font-family:var(--fontfamily)}

h1,h2,h3,h4,h5,h6{text-transform:capitalize;font-weight:var(--fontweight)}

img{vertical-align:bottom;max-width:100%;height:auto}

a{text-decoration:none;color:inherit}

li,ol,ul{list-style:none}

iframe,video{max-width:100%;outline:0;border:none;vertical-align:bottom}

button{outline:0;border:none}

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}

.hidden{overflow:hidden}

.lazy-load{display:block;position:absolute;width:18px;height:18px;top:50%;left:50%;margin-top:-9px;margin-left:-9px;background-color:#CCC;animation:loading 1s linear infinite;border-radius:100%}

.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}

@keyframes loading{0%{transform:scale(.2);opacity:1}

to{transform:scale(2);opacity:0}}

.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}

header{position:relative;z-index:100000}

.head-top{width:100%;height:40px;text-align:center;display:flex;justify-content:center;align-items:center;background:var(--color);color:#FFF;font-size:16px;position:sticky;top:0;z-index:99999999}

.head-top .l-wrap{position:relative;display:flex;align-items:center;justify-content:space-between}

.head-top .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}

.head-info{border-bottom:1px solid #EEE;padding-top:20px;padding-bottom:40px;display:flex;align-items:baseline}

.head-info .l-wrap{height:100%;display:flex;justify-content:space-between;align-items:center}

.head-logo{max-width:20%}

.head-logo img{width:auto;max-height:90px}

.head-logo a{display:inline-flex;align-items:center;height:100%;}

.head-logo a span{font-size:18px;font-weight:bold;white-space:nowrap;padding-left:10px}

.head-list{display:flex;justify-content:space-between;align-items:center;max-width:800px;width:100%;margin:0 20px}

.head-list .item{display:flex;align-items:center;justify-content:center;width:30%}

.head-list .item:nth-child(1){flex:1}

.head-list .item em{display:inline-flex;align-items:center;justify-content:center;background:var(--color);color:#FFF;width:35px;height:35px;font-size:20px}

.head-list .item .info{padding-left:10px;color:var(--fontcolortitle);line-height:1.3}

.head-list .item .info span{color:var(--color);font-size:14px}

.head-list .item .info p{font-size:14px;word-break:break-word}

.head-list .item .info a{color:var(--fontcolortitle)}

.head-list .item .info a:hover{color:var(--color)}

.head-share ul{display:flex;align-items:center;list-style:none;padding:0}

.head-share ul a{margin-left:15px;padding:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--color);width:30px;height:30px;transition:all .1s linear;border-radius:4px}

.head-share ul a i{font-size:18px}

.head-share ul a:hover{background:var(--color);color:#FFF}

.head-nav{display:flex;align-items:center;border-radius:40px;box-shadow:0 6px 13px 0 rgba(19,20,21,.21);max-width:1500px;width:100%;margin:0 auto;padding:0 20px;background:#FFF;z-index:9999999;position:absolute;bottom:-32px;left:50%;animation:down .5s forwards;transform:translateX(-50%)}

.head-nav.scrollhead{max-width:100%;border-radius:0;position:fixed;top:0;left:0;bottom:auto;animation:up .5s forwards}

.head-nav .l-wrap{position:relative;display:flex;justify-content:space-between;padding:0 15px}

@keyframes up{0%{transform:translate(0,-100px)}

100%{transform:translate(0,0)}}

@keyframes down{0%{transform:translate(-50%,20px)}

100%{transform:translate(-50%,0)}}

.m-menu{display:none}

.nav-ul{display:flex;list-style:none}

.nav-ul>li{position:relative;padding:0 20px}

@media(min-width:1024px){.nav-ul>li:hover>ul{display:block}}

.nav-ul>li:hover>a{color:var(--color)}

.nav-ul>li:hover>em{color:var(--color)}

.nav-ul>li>a{display:inline-flex;padding:18px 10px;color:var(--fontcolortitle);font-size:18px;transition:all .1s linear;white-space:nowrap;text-transform:capitalize}

.nav-ul>li>a.inmenu_1{color:var(--color)}

.nav-ul>li>em{font-size:12px; margin-left:4px;}

.nav-ul>li ul{list-style:none}

.nav-ul>li .submenu{display:none;position:absolute;background:#FFF;transition:all .1s linear;box-shadow:1px 2px 10px rgba(0,0,0,.1)}

.nav-ul>li .submenu>li{position:relative}

.nav-ul>li .submenu>li:hover ul{display:block}

.nav-ul>li .submenu>li ul{position:absolute;left:100%;top:0;display:none;background:#FFF}

.nav-ul>li .submenu>li em{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px}

.nav-ul>li .submenu a{display:inline-block;width:100%;color:var(--fontcolortitle);padding:6px 10px;transition:all .1s linear;white-space:nowrap;min-width:200px;padding-right:30px}

.nav-ul>li .submenu>li:hover,.nav-ul>li .submenu>li:hover>a{color:var(--color)}

.nav-ul>li .submenu>li:hover ul a:hover{color:var(--color)}

.search-box{position:relative;display:flex;align-items:center}

.head-search{display:flex;align-items:center;margin-right:10%}

.head-search button{outline:0;background:0 0;border:none;padding:10px;cursor:pointer}

.head-search button em{font-size:22px;color:var(--color);font-weight:var(--fontweight)}

.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}

.search-input input{width:200px;height:40px;padding-left:10px;font-size:16px;border:none;outline:0}

.search-input .search-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.1s linear}

.search-input .search-btn:hover{background:#c9c4c4}

.search-input .search-btn em{font-size:22px;color:var(--color)}

.search-input.active{transition:opacity .3s,transform .3s;visibility:visible;opacity:1;transform:rotateX(0);transform-origin:top}

footer{padding-top:60px;background:#32373b;color:#FFF}

footer a{color:#FFF}

footer a:hover{color:var(--color)}

footer .foot-main{display:flex;padding-bottom:50px}

.foot-info{width:20%;}

.foot-info .foot-logo img{width:auto;max-height:100px}

.foot-info .foot-tel{margin-top:30px;font-size:16px}

.foot-info .foot-share{margin-top:20px}

.foot-info .foot-share ul{padding:0;list-style:none;display:flex;flex-wrap:wrap}

.foot-info .foot-share ul li{margin-bottom:10px}

.foot-info .foot-share ul a{display:inline-flex;align-items:center;justify-content:center;background:var(--color);width:35px;height:35px;color:#FFF;margin-right:10px;border-radius:4px;transition:all .1s linear}

.foot-info .foot-share ul a:hover{background:#FFF;color:var(--color)}

.foot-nav{flex:1;display:flex;justify-content:space-between}

.foot-nav .foot-item .foot-title{font-size:22px;line-height:1;margin-bottom:10px}

.foot-nav .foot-item .foot-list{list-style:none;padding:0;margin-top:15px}

.foot-nav .foot-item .foot-list a{display:inline-block;padding:2px 0;transition:all .1s linear;opacity:.8;text-transform:capitalize}

.foot-nav .foot-item .foot-list a:hover{color:var(--color);opacity:1}

.foot-nav .foot-item.foot-quick{width:30%}

.foot-nav .foot-item.foot-quick .foot-list{display:flex;flex-wrap:wrap}

.foot-nav .foot-item.foot-quick .foot-list li{width:50%}

.foot-qrimg{margin-top:20px}

.foot-qrimg img{width:120px;border-radius:4px;transition:all 0.1s linear}

.foot-qrimg img:hover{transform:scale(1.05)}

.foot-code{width:40%}

footer .copyright{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #7d7d7d;padding:15px 0;font-size:14px;text-align:center;}

footer .copyright>p:nth-child(1){flex:1}

footer .copyright a{margin-left:10px}

footer .copyright a:hover{color:var(--color)}

footer .copyright .gotop{background:var(--color);display:flex;justify-content:center;margin-left:10px;width:35px;height:35px;border-radius:4px;font-weight:var(--fontweight);cursor:pointer;transition:all .1s linear}

footer .copyright .gotop:hover{opacity:.9}

footer .copyright .gotop em{width:100%;height:80%;display:inline-flex;align-items:center;justify-content:center;color:#FFF}

.mobile-bottom-bag{display:none}

.rfixed{position:fixed;bottom:calc(145px + constant(safe-area-inset-bottom));bottom:calc(145px + env(safe-area-inset-bottom));right:24px;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:14px;color:#FFF;display:flex;align-items:center;padding:10px;cursor:pointer}

.compare-close{position:relative;width:24px;height:24px;background:0 0;cursor:pointer}

.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:10px;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}

.item-clear::after,.item-clear::before{content:"";display:block;position:absolute;width:70%;height:2px;background-color:var(--fontcolorintro);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:12px}

.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(--fontcolortitle)}

.item-price{color:#d4322c}

.compare-b{padding:20px 10px;display:flex;justify-content:space-between}

.compare-b *{display:block;width:80px;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:30px;border-radius:2px;padding:0 2px}

.clear-all{color:var(--fontcolortitle);background-color:#EDEDED;cursor:pointer}

.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:12px;cursor:pointer;display:block;width:80px}

.rfixed-sc{width:40px;height:40px;background:var(--color);border-radius:50%;text-align:center;line-height:38px;color:#FFF;position:relative;margin-bottom:10px;cursor:pointer;display:none}

.rfixed-sc i{font-size:20px}

.rfixed-scnum{position:absolute;right:6px;top:4px;width:16px;height:16px;background:#d4322c;border-radius:50%;text-align:center;font-size:12px;color:#FFF;transform:scale(.9);line-height:16px}

@media (max-width:768px){.compare-panel{width:100%;bottom:16vw}}

.lang{width:auto;z-index:99999999;text-align:left;position:relative}

.lang-icon{display:flex;align-items:center;width:100%;height:30px;border:none;cursor:pointer;font-size:14px;user-select:none;white-space:nowrap}

.lang-icon>img{margin-right:5px;margin-top:3px}

.lang-icon span{position:relative;padding-right:18px}

.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.active{visibility:visible;opacity:1;top:calc(100% + 12px)}

.lang-drop.lang-flex{transform:translateX(25%);}

.lang-drop.lang-flex .lang-arrow{left:75%;}

.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-wrap{width:140px;padding:8px 0;box-sizing:border-box}

.lang-flex .lang-wrap{width:340px;display:flex;flex-wrap:wrap;padding:8px}

.lang-wrap li{width:100%;padding:8px 16px;box-sizing:border-box;transition:background-color .3s}

.lang-flex .lang-wrap li{width:33%;padding:8px 6px}

.lang-wrap li.lang-active,.lang-wrap li:hover{background-color:#EEE}

.lang-wrap li a{display:block;color:var(--fontcolortitle);font-size: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{margin-left:auto;margin-right:15px;transition:all .2s linear}

.lang-icon span{display:none}

.lang-icon>img{width:36px;height:24px;margin:0px}

.lang-drop{display:none}

.lang-drop.active{display:block}}

@media (max-width:1280px){.nav-ul>li>a{padding:18px 0;font-size:16px}

.nav-ul>li>em{right:0}}

@media (max-width:1024px){

.head-top{font-size:14px;height:30px;position:static;transition:all .2s linear;display:none}

.head-top.cur{height:0;opacity:0;visibility:hidden}

.head-top.cur .lang{top:15px}

.head-list{display:none}

.head-share{display:none}

.head-logo{max-width:inherit;height:100%;}

.nav-ul>li .submenu>li em{display:none}

.m-menu{display:block;position:relative;width:40px;height:40px;cursor:pointer}

.m-menu span{position:absolute;background:var(--color);height:3px;border-radius:4px;right:0;transition:all .2s linear}

.m-menu span:nth-child(1){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:nth-child(1){transform:rotate(45deg)}

.m-menu.act span:nth-child(2){width:0}

.m-menu.act span:nth-child(3){transform:rotate(-45deg)}

header{position:fixed;width:100%;top:0;background:#FFF}

.head-info{height:60px;padding:0}

.head-nav{animation:none;position:fixed;top:60px;left:0;width:100%;transform:none;border-radius:0;height:calc(100vh - 60px);box-shadow:none;align-items:flex-start;padding:0;overflow-y:scroll;transform:translateX(100%);opacity:0;transition:all .2s linear;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}

.head-nav.scrollhead{animation:none;top:auto;height:calc(100vh - 60px)}

.head-nav.head-nav-act{transform:translateX(0);opacity:1}

.head-nav .l-wrap{flex-direction:column-reverse;padding-bottom:80px}

.head-nav .nav-ul{flex-wrap:wrap;padding-bottom:20px}

.head-nav .nav-ul>li{width:100%;padding:0;border-bottom:1px solid #EEE}

.head-nav .nav-ul>li:hover>a{color:inherit}

.head-nav .nav-ul>li:hover>em{color:inherit}

.head-nav .nav-ul>li>a{padding:10px 0;width:100%;font-size:18px;font-weight:700}

.head-nav .nav-ul>li>em{width:20%;height:46px;line-height:45px;text-align:right;top:0;flex:1;color:var(--fontcolortitle);font-size:18px;font-weight:700;transition:all .2s linear;transform:none;cursor:pointer}

.head-nav .nav-ul>li .submenu{position:static;box-shadow:none}

.head-nav .nav-ul>li .submenu li ul{position:static;display:block;padding-left:10px}

.head-nav .nav-ul>li.cur>a{color:var(--color)}

.head-nav .nav-ul>li.cur em{transform:rotateX(180deg);color:var(--color)}

main{margin-top:60px}

.head-search{display:none}

.search-input{margin:10px 0;display:block;position:static;opacity:1;transform:none;visibility:inherit;display:flex;align-items:center;width:100%;box-shadow:none;border:1px solid #c2c2c2;border-radius:4px;overflow:hidden}

.search-input input{flex:1}

footer .foot-main{flex-wrap:wrap;padding-bottom:20px}

footer .l-wrap{padding-bottom:66px}

.footer .foot-main .foot-nav .foot-code .inquiry-form .input
{height: 40px;
    width: 200px;
    padding: 10px;
    margin: 10px 0px 0px 0px;}

.foot-info{width:100%;margin-right:4%}

.foot-nav{margin-top:20px}}

@media (max-width:768px){

.l-wrap{padding:0 15px}  

.head-nav .nav-ul>li>a{font-size:16px}

.head-logo a{padding:4px 0;}

.head-logo img{margin:0;height:100%;}

.head-logo a span{display:none}

.foot-nav{flex-wrap:wrap}

.foot-logo{display:none}

.foot-nav .foot-item.foot-quick{width:100%}

.foot-info .foot-tel{font-size:16px;margin-top:0}

.foot-nav .foot-item{width:100%;margin-bottom:20px}

.foot-nav .foot-item:last-child{margin-bottom:0}

.foot-nav .foot-item.foot-code{display:none}

.foot-nav .foot-item .foot-list{display:flex;flex-wrap:wrap;margin-top:0}

.foot-nav .foot-item .foot-list li{width:33.333%}

.foot-nav .foot-item .foot-list li a{padding:6px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 150px;}

.ey_message{display:none;}

footer .copyright{font-size:12px}}

@media (max-width:500px){.foot-nav .foot-item .foot-list li{width:50%}}

.toast-title{font-weight:700}

.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}

.toast-message a,.toast-message label{color:#FFF}

.toast-message a:hover{color:#CCC;text-decoration:none}

.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#FFF;-webkit-text-shadow:0 1px 0 #FFF;text-shadow:0 1px 0 #FFF;opacity:.8;line-height:1}

.toast-close-button:focus,.toast-close-button:hover{color:var(--fontcolortitle);text-decoration:none;cursor:pointer;opacity:.4}

.rtl .toast-close-button{left:-.3em;float:left;right:.3em}

button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}

.toast-center-center{top:40%;right:0;width:100%;transform:translateY(-50%)}

.toast-top-center{top:20%;right:0;width:100%}

.toast-bottom-center{bottom:0;right:0;width:100%}

.toast-top-full-width{top:0;right:0;width:100%}

.toast-bottom-full-width{bottom:0;right:0;width:100%}

.toast-top-left{top:12px;left:12px}

.toast-top-right{top:12px;right:12px}

.toast-bottom-right{right:12px;bottom:12px}

.toast-bottom-left{bottom:12px;left:12px}

#toast-container{position:fixed;z-index:999999;pointer-events:none}

#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#toast-container>div{font-size:16px;position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#FFF;opacity:.9}

#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}

#toast-container>div:hover{-moz-box-shadow:0 0 12px var(--fontcolortitle);-webkit-box-shadow:0 0 12px var(--fontcolortitle);box-shadow:0 0 12px var(--fontcolortitle);opacity:1;cursor:pointer}

#toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}

#toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}

#toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}

#toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}

#toast-container.toast-bottom-center>div,#toast-container.toast-center-center>div,#toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}

#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}

.toast{background-color:#030303}

.toast-success{background-color:#51a351}

.toast-error{background-color:#bd362f}

.toast-info{background-color:#2f96b4}

.toast-warning{background-color:#f89406}

.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:var(--fontcolortitle);opacity:.4}

@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}

#toast-container>div.rtl{padding:8px 50px 8px 8px}

#toast-container .toast-close-button{right:-.2em;top:-.2em}

#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}

@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}

#toast-container>div.rtl{padding:8px 50px 8px 8px}

#toast-container .toast-close-button{right:-.2em;top:-.2em}

#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}

@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}

#toast-container>div.rtl{padding:15px 50px 15px 15px}}

@media (max-width:768px){#toast-container>div{font-size:15px;opacity:1}}

@media (max-width:415px){#toast-container>div{font-size:13px}}


/*page*/

.wp-pagenavi {

    font-size: 12px;

}

.wp-pagenavi{

    text-align: center;

    line-height: 24px;

}

.wp-pagenavi{

    width: 100%;

}

.wp-pagenavi > span,

.wp-pagenavi > a{

	margin: 4px 6px 4px 6px;

    padding: 10px 20px;

    text-decoration: none;

    background-color: #07264d;

    color: white;

    display: inline-block;

}

.wp-pagenavi a:hover,

.wp-pagenavi > .current{

    background-color: var(--color);

    color: white !important;

}

/*page*/



.small-box-2{display: none;}

.preview-container {
  width: 420px;
  margin: 0 auto;
  user-select: none;
}
.main-carousel {
  position: relative;
  width: auto;
  height: 420px;
  margin-bottom: 2px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.main-slide {
  position: absolute;
  top: 0; left: 0;
  width: auto;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.main-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.main-slide img {
  width: auto;
  height: 100%;
  object-fit: contain;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgb(0 97 174);
  color: white;
  border: none;
  font-size: 24px;
  width: 32px;
  height: 48px;
  cursor: pointer;
  opacity: 0.7;
  user-select: none;
  z-index: 10;
}
.arrow:hover {
  opacity: 1;
}
.arrow-left {
  left: 0;
}
.arrow-right {
  right: 0;
}

.thumb-carousel {
  display: flex;
  justify-content: space-between;
  width: auto;
}
.thumb-slide {
  width: auto;
  height: 83px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
}
.thumb-slide.active {
  border-color: #0073aa;
}
.thumb-slide img {
  width: auto;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.thumb-slide:hover img {
  transform: scale(1.1);
}

  .form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

  .form-row input,
  .form-row select {
    flex: 1;
    height: 40px;
    padding: 5px 10px;
    box-sizing: border-box;
  }

  .form-full textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .foot-qrimg button {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	background: #0061ae;
    color: #ffffff;
  }
  .foot-qrimg button:hover{box-shadow:1px 2px 10px #0061ae}

.pro-cate-title {
  margin-bottom: 30px;
}

.pro-cate-text {
  margin-bottom: 30px;
  color: #555;
}

/* 产品信息 */
.prodetails-info {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.prodetails-name {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

.prodetails-text p {
    line-height: 1.8;
    margin-bottom: 16px;
    font-size: 16px;
}

/* 产品详情内容 */
.prodetails-content {
    margin-top: 50px;
}

.prodetails-content h3 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #0073e6;
}

.prodetails-content ul {
    list-style: disc inside;
    margin-bottom: 20px;
}

.prodetails-content ul li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.table-wrap {
    overflow-x: auto;
    margin-bottom: 30px;
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    min-width: 600px;
}

.table-wrap th,
.table-wrap td {
    padding: 10px 15px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.table-wrap th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.table-wrap tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* 响应式 */
@media(max-width: 992px) {
    .prodetails-top {
        flex-direction: column;
    }

    .thumb-slide {
        width: 80px;
    }

    .prodetails-name {
        font-size: 24px;
    }
}

@media(max-width: 576px) {
    .thumb-slide {
        width: 60px;
    }

    .prodetails-name {
        font-size: 20px;
    }

    .prodetails-text p {
        font-size: 15px;
    }
}

/* 全局字体 */
        body { font-family: 'Roboto', sans-serif; }
        
        /* PC 端样式 (保持之前的优化) */
        .new-top-bar { background-color: #002B49; color: #fff; padding: 8px 0; font-size: 13px; }
        .new-top-bar .l-wrap { display: flex; justify-content: space-between; align-items: center; }
        .top-contact a { color: #fff; margin-right: 20px; text-decoration: none; opacity: 0.9; }
        
        .new-header { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); padding: 15px 0; position: sticky; top: 0; z-index: 999; }
        .new-header .l-wrap { display: flex; align-items: center; justify-content: space-between; }
        .new-logo img { display: block; height: 50px; width: auto; }
        
        /* PC 导航 */
        .new-nav ul.nav-ul { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
        .new-nav ul.nav-ul > li > a { font-size: 15px; font-weight: 500; color: #333; text-transform: uppercase; padding: 10px 0; position: relative; }
        .new-nav ul.nav-ul > li > a:hover, .new-nav ul.nav-ul > li > a.inmenu_1 { color: #0056b3; }
        .new-nav ul.nav-ul > li > a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: #0056b3; transition: width 0.3s; }
        .new-nav ul.nav-ul > li:hover > a::after { width: 100%; }

        /* PC 下拉菜单 */
        .new-nav li { position: relative; }
        .new-nav .submenu { display: none; position: absolute; top: 100%; left: -20px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 15px; min-width: 220px; border-top: 3px solid #0056b3; z-index: 1000; }
        .new-nav li:hover .submenu { display: block; }
        .new-nav .submenu li { display: block; margin-bottom: 10px; border-bottom: 1px dashed #eee; padding-bottom: 5px; }
        .new-nav .submenu a { color: #555; font-size: 14px; display: block; }

        /* 询盘按钮 */
        .btn-quote { background-color: #0056b3; color: #fff !important; padding: 10px 25px; border-radius: 4px; font-weight: 600; font-size: 14px; text-transform: uppercase; transition: all 0.3s; }
        /* --- 按钮基础样式 --- */
.btn-quote {
    /* 你原有的样式保持不变 */
    background-color: #0056b3;
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s;

    /* --- 新增的关键属性 --- */
    position: relative;  /* 关键：为伪元素定位提供基准 */
    overflow: hidden;    /* 关键：把滑出边界的光条藏起来 */
    z-index: 1;          /* 确保文字在光条上面 */
}

/* --- 创建发光条 (伪元素) --- */
.btn-quote::after {
    content: '';
    position: absolute;
    /* 定义光条的位置和大小 */
    top: -50%;          /* 让它比按钮高，方便倾斜 */
    left: -60%;         /* 初始位置：在按钮左侧外面 */
    width: 20%;         /* 光条的宽度 */
    height: 200%;       /* 高度设大点，覆盖旋转后的角落 */
    
    /* 初始状态：透明且稍微倾斜 */
    opacity: 0;
    transform: rotate(30deg);

    /* 核心：制作发光的渐变色 (中间亮白，两边透明) */
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.7) 50%, /* 中间的 0.7 是亮度，可调 (0-1) */
        rgba(255, 255, 255, 0) 100%);
    
    /* 动画的持续时间 */
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1); /* 使用贝塞尔曲线让滑动更有质感 */
}

/* --- 鼠标悬停时的动作 --- */
.btn-quote:hover {
    /* 可选：悬停时让按钮底色稍微变亮一点点，更有感觉 */
    background-color: #0062cc; 
}

/* 悬停时，让光条现身并移动到右侧外面 */
.btn-quote:hover::after {
    opacity: 1;
    left: 120%; /* 移动终点 */
}
        /* ============================
           ✅ 移动端样式 (修复部分)
           ============================ */
        .m-menu { display: none; cursor: pointer; z-index: 1001; position: relative; }
        .m-menu span { display: block; width: 25px; height: 3px; background: #333; margin: 5px 0; transition: 0.3s; }
        
        /* 移动端菜单容器 */
        .mobile-nav-container {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 60px; /* 根据Header高度调整 */
            left: 0;
            width: 100%;
            height: calc(100vh - 60px);
            background: #fff;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 10px 10px rgba(0,0,0,0.1);
            z-index: 998;
        }
        .mobile-nav-container.active { display: block; } /* JS控制显示 */
        
        .mobile-nav-ul { list-style: none; padding: 0; margin: 0; }
        .mobile-nav-ul > li { border-bottom: 1px solid #eee; }
        .mobile-nav-ul > li > a { display: block; padding: 15px 0; color: #333; font-size: 16px; font-weight: 500; }
        .mobile-nav-ul > li > a:hover { color: #0056b3; }
        
        /* 移动端子菜单 */
        .m-submenu { display: none; padding-left: 20px; background: #f9f9f9; }
        .mobile-nav-ul li.has-child.open .m-submenu { display: block; } /* 简单的展开逻辑 */
        .m-submenu li a { padding: 10px 0; font-size: 14px; color: #666; display: block; }

        /* 响应式断点 */
        @media (max-width: 1024px) {
            .new-nav { display: none; } /* 隐藏PC菜单 */
            .btn-quote { display: none; } /* 移动端隐藏按钮，放入菜单内 */
            .m-menu { display: block; } /* 显示汉堡图标 */
            .new-top-bar { display: none; } /* 移动端隐藏顶部黑条，节省空间 */
            .new-logo img { height: 40px; }
        }

/* 定义一个固定在顶部的类 */
.new-header.fixed-top {
    position: fixed !important; /* 强制固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* 保证在最上层 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 增加阴影让层次更明显 */
    animation: slideDown 0.3s ease; /* 加一个小动画，让出现更丝滑 */
}

/* 下滑时的动画效果 */
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* =========================================
       Footer 样式美化 (直接内嵌，建议后期移入 style.css)
       ========================================= */
    
    /* 1. 全局容器 */
    .new-footer {
        background-color: #111827; /* 深色背景，显高端 */
        color: #9CA3AF; /* 浅灰色文字，不刺眼 */
        padding-top: 60px;
        padding-bottom: 20px;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        line-height: 1.6;
    }
    .new-footer a {
        color: #9CA3AF;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    .new-footer a:hover {
        color: #fff; /* 悬停变白 */
        padding-left: 5px; /* 轻微位移效果 */
    }

    /* 2. 布局网格 */
    .footer-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr 1.5fr; /* 四列比例 */
        gap: 40px;
        padding-bottom: 40px;
        border-bottom: 1px solid #374151; /* 分割线 */
    }
    
    /* 3. 栏目样式 */
    .footer-col h3 {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 25px;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
    }
    .footer-col h3::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 30px;
        height: 2px;
        background-color: #007bff; /* 品牌蓝条装饰 */
    }
    
    /* 列表样式 */
    .footer-links { list-style: none; padding: 0; margin: 0; }
    .footer-links li { margin-bottom: 12px; }
    
    /* Logo 和 简介 */
    .footer-logo-img { margin-bottom: 20px; display: block; filter: brightness(0) invert(1); /* 自动把黑色Logo变白 */ opacity: 0.9; }
    .footer-contact-info p { margin-bottom: 10px; display: flex; align-items: center; }
    .footer-contact-info i { margin-right: 10px; color: #007bff; }
    
    /* 社交图标 */
    .footer-social { display: flex; gap: 10px; margin-top: 20px; }
    .social-btn {
        width: 36px; height: 36px;
        border: 1px solid #374151;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff !important;
        padding: 0 !important; /* 复写上面a标签的padding */
    }
    .social-btn:hover { background-color: #007bff; border-color: #007bff; transform: translateY(-3px); }

    /* 4. 底部表单美化 */
    .footer-form input, .footer-form select, .footer-form textarea {
        width: 100%;
        background: #1F2937;
        border: 1px solid #374151;
        padding: 10px;
        color: #fff;
        margin-bottom: 10px;
        border-radius: 4px;
        font-size: 13px;
        outline: none;
    }
    .footer-form input:focus, .footer-form textarea:focus { border-color: #007bff; }
    .footer-form button {
        background: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        text-transform: uppercase;
        font-weight: bold;
        width: 100%;
        border-radius: 4px;
        transition: 0.3s;
    }
    .footer-form button:hover { background: #0056b3; }

    /* 5. 版权栏 */
    .copyright-bar {
        text-align: center;
        padding-top: 20px;
        font-size: 13px;
        opacity: 0.7;
    }

    /* =========================================
       移动端适配
       ========================================= */
    @media (max-width: 1024px) {
        .footer-grid { grid-template-columns: 1fr; gap: 30px; } /* 变为单列 */
        .new-footer { padding-bottom: 80px; /* 给底部悬浮栏留位置 */ }
        .footer-logo-img { max-width: 150px; }
    }


    /* 底部悬浮 (仅移动端) */
/* --- 底部栏容器 --- */
.bottom-btn {
    position: fixed;   /* 核心：固定在底部 */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;      /* 设定高度 */
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08); /* 顶部加阴影，增加层次感 */
    display: flex;     /* 弹性布局 */
    justify-content: space-around; /* 平均分布 */
    align-items: center;
    z-index: 9999;     /* 保证在最上层 */
    border-top: 1px solid #eee;
}

/* --- 单个按钮项 --- */
.bottom-btn .btn-item {
    flex: 1;           /* 每个按钮平分宽度 */
    text-align: center;
}

.bottom-btn .btn-item a {
    display: block;
    text-decoration: none; /* 去掉下划线 */
    color: #333;       /* 默认文字颜色 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- 图标样式 --- */
.bottom-btn .iconfont {
    font-size: 22px;   /* 图标大小 */
    margin-bottom: 2px;
    display: block;
    line-height: 1;
}

/* --- 文字样式 --- */
.bottom-btn p {
    font-size: 11px;
    margin: 0;
    line-height: 1.2;
    color: #666;
}

/* --- 中间核心按钮 (Inquiry) 的特殊样式 --- */
/* 如果你想让中间按钮变成显眼的色块，使用下面的代码 */
.bottom-btn .btn-item.main-cta {
    background-color: #ff6600; /* 询盘按钮主色调 (橙色) */
    height: 100%; /* 填满高度 */
}

.bottom-btn .btn-item.main-cta a {
    color: #ffffff; /* 字体变白 */
}

.bottom-btn .btn-item.main-cta p {
    color: #ffffff;
}

.bottom-btn .btn-item.main-cta .iconfont {
    color: #ffffff !important; /* 强制图标变白 */
}

/* --- 占位符 (防止内容被遮挡) --- */
.bottom-spacer {
    height: 60px; /* 必须和底部栏高度一致 */
    width: 100%;
    display: block;
}

/* --- 适配 iPhone 底部小黑条 (安全区域) --- */
@supports (padding-bottom: constant(safe-area-inset-bottom)) or (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-btn {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(60px + env(safe-area-inset-bottom));
    }
    .bottom-spacer {
        height: calc(60px + env(safe-area-inset-bottom));
    }
}
/* --- PC 端隐藏底部栏 --- */
@media (min-width: 769px) {
    .bottom-btn, 
    .bottom-spacer,
    .bottom-btn-wrapper { 
        display: none !important;
    }
}

/*侧边栏*/
/* --- 1. PC 端侧边栏容器 --- */
#ey-mkf {
    position: fixed;
    right: 20px;          /* 距离屏幕右侧 20px */
    top: 50%;             /* 垂直居中 */
    transform: translateY(-50%); /* 修正垂直居中偏移 */
    z-index: 999;         /* 保证在最上层 */
}

/* --- 2. 去除列表默认样式 --- */
#ey-mkf .ey-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- 3. 单个按钮样式 (方块) --- */
#ey-mkf .ey-list li {
    margin-bottom: 10px; /* 按钮之间的间距 */
}

#ey-mkf .ey-list li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;         /* 按钮宽度 */
    height: 50px;        /* 按钮高度 */
    background-color: #ffffff; /* 白色背景 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 柔和的阴影 */
    border-radius: 4px;  /* 轻微圆角 */
    text-decoration: none;
    transition: all 0.3s ease; /* 平滑过渡效果 */
    position: relative;  /* 关键：为提示文字做定位基准 */
}
#ey-mkf .ey-list li a:hover {
    background-color: #0061ae; 
}   
/* --- 4. 图标颜色 & 悬停效果 --- */
/* WhatsApp 专属色 */
.ey-whatsapp a .iconfont { color: #25D366; }
.ey-whatsapp a:hover { background-color: #25D366; }
.ey-whatsapp a:hover .iconfont { color: #fff; } /* 悬停时图标变白 */

/* Email 专属色 */
.ey-email a .iconfont { color: #007bff; }
.ey-email a:hover { background-color: #007bff; }
.ey-email a:hover .iconfont { color: #fff; }

/* Go Top 专属色 */
.gotop a .iconfont { color: #666; }
.gotop a:hover { background-color: #666; }
.gotop a:hover .iconfont { color: #fff; }

/* --- 5. 鼠标放上去左侧出现提示文字 (Tooltip) --- */
#ey-mkf .ey-list li a::before {
    content: attr(title); /* 读取 HTML 中的 title 属性作为文字 */
    position: absolute;
    right: 60px;          /* 显示在按钮左侧 */
    top: 50%;
    transform: translateY(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;  /* 不换行 */
    opacity: 0;           /* 默认隐藏 */
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none; /* 防止遮挡点击 */
}

/* 小三角箭头 */
#ey-mkf .ey-list li a::after {
    content: '';
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333; /* 指向右边的箭头 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 悬停时显示提示 */
#ey-mkf .ey-list li a:hover::before,
#ey-mkf .ey-list li a:hover::after {
    opacity: 1;
    visibility: visible;
    right: 65px; /* 稍微有个滑入的动画效果 */
}
#ey-mkf .ey-list li a:hover::after {
    right: 59px;
}

/* --- 6. 移动端隐藏 (避免和之前的底部栏冲突) --- */
@media (max-width: 768px) {
    #ey-mkf {
        display: none !important;
    }
}

/* home about*/
/* --- 容器样式 --- */
.about-contact {
    background-color: #f5f7fa; /* 极淡的灰蓝色背景 */
    padding: 30px 40px;        /* 内部留白 */
    border-radius: 12px;       /* 柔和的圆角 */
    border: 1px solid #e1e4e8; /* 细微的边框 */
    
    /* 弹性布局：让文字靠左，按钮靠右 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin-top: 40px;          /* 与上方内容的间距 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* 极轻微的立体感 */
}

/* --- 文字样式 --- */
.about-contact p {
    font-size: 20px;
    font-weight: 700;          /* 加粗 */
    color: #2c3e50;            /* 深蓝灰色 */
    margin: 0;                 /* 去掉默认边距 */
    line-height: 1.2;
}

/* --- WhatsApp 按钮样式 --- */
.home-more-whatsapp {
    background-color: #25D366; /* WhatsApp 官方绿色 */
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    
    padding: 12px 35px;        /* 按钮大小 */
    border-radius: 50px;       /* 胶囊形状 */
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3); /* 绿色发光阴影 */
    transition: all 0.3s ease; /* 动画过渡 */
    white-space: nowrap;       /* 防止文字换行 */
}

/* 按钮悬停效果 */
.home-more-whatsapp:hover {
    background-color: #1ebc57; /* 悬停变深绿 */
    transform: translateY(-2px); /* 微微上浮 */
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5);
}

/* 移动端 (手机/竖屏平板) 样式调整 */
@media (max-width: 768px) {
    .about-contact {
        flex-direction: column; /* 改为垂直排列 */
        text-align: center;     /* 文字居中 */
        padding: 30px 20px;     /* 减小内边距 */
        gap: 20px;              /* 文字和按钮的间距 */
    }

    .about-contact p {
        font-size: 18px;        /* 稍微调小字号 */
        margin-bottom: 0;
    }

    .home-more-whatsapp {
        width: 100%;            /* 按钮占满全宽，方便手指点击 */
        display: block;         /* 块级显示 */
        text-align: center;
        box-sizing: border-box; /* 防止padding撑破宽度 */
    }
}

/* --- 1. 区域容器设置 --- */
.home-activity {
    position: relative; /* 关键：为遮罩层做定位基准 */
    background-size: cover;       /* 图片铺满 */
    background-position: center;  /* 图片居中 */
    background-attachment: fixed; /* 视差滚动效果（看起来很高级） */
    padding: 100px 0; /* 上下留出充足空间 */
    text-align: center; /* 内容居中 */
    color: #ffffff;   /* 全局白色文字 */
}

/* --- 2. 核心：深蓝色半透明遮罩 (Overlay) --- */
/* 这层代码会自动盖在图片上，让文字更清晰 */
.home-activity::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 45, 114, 0.85); /* 深蓝色 + 85% 不透明度 */
    z-index: 1;
}

/* --- 3. 提升内容层级 --- */
/* 确保文字显示在遮罩上面，而不是被遮住 */
.home-activity .l-wrap {
    position: relative;
    z-index: 2;
}

/* --- 4. 文字排版美化 --- */
/* 顶部小标题 (Pricing Your...) */
.home-activity .text {
    font-size: 14px;
    text-transform: uppercase; /* 全大写 */
    letter-spacing: 2px;       /* 增加字间距 */
    color: #ffd700;            /* 金色/黄色，形成对比 */
    margin-bottom: 15px;
    font-weight: 700;
}

/* 主标题 (Get in Touch...) */
.home-activity .title {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

/* 描述段落 */
.home-activity .content {
    max-width: 700px;  /* 限制宽度，防止一行太长难以阅读 */
    margin: 0 auto 40px auto; /* 居中 */
}

.home-activity .content p {
    font-size: 18px;
    line-height: 1.6;
    color: #e0e0e0; /* 稍微灰一点的白色，减少视觉疲劳 */
}

/* --- 5. WhatsApp 按钮美化 --- */
.home-activity .home-more {
    display: inline-block;
    background-color: #25D366; /* WhatsApp 绿 */
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;       /* 胶囊形 */
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* 强烈的阴影 */
    transition: all 0.3s ease;
}

.home-activity .home-more:hover {
    background-color: #1ebc57;
    transform: translateY(-3px); /* 悬停上浮 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* --- 6. 移动端适配 --- */
@media (max-width: 768px) {
    .home-activity { padding: 60px 0; }
    .home-activity .title { font-size: 28px; }
    .home-activity .content p { font-size: 16px; }
    .home-activity .home-more { width: 80%; text-align: center; } /* 按钮变宽 */
}

/* --- 1. 整体容器背景 --- */
.document-main {
    padding: 80px 0;
    background-color: #f8f9fa; /* 浅灰背景，区分于白色内容块 */
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.l-wrap {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 2. 头部标题样式 --- */
.home-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #333;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.home-des {
    text-align: center;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    margin: 0 auto 60px auto; /* 底部留出大间距 */
    line-height: 1.5;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* --- 3. 核心：Grid 网格布局 --- */
.project-list {
    list-style: none; /* 去掉默认黑点 */
    padding: 0;
    margin: 0;
    
    display: grid; /* 启用网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 强制双列等宽 */
    gap: 30px; /* 卡片之间的间距 */
}

/* --- 4. 单个卡片样式 (li) --- */
.project-list li {
    background-color: #ffffff;
    padding: 35px;
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* 默认轻微阴影 */
    transition: all 0.3s ease; /* 平滑过渡动画 */
    border-top: 3px solid transparent; /* 预留顶部线条位置 */
    
    /* 弹性布局确保内容对齐 */
    display: flex;
    flex-direction: column;
}

/* --- 5. 鼠标悬停效果 --- */
.project-list li:hover {
    transform: translateY(-5px); /* 向上浮动 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* 加深阴影 */
    border-top: 3px solid #0056b3; /* 顶部出现品牌蓝线条 */
}

/* --- 6. 问题标题 (h4) --- */
.project-name {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    line-height: 1.4;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee; /* 标题和内容之间加一条分割线 */
}

/* --- 7. 回答内容 (p) --- */
.project-content {
    font-size: 15px;
    color: #666; /* 深灰色文字，阅读舒适 */
    line-height: 1.6;
    margin: 0;
    flex-grow: 1; /* 让内容撑满 */
}

/* --- 8. 移动端适配 --- */
@media (max-width: 768px) {
    .project-list {
        grid-template-columns: 1fr; /* 手机上改为单列 */
        gap: 20px;
    }

    .document-main {
        padding: 50px 0;
    }

    .home-title {
        font-size: 28px;
    }
    
    .project-list li {
        padding: 25px;
    }
}


/* --- WhatsApp 按钮样式 --- */
.home-more-product {
    background-color: #25D366; /* WhatsApp 官方绿色 */
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    
    padding: 12px 35px;        /* 按钮大小 */
    border-radius: 50px;       /* 胶囊形状 */
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3); /* 绿色发光阴影 */
    transition: all 0.3s ease; /* 动画过渡 */
    white-space: nowrap;       /* 防止文字换行 */
}

/* 按钮悬停效果 */
.home-more-product:hover {
    background-color: #1ebc57; /* 悬停变深绿 */
    transform: translateY(-2px); /* 微微上浮 */
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5);
}

/* 移动端 (手机/竖屏平板) 样式调整 */
@media (max-width: 768px) {
    .home-more-product {
        text-align: center;
        box-sizing: border-box; /* 防止padding撑破宽度 */
    }
}

/* 默认情况下（即 PC 端大屏幕），隐藏移动端图片，确保显示 PC 端图片 */
.mobimg {
    display: none;
}
.pcimg {
    display: block; 
}

/* 当屏幕宽度小于 768px 时（进入移动端视图），隐藏 PC 端图片，显示移动端图片 */
@media screen and (max-width: 768px) {
    .mobimg {
        display: block;
    }
    .pcimg {
        display: none;
    }
}