@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
/* ---------- 现代化 CSS Reset ---------- */
/* 1. 盒模型统一：width/height 包含 padding 和 border */
*,
*::before,
*::after { box-sizing: border-box; }
/* 2. 清除所有元素的默认内外边距 */
* { margin: 0; padding: 0;}
/* 3. 设置根元素基础字体（可选，便于 rem 计算） */
html {
    font-size: 62.5%; /* 1rem = 10px（10/16=62.5%） */
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth; /* 可选平滑滚动 */}
/* 4. 全局主体样式：字体、背景、行高、文字颜色 */
body { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;     /* 16px */ overflow-x: hidden;
    line-height: 1; color: #000; background-color: #fff;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
/* 5. 媒体元素：图片、视频等自适应且无额外间隙 */
img,
picture,
video,
canvas,
svg { display: block; max-width: 100%; height: auto;}
/* 6. 表单元素继承字体（避免不一致） */
input,
button,
textarea,
select { font: inherit; letter-spacing: inherit; word-spacing: inherit; color: inherit;}
input:focus-visible,textarea:focus-visible{ outline: none; border: none;}

/* 7. 按钮清除默认样式并保留指针 */
button { background: none; border: none; cursor: pointer;}
/* 8. 链接去除下划线，继承颜色 */
a { color: inherit; text-decoration: none; cursor: pointer;
    -webkit-transition: color .1s linear;
    transition: color .1s linear;}
a:hover { text-decoration: none; }
/* 9. 列表清除默认标记 */
ul, ol,li{ list-style: none;}
/* 10. 表格边框合并，单元格间距归零 */
table { border-collapse: collapse; border-spacing: 0;}
/* 11. 标题等块级元素默认继承行高，可自行按需覆盖 */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: 1;}
/* 12. 引用去除引号 */
blockquote,
q { quotes: none;}
blockquote::before,
blockquote::after,
q::before,
q::after { content: ''; }
/* 13. 辅助类：隐藏元素 */
.hidden {  display: none !important;}
/* 14. 清除浮动（若需要） */
.clearfix { zoom: 1; }
.clearfix::after {content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both;}

img { border: none; }
.img-responsive{ display: block; max-width: 100%; height: auto; }
.text-right{ text-align: right;}

