@charset "utf-8";
/* CSS Document */
body{font-family: Arial; overflow-y:scroll;  margin: 0px; } 

a {text-decoration:none;}

.navigation {width: 100%; height:110px; z-index:999; position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 1); }
.navigation_01 {width: 100%; height: 80px; border-bottom:1px #F0F0F0 solid; }
.navigation_01_01{margin: auto; width: 90%; text-align: center; height: 80px; }
.navigation_01_01 img{height: 100%;}
.navigation_02 {width: 100%; height: 30px; border-bottom:1px #F0F0F0 solid; }
.navigation_02_01{margin: auto; width: 90%; }
.navigation_02_01 ul{list-style: none; margin: auto; padding: 0px; }
.navigation_02_01 ul li{display: inline-block; font-size: 1rem; height:30px; line-height: 30px; margin-right: 20px; }
.navigation_02_01 ul li a span{color: #686868;}
.navigation_03 {margin: auto; width: 90%; height: 30px; z-index:998; position: fixed; top: 110px; left: 0; right: 0; background: rgba(255, 255, 255, 1); }
.navigation_03 ul{list-style: none; margin: auto; padding: 0px; }
.navigation_03 ul li{display: inline-block; font-size: 0.8rem; height:30px; line-height: 30px; margin-right: 20px; }
.navigation_03 ul li a span{color: #686868;}

.banner{margin: auto; width: 90%; margin-top:140px; position: relative; }
.banner img{width: 100%;}
.banner div{ width:calc(40% - 40px); position: absolute; top: 0%; bottom: 0; left: 0%; right: 0; background: rgba(50, 50, 135, 0.3); clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);  display: flex; align-items: center; justify-content: flex-start; padding: 20px; }
.banner div h1{ color: #FFFFFF; font-size: 3rem; text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}

.product_01{margin: auto; width: 90%; margin-top:230px; }
.product_01 span{ font-size: 2rem; height: 50px; line-height: 50px; font-weight: bold;}
.product_1{margin: auto; width: 90%; height: 50px; margin-top:80px; }
.product_1 span{ font-size: 2rem; height: 50px; line-height: 50px; font-weight: bold;}
.product_02{margin: auto; width: 90%; }
.product_02 p{font-size: 1rem; line-height: 180%; color: #686868;}
.product_03{margin:auto; width: 90%; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:100px; }
.product_03 div{ width:calc(50% - 50px); position:relative; }
.product_03 div h3{}
.product_03 div img{ width: 100%;}
.product_03 div p{font-size: 1rem; line-height: 200%; color: #686868;}

.rope_d_01{margin: auto; width: 90%; height: 50px; margin-top:230px; }
.rope_d_01 span{ font-size: 2rem; height: 50px; line-height: 50px; font-weight: bold;}
.rope_d_1{margin: auto; width: 90%; height: 50px; margin-top:80px; }
.rope_d_1 span{ font-size: 2rem; height: 50px; line-height: 50px; font-weight: bold;}
.rope_d_02{margin:auto; width:90%; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:100px; margin-top: 50px; }
.rope_d_02 div{ width:calc(50% - 50px); position:relative; }
.rope_d_02 div img{ width: 100%;}
.rope_d_02 div p{font-size: 1rem; line-height: 200%; color: #686868;}
.rope_d_03{margin: auto; width: 90%; margin-top: 50px; }
.rope_d_03 p{font-size: 1rem; line-height: 180%; color: #686868;}
.rope_d_04{margin: auto; width: 90%; margin-top: 50px; }
.datasheet_table{ width:100%; font-size:0.8rem; border:none; table-layout:fixed; } /* table-layout:fixed 列宽相同 */
.datasheet_table tr{ height:30px;}
.datasheet_table tr td{ text-align:center;}
.datasheet_table_head{ background:#0a4374; color:#FFF;}
.datasheet_table_head td{ font-size:0.8rem; height:40px;}

#hr01{margin:auto; width: 90%; border: 1px #D3D3D3 solid; margin-top: 50px;}

.index_title_01{margin: auto; width: 90%; height: 50px; margin-top:230px; }
.index_title_01 span{ font-size: 2rem; height: 50px; line-height: 50px; font-weight: bold;}
.index_contect_01{margin: auto; width: 90%; }
.index_contect_01 p{font-size: 1rem; line-height: 180%; color: #686868;}

.index_title_02{margin: auto; width: 90%; height: 50px; margin-top:50px; }
.index_title_02 span{ font-size: 2rem; height: 50px; line-height: 50px; font-weight: bold;}
.index_contect_02{margin: auto; width: 90%; }
.index_contect_02 p{font-size: 1.3rem; line-height: 180%; color: #686868;}

.index_contect_03{margin:auto; width:90%; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:20px; margin-bottom: 100px; }
.index_contect_03 div{ width:calc(50% - 10px); position:relative; }
.index_contect_03 div img{ width: 100%; }
.youtube {overflow: hidden;padding-bottom: 56.25%; /* 16:9 比例 */ position: relative; height: 0; width: 100% !important; /* 核心：强制宽度为100%，覆盖父级的 calc(50% - 10px) */}
.youtube iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}

.index_contect_04{margin:auto; width:90%; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:19.5px; margin-top: 20px; }
.index_contect_04 div{ width:calc(33% - 13px); position:relative; }
.index_contect_04 div img{ width: 100%; }
.index_contect_04 div div{ width:calc(100% - 40px); position: absolute; top: 0%; bottom: 0; left: 0%; right: 0; background: rgba(50, 50, 135, 0.3); display: flex; align-items: center; justify-content: flex-start; padding: 20px; }
.index_contect_04 div div h1{ color: #FFFFFF; font-size: 1.5rem; text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}

.certificate_01{margin:auto; width: 90%; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:20px; }
.certificate_01 div{ width:calc(50% - 10px); position:relative; }
.certificate_01 div h3{}
.certificate_01 div img{ width: 100%; box-shadow: 3px 3px 3px #999;}

.gallery{margin: auto; width: 90%; display:flex; flex-wrap:wrap; justify-content: flex-start; gap: 19.5px; }
.gallery_box{width:calc(33% - 13px); }
.gallery_box img{width:100%;}

.contact_title_01{margin: auto; width: 90%; margin-top:50px; }
.contact_title_01 span{ font-size: 1.5rem; height: 35px; line-height: 35px; font-weight: bold;}
.contact_contect_01{margin: auto; width: 90%; }
.contact_contect_01 p{font-size: 1rem; line-height: 180%; color: #686868;}
.contact_contect_01 img{width: 15%;}

.foot{width: 100%; background: #6369D5; margin-top: 80px; }
.foot_content{width: 90%; margin: auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
.foot_01{width: 50%; text-align: left; position:relative; }
.foot_01 span{ color:#FFFFFF; height: 50px; line-height: 50px; font-size: 0.8rem;}
.foot_02{width: 50%; text-align: right; position:relative; }
.foot_02 span{ color:#FFFFFF; height: 50px; line-height: 50px; font-size: 0.8rem;}

.whatsapp {
width: 50px;           /* 宽度50px */
height: 50px;         /* 高度50px */
position: fixed;       /* 固定定位，相对于浏览器窗口 */
bottom: 80px;          /* 距离视窗底部20像素 */
right: 10px;           /* 距离视窗右侧20像素 */
z-index: 1000;         /* 确保层级在其他内容之上 */       /* 文字颜色 */
display: flex;         /* 使用Flex布局让内容居中 */
align-items: center;   /* 垂直居中 */
justify-content: center; /* 水平居中 */
box-sizing: border-box;/* 确保padding和border不会增加元素总宽高 */
border-radius: 8px;    /* 圆角，可选 */
}
.whatsapp img{ width: 100%; opacity: 0.9;}