/*文本溢出处理*/
.text-overflow-1{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.text-overflow-2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.visible-xs{ display: none;}
.visible-sm{ display: none;}
.fl{ float: left;}
.fr{ float: right;}
.container { max-width: 1560px; margin: 0 auto;}
.show{ display: block!important;}
.header-fixed{ position: fixed!important; left: 0; top: 0; width: 100%; background: #fff; z-index: 999; border-bottom: 1px solid #e1e1e1; }

.btn{ display: flex; align-items: center; justify-content: center; width: 48rem; margin: 6rem auto 0; line-height: 5rem; text-align: center; color: #fff; background: #ef0006; border-radius: 1.5rem; }
.btn i{ display: inline-block; margin-left: 1em; transition: all linear .3s;}
.btn:hover .icon-long{ transform: translateX(50%) }

.imghover{ overflow: hidden;}
.imghover .pic{ overflow: hidden; }
.imghover img{ transition: all linear .3s; }
.imghover:hover img{ transform: scale(1.07);}

/*top*/
.top{ line-height: 40px; background: #e5e5e5;}
.top ul{ float: right;}
.top li{ float: left; margin-left: 40px; cursor: pointer; }
.top li i{ position: relative; top: 2px; font-size: 16px; margin-right: 8px;}


/*header*/
.header{ position: relative; padding: 3rem 0 0;}
.header .container{ display: flex; align-items: flex-end;  }
.header .logo{ position: relative; top: -2.4rem; }
.header .daohang{ flex: 1; display: flex; justify-content: center; text-align: center;}
.header .daohang ul{ display: flex; align-items: center; margin-top: 2.4rem;}
.header .daohang li{ margin: 0 3.5rem; padding-bottom: 1.3rem; }
.header .daohang li > a{ display: inline-block; position: relative; padding: 0.3rem 0 1.3rem; }
.header .daohang li > a::before{  content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; height: 2px; background: #ef0006; transition: all linear .3s;}
.header .daohang li.current a::before{ width: 100%;}
.header .daohang li:hover a::before{ width: 100%; }

.header .sub{ display: none; position: absolute; left: 0; top: 9.9rem; width: 100%; z-index: 20; }
.sub::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
    -o-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);}
.header .sub .container{ position: relative;}

.header .sub-pro{ padding: 5rem 0; line-height: 2; }
.header .sub-pro .container{ display: flex; align-items: flex-start; justify-content: space-between; text-align: left;}
.header .sub-pro dt{ font-size: 1.2em; font-weight: bold;}
.header .sub-pro dd{ position: relative;}
.header .sub-pro dd sup{ position: absolute; display: inline-block; width: 2.4rem; height: 1.1rem; background: url(../images/hot.gif) no-repeat center/cover;}
.header .sub-pro dd + dt{ margin-top: 2.5rem;}
.header .sub-pro a:hover{ text-decoration: underline;}
.daohang li:hover .sub{ display: block;}

.header .icon-search{ position: relative; top: -2.4rem; line-height: 1.5; font-size: 1.3em; padding: 0 .5em; cursor: pointer;}
.search-cont{ padding: 9rem 0 6rem;}
.search-cont .container{ position: relative; display: block;}
.search-cont .close-btn{ position: absolute; right: 0; top: -4rem; width: 20rem; line-height: 4.4rem; font-size: 1.8rem; background: #ef0006; color: #fff; text-align: center; cursor: pointer; text-transform: capitalize;
    -webkit-border-radius: 2.2rem;
    -moz-border-radius: 2.2rem;
    border-radius: 2.2rem; }
.search-cont .form-item{ position: relative; margin-bottom: 5rem;}
.search-cont .form-item .icon-search{ position: absolute; left: 0; top: .5rem; line-height: 8.2rem; font-size: 4.6rem;}
.search-cont .s-input{ width: 80%; margin-left: 10rem; line-height: 8.2rem; font-size: 5.4rem; background: transparent; border: 0; border-bottom: 1px solid; }
.hot-search{ padding-left: 10rem; font-size: 2.2rem;}
.hot-search b{ font-size: 1.3em; display: block; margin-bottom: 3.5rem;}
.hot-search p a{ display: inline-block; width: 15%;}




/*biaodan*/
.myform{ padding: 7rem 5rem 10rem; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.18); border-radius: 1rem;}
.myform ul{ margin: 0 -1rem; }
.myform li{ position: relative; float: left; width: 50%; padding: 0 1rem; line-height: 2; margin-bottom: 3rem; }
.myform li::before{ content: ''; position: absolute; left: 1rem; bottom: 0; width: calc(100% - 2rem); border-top: 1px solid #606060;}
.myform li:last-child::before{ display: none;}
.myform li label{ position: absolute;}
.myform li .txt{ border: 0 none; width: 100%; padding-left: 9.5rem;  }
.myform li:nth-child(2) .txt{ padding-left: 7rem; }
.myform li:nth-child(3) .txt{ padding-left: 16.5rem; }
.myform li:nth-child(4) .txt{ padding-left: 10rem; }
.myform li:nth-child(5) .txt{ padding-left: 12.5rem; }
.myform li .txt:focus,
.myform li .txt:focus-visible{ border: 0 none; outline: 0;}
.myform li:nth-child(n+5){ width: 100%;}
.myform li:last-child label{ position: static;}
.myform li:last-child .txt{ padding: .5rem 1rem; height: 12rem; border: 1px solid #606060; resize: none;}
.myform .btn{ width: 100%;}

/*footer*/
.footer{ padding: 9rem 0 10rem; background: url("../images/footer-bg.jpg") no-repeat center/cover; color: #fff;}
.footer-top{ margin-bottom: 6rem; border-bottom: 1px solid #828282;}
.footer-top .f-t-txt{ width: 34%; font-weight: bold;}
.footer-top .f-t-txt h2{ font-size: 4.5rem; line-height: 1.2; margin-bottom: 1em;}
.footer-top .f-t-txt p{ font-size: 1.8rem;}
.footer-top .f-t-right{}
.footer-top .f-t-right dl{ float: left; margin-left: 8rem; max-width: 25rem; line-height: 2.25;}
.footer-top .f-t-right dt{ font-size: 2.4rem; font-weight: bold; line-height: 1; margin-bottom: 1.3rem;}
.footer-top .f-t-right dd{ font-size: 1.2rem; }
.footer-top .f-t-right .ewm{ margin-top: 0.7rem; text-align: center; display: flex; justify-content: space-between;}

.footer-bot .f-b-r{ display: flex; align-items: flex-end;}
.footer-bot .f-b-media h3{ font-size: 2.4rem; font-weight: bold; margin-bottom: 2rem;}
.footer-bot .f-b-media a{ display: inline-block; text-align: center; line-height: 5.4rem; width: 5.8rem; height: 5.8rem; border: 2px solid; font-size: 3rem; border-radius: 50%;}
.footer-bot .f-b-media a + a{ margin-left: 2.3rem;}
.footer-bot .p{ font-size: 1.2rem; margin-left: 17rem; padding: 0 3rem 1rem 0;}

.base-whatsapp{ display: none; position: fixed; right: 10px; bottom: 80px; z-index: 99;}
.base-whatsapp a{ display: block; }

.gotop1{ opacity: 0; position: fixed; right: 20px; bottom: 30%; width: 48px; height: 48px; text-align: center; line-height: 48px; color: #fff; font-size: 26px; background: #0076e0; cursor: pointer; z-index: 99; }
.gotop1:hover{ color: #fff; }

.swt{ position: fixed; right: 0; bottom: 100px; z-index: 999;}
.swt a{ display: block; position: relative; width: 48px; height: 48px; margin-bottom: 5px; background: #0076e0 url(../../zhugang/images/swt.png) no-repeat 0 -3px; cursor: pointer;}
.swt a:hover{ background-color: #0364bb;}
.swt .swt-kefu{background-position: 0 -49px;}
.swt .swt-wx{ background-position: 0 -194px;}
.swt .swt-whatsapp{ background-position: 0 -242px;}
.swt .swt-box{ position: absolute; right: 48px; bottom: 100px; display: none; padding: 10px; background: #fff; margin-right: 15px; box-shadow: 0 2px 15px 0 rgb(0 0 0 / 30%); border-radius: 10px 0 0 10px;}
.swt .swt-box::before{
    position: absolute; right: -15px; top: 50%;
    margin-top: -16px;
    content: ''; width: 0; height: 0;
    border-width: 12px 0 12px 16px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;}
.swt .swt-email{ background-position: 0 -98px;}
.swt .swt-box-email{ padding: 15px; font-size: 22px; }
.swt .swt-box-wx{ bottom: -80px;}
.swt .swt-box-whatsapp{ bottom: -24px;}
.swt a:hover + .swt-box{ display: block; width: 220px;}
.swt a:hover + .swt-box-whatsapp,
.swt a:hover + .swt-box-wx{ width: 200px; height: 200px; }

/* 中桌面：1280px ~ 1535px */
@media (max-width: 1589px) {
    .container { max-width: 1320px; }

    .myform{ padding: 6.6rem 4.7rem 9.5rem;}
    .myform li{ margin-bottom: 2.6rem;}

    .footer{ padding: 8.5rem 0 9.5rem;}
    .footer-top .f-t-txt h2{ font-size: 4.2rem;}
    .footer-top .f-t-txt p{ font-size: 1.6rem;}
}
/* 小桌面：1024px ~ 1279px */
@media (max-width: 1349px) {
    .container { max-width: 1140px; }

    /* header*/
    .header .sub-pro{ padding: 4rem 0; font-size: 1.35rem;}

    .btn{ margin-top: 5.5rem;}

    .myform{ padding: 4.3rem 4.4rem 9rem;}
    .myform li{ margin-bottom: 2.4rem;}

    .footer{ padding: 8rem 0 9rem;}
    .footer-top .f-t-txt{ width: 36%;}
    .footer-top .f-t-txt h2{ font-size: 3.8rem;}
    .footer-top .f-t-txt p{ font-size: 1.5rem;}
    .footer-top .f-t-right dl{ margin-left: 4rem;}
    .footer-bot .f-logo{ width: 35%;}
    .footer-bot .f-b-media h3{ font-size: 2rem;}
    .footer-bot .f-b-media a{ width: 5.4rem; height: 5.4rem; line-height: 5rem; font-size: 2.8rem;}
    .footer-bot .f-b-media a + a{ margin-left: 1.8rem;}
    .footer-bot .p{ margin-left: 11.5rem;}
}
@media (max-width: 1169px) {
    .visible-sm{ display: block;}
    .hidden-sm{ display: none;}
    .container { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto;
        /* 移动端默认：左右留白 16px + 安全区适配 */
        padding-left: max(1.6rem, env(safe-area-inset-left));
        padding-right: max(1.6rem, env(safe-area-inset-right)); }
    body{ font-size: 1.5rem;}

    .btn{ margin-top: 4.5rem;}

    /* header*/
    .header .logo a{ display: block; width: 15rem;}
    .header .daohang{ text-align: right;}
    .header .daohang li{ margin: 0 1.5vw; }
    .header .daohang li > a{ padding-bottom: 1rem;}

    .header .search-cont{ top: 8.9rem;}
    .search-cont .close-btn{ right: 2rem;}
    .hot-search p{ display: flex;}
    .hot-search p a{ width: 20%;}

    .myform{ padding: 4rem 3rem 6rem;}
    .myform li{ margin-bottom: 2.4rem;}

    .m-footer{ position: relative; padding: 6rem 0; background: #e1e1e1;}
    .m-f-media{ display: flex; justify-content: space-between; width: 50%; margin: 0 auto; }
    .m-f-media a{ display: flex; align-items: center; justify-content: center; width: 8.3rem; height: 8.3rem; color: #313131; border: 2px solid; border-radius: 50%; font-size: 5rem; }
    .m-f-lianxi{ font-size: 2rem; display: flex; margin-top: 2rem;
        justify-content: center; flex-wrap: wrap; -webkit-flex-wrap: wrap;}
    .m-f-lianxi p{ position: relative; margin-top: 2rem;}
    .m-f-lianxi p:not(:first-child):not(:last-child){ margin-left: 8%;}
    .m-f-lianxi p:not(:first-child):not(:last-child)::before{ content: ''; position: absolute; left: -16%; height: 100%; border-left: 2px solid;}
    .m-f-lianxi p i{ display: inline-block; width: 1.5rem; margin-right: 1.5rem;  }
    .m-f-lianxi p .icon-email-o{ font-size: 0.75em;}
    .m-f-lianxi p:last-child{ width: 100%; text-align: center; }

}
@media (max-width: 767px){
    html{ font-size: clamp(10px, 10px + (100vw - 320px) * 0.0134, 16px); }
    body{ font-size: 1.2rem;}
    .visible-xs{ display: block;}
    .hidden-xs{ display: none!important;}

    .btn{ width: 100%; line-height: 3.8rem; border-radius: 1rem; margin-top: 3rem;}

     /*  header  */
    .header{ padding: 1.5rem 0;}
    .header .container{ align-items: center; justify-content: space-between; }
    .header .logo{ top:0; }
    .header .logo a{ width: 13rem;}
    .header .menu{ display: block; font-size: 2rem;}
    .header .daohang{ display: none; margin: 0; position: fixed; left: 0; top: 0; height: 100vh; width: 100%; z-index: 10;}
    .header .daohang .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.65); }
    .header .daohang-lists{ position: absolute; right: 0; top: 0; padding-top: 4rem; width: 40%; height: 100%; background: #fff; }
    .header .daohang-lists a{ display: block; text-align: left; margin: 0; padding: 0 3rem; line-height: 3.5;}
    .header .daohang-lists a::before { display: none;}

    .myform{ padding: 3rem 1.5rem 4rem;}
    .myform li{ width: 100%; margin-bottom: 2rem;}
    .myform li .txt{ padding-left: 7.4rem;}
    .myform li:nth-child(2) .txt{ padding-left: 5.2rem;}
    .myform li:nth-child(3) .txt{ padding-left: 12.2rem;}
    .myform li:nth-child(4) .txt{ padding-left: 7.6rem;}
    .myform li:nth-child(5) .txt{ padding-left: 9rem;}
    .myform li:last-child .txt{ height: 8rem;}
    .myform .btn{ height: 5rem; }

    .m-footer{ padding: 5rem 0; margin-bottom: 5rem;}
    .m-f-media{ width: 80%; max-width: 600px; min-width: 250px;}
    .m-f-media a{ width: 6rem; height: 6rem; font-size: 4rem; line-height: 5.6rem;}
    .m-f-lianxi{ display: block;  margin-top: 3rem; padding: 0 7%;}
    .m-f-lianxi p{ line-height: 1.3; font-size: 1.8rem; margin-top: 1em;}
    .m-f-lianxi p + p{ margin-left: 0!important; }
    .m-f-lianxi p:last-child{ text-align: left;}

    .bottom{ position: fixed; bottom: 0; left: 0; width: 100%; display: flex; z-index: 999;}
    .bottom a{ flex: 1; text-align: center; background: #313131; color: #fff; padding: 0.8rem 0; font-size: 1.1rem;}
    .bottom a i{ display: block; font-size: 2em; margin-bottom: 0.1em;}

}

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?wdtisd');
    src:  url('../fonts/icomoon.eot?wdtisd#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?wdtisd') format('truetype'),
    url('../fonts/icomoon.woff?wdtisd') format('woff'),
    url('../fonts/icomoon.svg?wdtisd#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-building:before {
    content: "\e917";
}
.icon-kefu1:before {
    content: "\e930";
}
.icon-kefu2:before {
    content: "\e932";
}
.icon-kefu3:before {
    content: "\e933";
}
.icon-kefu4:before {
    content: "\e934";
}
.icon-douyin:before {
    content: "\e900";
}
.icon-youtube:before {
    content: "\e901";
}
.icon-facebook:before {
    content: "\e902";
}
.icon-instagram:before {
    content: "\e903";
}
.icon-whatsapp-o:before {
    content: "\e904";
}
.icon-address1:before {
    content: "\e91b";
}
.icon-skype:before {
    content: "\e90c";
}
.icon-email:before {
    content: "\e916";
}
.icon-whatsapp:before {
    content: "\e905";
}
.icon-tel1:before {
    content: "\e906";
}
.icon-arrow:before {
    content: "\e931";
}
.icon-name:before {
    content: "\e935";
}
.icon-yingyong .path1:before {
    content: "\e907";
    color: rgb(0, 0, 0);
}
.icon-yingyong .path2:before {
    content: "\e908";
    margin-left: -1.0693359375em;
    color: rgb(239, 0, 6);
}
.icon-caizhi .path1:before {
    content: "\e909";
    color: rgb(0, 0, 0);
}
.icon-caizhi .path2:before {
    content: "\e90a";
    margin-left: -0.888671875em;
    color: rgb(239, 0, 6);
}
.icon-danzhong .path1:before {
    content: "\e90b";
    color: rgb(0, 0, 0);
}
.icon-danzhong .path2:before {
    content: "\e90d";
    margin-left: -1.0927734375em;
    color: rgb(239, 0, 6);
}
.icon-about:before {
    content: "\e90e";
}
.icon-address-o:before {
    content: "\e90f";
}
.icon-home:before {
    content: "\e910";
}
.icon-kefu:before {
    content: "\e911";
}
.icon-product:before {
    content: "\e912";
}
.icon-liuyan:before {
    content: "\e913";
}
.icon-shuangjiantou:before {
    content: "\e914";
}
.icon-download:before {
    content: "\e915";
}
.icon-ship:before {
    content: "\e918";
}
.icon-menu:before {
    content: "\e919";
}
.icon-first:before {
    content: "\e91a";
}
.icon-forging:before {
    content: "\e91c";
}
.icon-chemical:before {
    content: "\e91d";
}
.icon-mining:before {
    content: "\e91f";
}
.icon-other:before {
    content: "\e920";
}
.icon-left:before {
    content: "\e921";
}
.icon-power:before {
    content: "\e922";
}
.icon-search:before {
    content: "\e923";
}
.icon-wechat:before {
    content: "\e924";
}
.icon-right:before {
    content: "\e925";
}
.icon-design:before {
    content: "\e926";
}
.icon-analysis:before {
    content: "\e927";
}
.icon-casting:before {
    content: "\e928";
}
.icon-machining:before {
    content: "\e929";
}
.icon-assembly:before {
    content: "\e92a";
}
.icon-delivery:before {
    content: "\e92b";
}
.icon-metallurgy:before {
    content: "\e92c";
}
.icon-email-o:before {
    content: "\e92d";
}
.icon-long:before {
    content: "\e92e";
}
.icon-last:before {
    content: "\e92f";
}