/* Theme Name: SNKJ Theme URI: Description: Version: Author: 三鸟科技 Author URI: */ @charset "utf-8"; /* 初始化 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img{margin:0; padding:0} body, button, input, select, textarea{font:normal 13px Arial, system-ui, -apple-system, Microsoft Yahei, tahoma, sans-serif} button, input, textarea, select{font-size:inherit; font-weight:inherit; border:0; outline:0; resize:none} ul, ol, li{list-style:none} fieldset, img{border:0} h1, h2, h3, h4, h5, h6, code, dfn, em, var, i, b{font-style:normal; font-weight:normal} a{text-decoration:none; color:#555} input, textarea{outline-style:none} /* wpforms表单插件生成代码初始化 */ .wpforms-container .wpforms-confirmation-scroll, .wpforms-container .wpforms-error-container{line-height:16px} .wpforms-field-container .wpforms-field{padding:0; margin:0; clear:initial!important} .wpforms-field-container input, .wpforms-field-container textarea{margin:0; padding:0; border:none; background:none} /* 全局表单文字 */ input::-webkit-input-placeholder{color:#AAA; font-size:16px} input::-moz-placeholder{color:#AAA; font-size:16px} input:-moz-placeholder{color:#AAA; font-size:16px} input:-ms-input-placeholder{color:#AAA; font-size:16px} /*滚动条*/ ::-webkit-scrollbar{width:6px; height:8px} ::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); background:#333} ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); border-radius:0; background:#F1F1F1} /* 复制选中 */ ::selection{background:#338FFF; color:#FFF} ::-moz-selection{background:#338FFF; color:#FFF} ::-webkit-selection{background:#338FFF; color:#FFF} /* body{text-transform:capitalize} */ .fl{float:left} .fr{float:right} .container{overflow:hidden} .pr{position:relative} .clear{clear:both} .wrap{width:78.5%; max-width:1500px; margin:0 auto} @media screen and (max-width:1620px){ .wrap{width:86%} } @media screen and (max-width:1500px){ .wrap{width:1280px} } @media screen and (max-width:1366px){ .wrap{width:92%} } @media screen and (max-width:1200px){ .wrap{width:94%} } :root{ --i_color:#1c1c1c; /* 全局颜色 */ --i_color2:#053e8c; /* 副颜色 */ --header_height:100px; /* 头部高度 */ --header_height_reduce:100px; /* 头部收缩后高度 */ --border_color:rgba(0,0,0,.1); /* 默认边框颜色 */ } @media screen and (max-width:1440px){ :root{--header_height:96px} } @media screen and (max-width:1366px){ :root{--header_height:90px} } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ :root{--header_height:60px} } @media screen and (max-width:767px){ :root{--border_color:rgba(0,0,0,.06)} .banner_text{display: none;} } @media screen and (max-width:560px){ .banner_text{display: none;} :root{--header_height:50px} } /* header */ header{position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,.7); box-shadow:0 4px 10px rgba(0,0,0,.1); z-index:2014} @media screen and (min-width:960px){ header .top{display:-webkit-flex; display:flex; justify-content:space-between} } @media screen and (max-width:959px){ header{background:rgba(255,255,255,.8)} } .banner_text{position:absolute; top:40%; left:16%; padding:24px 34px 40px 34px;)} .banner_text b{font-size:40px; color:var(--i_color2); line-height:40px} .banner_text h2{padding-bottom:14px; margin-bottom:30px; border-bottom:1px solid rgba(239,178,1,.5); font-size:36px; color:#fff; font-weight:bold; line-height:41px; letter-spacing:2px; text-transform:uppercase; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .banner_text p{width: 50%;font-size:16px; color:#FFF; line-height:34px; } /* logo */ .logo{height:var(--header_height); display:-webkit-flex; display:flex; align-items:center} .logo img{max-height:50px} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .logo img{max-height:42px} } @media screen and (max-width:1200px){ .logo img{max-height:38px} } @media screen and (max-width:959px){ .logo{float:left} .logo img{max-height:19px} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } .image-list { display: flex; /* 使用 Flexbox 布局 */ justify-content: center; /* 水平居中 */ flex-wrap: wrap; /* 允许换行 */ padding: 0; /* 清除默认内边距 */ list-style-type: none; /* 清除默认的列表样式 */ } /* 设置图片样式，保证图片适应容器 */ .xiaoguo img { height: auto; /* 高度自动 */ display: block; /* 防止图片底部出现空白 */ max-width: 100%; /* 限制图片最大宽度为100% */ } /* 导航 */ @media screen and (min-width:960px){ .i_nav{display:-webkit-flex; display:flex; justify-content:center; flex-wrap:nowrap} .i_nav>li{margin:0 26px} .i_nav>li>a{display:block; font-size:18px; color:#222; line-height:var(--header_height); text-transform: uppercase;} /* .i_nav .sub-menu{display:none; position:absolute; left:50%; transform:translate(-50%,0); min-width:100%; background:#FFF; z-index:2} .i_nav .sub-menu>li{max-height:0; transition:max-height 300ms ease; overflow:hidden} .i_nav .sub-menu a{display:block; box-sizing: border-box; padding:0 20px; font-size:15px; color:#555; display:block; text-align:center; line-height:36px;} */ /* 二级导航菜单 */ .i_nav>li>.sub-menu { display: none; position: absolute; top: var(--header_height); background: #EEE; min-width: 200px; } .i_nav>li>.sub-menu:hover{overflow: initial !important;} .i_nav>li>.sub-menu>li { padding-right: 16px; position: relative; } .i_nav>li>.sub-menu>li>a { display: block; text-align: left; padding: 14px 20px; font-size: 16px; text-transform: capitalize; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; left: 0; } .i_nav>li>.sub-menu>li:hover { background: rgb(66 51 84); } .i_nav>li>.sub-menu>li:hover a{color: #FFF;} .i_nav>li>.sub-menu>li:hover>a::before { left: 0; } /* 三级导航菜单 */ .i_nav .sub-menu .sub-menu { display: none; position: absolute; top: 0; left: 100%; background: rgb(66 51 84); } .i_nav .sub-menu .sub-menu li { padding: 8px 20px; text-align: left; } .i_nav .sub-menu .sub-menu a { display: inline-block; padding: 6px 0; text-align: left; font-size: 15px; color: #FFF; text-transform: capitalize; white-space: nowrap; position: relative; } .i_nav .sub-menu .sub-menu a::before { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #FFF; -webkit-transition: all .5s ease; transition: all .5s ease } .i_nav .sub-menu .sub-menu li:hover a::before { width: 100%; } .nav_list_show{display:none; position:absolute; top:var(--header_height); left:0; box-sizing:border-box; border-top:1px solid #DDD; padding:40px 0; width:100%; background:#FFF; z-index:2013} } .i_nav>.current-menu-item>a, .i_nav>li:hover>a{color:var(--i_color)!important} /* pc端 产品导航下拉 */ .nav_products_show ul{width:94%; max-width:1500px; margin:0 auto; display:-webkit-flex; display:flex; flex-wrap:nowrap; justify-content:space-between} .nav_products_show li{width:25%} .nav_products_show li:not(:last-child){padding-right:30px; margin-right:30px; border-right:1px solid #DDD} .nav_products_show li>a{display:block; margin-bottom:20px; font-size:20px; color:#333; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .nav_products_show li>a:hover{color:var(--i_color)} .nav_products_show dl{overflow:hidden} .nav_products_show dt{float:left; box-sizing:border-box; padding-left:14px; width:48%; margin:0 4% 0 0; position:relative} .nav_products_show dt:nth-child(2n){margin-right:0} .nav_products_show dt:before{content:""; position:absolute; top:50%; transform:translate(0,-50%); left:0; width:6px; height:6px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background:#000} .nav_products_show dt a{display:block; font-size:15px; color:#333; line-height:44px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .nav_products_show dt:hover a{color:var(--i_color)} @media screen and (max-width:1440px){ .nav_products_show li>h2{font-size:18px; margin-bottom:16px} .nav_products_show dt a{font-size:14px; line-height:38px} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .nav_products_show li>h2{font-size:16px; margin-bottom:12px} .nav_products_show dt{padding-left:12px} .nav_products_show dt:before{width:4px; height:4px} .nav_products_show dt a{font-size:13px; line-height:32px} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } /* pc端 应用导航下拉 */ .nav_application_show ul{width:94%; max-width:1500px; margin:0 auto; display:-webkit-flex; display:flex; flex-wrap:nowrap; justify-content:space-between} .nav_application_show li{text-align:center; width:20%; position:relative; overflow:hidden} .nav_application_show li:not(:last-child){margin-right:30px} .nav_application_show li a{display:block; overflow:hidden} .nav_application_show .img{width:100%; position:relative; overflow:hidden} .nav_application_show .img:before{content:""; display:block; padding-bottom:75%} .nav_application_show .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .nav_application_show li h2{margin-top:14px; font-size:16px; color:#666; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .nav_application_show li:hover h2{color:var(--i_color)} @media screen and (max-width:1366px){ .nav_application_show li h2{font-size:15px} } @media screen and (max-width:1200px){ .nav_application_show li h2{font-size:14px} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } @media screen and (max-width:1440px){ .i_nav>li>a{font-size:17px} } @media screen and (max-width:1366px){ .i_nav>li{margin:0 24px} .i_nav>li>a{font-size:16px} } @media screen and (max-width:1200px){ .i_nav>li>a{font-size:15px} } @media screen and (max-width:959px){ /* .i_nav{display:none; position:absolute; top:var(--header_height); left:0; width:100%; width:100vw; background:#FFF; z-index:2} .i_nav>li{margin:0 0; border-bottom:1px solid var(--border_color); position:relative} .i_nav .menu-item-has-children:after{content:""; position:absolute; top:20px; right:16px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid rgba(0,0,0,.3)} .i_nav .menu-item-has-children .menu-item-has-children:after{top:14px} .i_nav>li>a{padding:0 3%; font-size:16px; color:#555; line-height:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .nav_list_show{display:none!important} .i_nav>li>.sub-menu, .i_nav>li>.sub-menu .sub-menu{display:none} .i_nav .sub-menu li:not(:last-child){border-bottom:1px solid var(--border_color)} .i_nav>li>.sub-menu>li>a{padding:0 3% 0 6%; font-size:15px; color:#888; line-height:36px} .i_nav .sub-menu .sub-menu a{padding:0 3% 0 9%; font-size:14px; color:#888; line-height:30px} .i_nav a{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} */ .i_nav { display: none; position: absolute; top: var(--header_height); left: 0; width: 100%; width: 100vw; max-height: calc(100vh - var(--header_height)); background: #FFF; overflow-y: auto; z-index: 2 } /*滚动条*/ .i_nav::-webkit-scrollbar { width: 3px; height: 8px } .i_nav::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #555 } .i_nav::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .i_nav>li { margin: 0 0 !important; border-bottom: 1px solid var(--border_color); position: relative } .i_nav>.menu-item-has-children span { display: block; position: absolute; top: 0; right: 0; width: 44px; height: 44px; font-size: 20px; background: #EEE; color: #555; z-index: 3; } .i_nav>.menu-item-has-children span::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: '\f107'; } .i_nav>.menu-item-has-children span.on::before { content: '\f106'; } .i_nav>li>a { padding: 0 20px; font-size: 16px; color: #222; line-height: 44px; text-transform: uppercase; } .i_nav>li>.sub-menu { display: none } .i_nav>li>.sub-menu li { position: relative; } .i_nav .sub-menu a { padding: 0 40px; font-size: 15px; color: #555; line-height: 40px; position: relative; } .i_nav .sub-menu li:not(:last-child) { border-bottom: 1px solid var(--border_color) } .i_nav>li>.sub-menu b { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: url(static/images/public/arrow_down_hollow_hei.svg) no-repeat center; background-size: 16px; } .i_nav>li>.sub-menu b.on { background: url(static/images/public/arrow_up_hollow_hei.svg) no-repeat center; background-size: 16px; } .i_nav .sub-menu .sub-menu { display: none; } .i_nav .sub-menu .sub-menu a { padding: 0 60px; font-size: 13px; color: #888; line-height: 36px; position: relative; } .i_nav a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .i_nav>.menu-item-has-children>a, .i_nav>.menu-item-has-children>.sub-menu>li>a { padding-right: 50px; } .i_nav_list,.nav_list_show{display:none} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } /* 移动端导航 */ .nav_menu{position:absolute; width:26px; height:20px; right:3%; top:50%; transform:translateY(-50%); display:none; cursor:pointer} .nav_menu i{display:block; width:100%; height:3px; position:absolute; top:50%; margin-top:-2px; background: rgb(66 51 84); border-radius:10px; transition:0.5s} .nav_menu::before{content:""; width:100%; height:3px; background: rgb(66 51 84); position:absolute; top:0; left:0; border-radius:10px; transition:0.5s} .nav_menu::after{content:""; width:100%; height:3px; background: rgb(66 51 84); position:absolute; bottom:0; left:0; border-radius:10px;transition:0.5s} .nav_menu.on i{opacity:0} .nav_menu.on::before{transform:rotate(45deg); top:50%; margin-top:-2px} .nav_menu.on::after{transform:rotate(-45deg); top:50%; margin-top:-2px} @media screen and (max-width:959px){ .more_ul span.on{ background: rgb(0 0 0 / 3%) url(static/images/arrow_up_hollow_hei.svg) no-repeat center; background-size: 18px } .nav_menu{display:block!important} } .top_r{height:var(--header_height)} /* 搜索 */ .top_search_ico{float:left; position:relative; top:50%; transform:translate(0,-50%)} .top_search_ico i{display:block; width:22px; height:22px; background:url(static/images/search_hei.svg) no-repeat center; background-size:contain; cursor:pointer} .top_search{--search_height:44px} .top_search{position:absolute; top:var(--header_height); left:0; width:100%; height:0; background:rgba(0,0,0,.5); overflow:hidden; z-index:-1} .top_search.on{display:block!important; height:74px} .top_search form{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36%; font-size:0; overflow:hidden} .top_search .top_search_ipt, .top_search .top_search_btn{display:inline-block; vertical-align:middle} .top_search .top_search_ipt{width:calc(100% - var(--search_height)); height:var(--search_height); line-height:var(--search_height); box-sizing:border-box; padding-left:16px; font-size:16px; color:#555} .top_search .top_search_btn{width:var(--search_height); height:var(--search_height); background:var(--i_color) url(static/images/search_bai.svg) no-repeat center; background-size:20px; cursor:pointer} .top_search{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ .top_r{float:right; margin-right:48px; position:initial} .top_search{top:var(--header_height); transform:none} .top_search.on{height:60px} .top_search form{width:94%} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .top_search_ico i{width:18px; height:18px} } /* 语言切换 */ .i_language_nav{ float: right; margin-left: 30px; margin-right: 0; position: relative;} .i_language_nav>li>a{ padding-right: 20px; height: var(--header_height);display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;position: relative;} .i_language_nav>li>a::before{content: '';position:absolute; top:50%; transform:translate(0,-50%);right: 0;width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #000;-webkit-transition:all .5s ease; transition:all .5s ease} .i_language_nav>li>a .trp-ls-language-name{font-size: 18px;color: #000;} .i_language_nav>li>a.on::before{-webkit-transform:translate(0,-50%) rotate(-180deg); transform:translate(0,-50%) rotate(-180deg);} .i_language_nav .sub-menu{ display: none; position: absolute;right: 0; background: #EEE; } .i_language_nav .sub-menu.on{display: block;} .i_language_nav .sub-menu li{} .i_language_nav .sub-menu a>span{display:block; padding:0 14px; min-width:100px; overflow:hidden} .i_language_nav .sub-menu img, .i_language_nav .sub-menu .trp-ls-language-name{display:inline-block; vertical-align:middle} .i_language_nav .sub-menu .trp-ls-language-name{margin-left:8px; font-size:15px; color:#333; line-height:32px} .i_language_nav .sub-menu li:hover{background: rgb(66 51 84);} .i_language_nav .sub-menu li:hover .trp-ls-language-name{color: #FFF;} @media screen and (max-width:768px) { .i_language_nav{margin-left: 20px;} .i_language_nav>li>a .trp-ls-language-name{font-size: 16px;} } @media screen and (max-width:560px) {} /* .top_language{float:right; margin-left:40px; position:relative; top:50%; transform:translate(0,-50%); padding-right:22px; cursor:pointer} .top_language:after{content:""; position:absolute; top:50%; margin-top:-4px; right:0; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #000} .top_language>li{} .top_language>li>a{display:none!important} .top_language.on>li:after{-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg)} .top_language i{display:block; width:30px; height:30px; background:url(static/images/language.svg) no-repeat center; background-size:contain; cursor:pointer} .top_language .sub-menu{position:absolute; top:45px; right:0; display:none; min-width:100%; background:#FFF} .top_language.on .sub-menu{display:block!important} .top_language .sub-menu li{border-bottom:1px solid var(--border_color)} .top_language .sub-menu a>span{display:block; padding:0 14px; min-width:100px; overflow:hidden} .top_language .sub-menu img, .top_language .sub-menu .trp-ls-language-name{display:inline-block; vertical-align:middle} .top_language .sub-menu .trp-ls-language-name{margin-left:8px; font-size:14px; color:#666; line-height:32px} .top_language .sub-menu li:hover{background:rgba(0,0,0,.1)} .top_language .sub-menu li:hover .trp-ls-language-name{color:var(--i_color)} */ @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .top_language{margin-left:24px} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .top_r{margin-right:42px} .top_language{margin-left:14px} .top_language .sub-menu{top:39px} .top_language i{width:28px; height:28px} .top_language>li{padding-right:16px} .nav_menu{width:22px; height:18px} } header, .logo, .logo img, .i_nav>li>a, .top_r{-webkit-transition:all .7s ease; -moz-transition:all .7s ease; -ms-transition:all .7s ease; -o-transition:all .7s ease; transition:all .7s ease} /* 首页 更多按钮 */ a.i_more{--border_style:3px solid var(--i_color)} a.i_more{display:block; text-align:center; width:222px; line-height:40px; background:var(--i_color2); position:relative} a.i_more span{margin-right:6px; font-size:20px; color:#FFF} a.i_more i{width:30px; height:14px; background:url(static/images/arrow_right.svg) no-repeat center; background-size:30px} a.i_more span, a.i_more i{display:inline-block; vertical-align:middle} a.i_more:hover{background:#e4aa02} /* a.i_more:hover span{color:var(--i_color)} a.i_more:hover i{background:url(static/images/arrow_right2.svg) no-repeat center; background-size:30px} */ @media screen and (max-width:1200px){ a.i_more{width:190px} a.i_more span{font-size:18px} .i_banner{height: 800px;overflow:hidden; position:relative} } @media screen and (max-width:959px){ a.i_more{width:180px} a.i_more span{font-size:16px} .i_banner{height: 253px;overflow:hidden; position:relative} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ a.i_more{width:150px} a.i_more span{font-size:14px} a.i_more i{width:24px; background-size:24px} } @media screen and (max-width:375px){ .i_banner{height: 223px;overflow:hidden; position:relative} /* 设置每个 li 项的宽度 */ a.i_more{width:140px} a.i_more span{font-size:13px} a.i_more i{width:20px; background-size:18px} } @media screen and (min-width: 2560px) { .i_banner{height: 927px;overflow:hidden; position:relative} a.i_more{width:140px} a.i_more span{font-size:13px} a.i_more i{width:20px; background-size:18px} } @media screen and (min-width: 1200px) { .i_banner{height: 858px;overflow:hidden; position:relative} /* 设置每个 li 项的宽度 */ .xiaoguo { width: 31%; flex: 0 0 calc(50% - 20px); /* 每个列表项占据50%宽度，减去间距 */ margin: 10px; /* 设置间距 */ box-sizing: border-box; /* 包含边框和内边距 */ display: inline-grid; } a.i_more{width:140px} a.i_more span{font-size:13px} a.i_more i{width:20px; background-size:18px} } @media screen and (max-width: 470px) { .i_banner{height: 204px;overflow:hidden; position:relative} a.i_more{width:140px} a.i_more span{font-size:13px} a.i_more i{width:20px; background-size:18px} } /* banner */ .i_banner_list{padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .i_banner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .i_banner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; } .i_banner_list .swiper-slide>img{width:100%; object-fit:cover} /* banner上文字 */ .b_text1{position:absolute; top:40%; left:30%; padding:24px 34px 40px 34px; background:rgba(0,0,0,.2)} .b_text1 b{font-size:40px; color:var(--i_color2); line-height:40px} .b_text1 h2{padding-bottom:14px; margin-bottom:30px; border-bottom:1px solid rgba(239,178,1,.5); font-size:36px; color:#FFF; font-weight:bold; line-height:41px; letter-spacing:2px; text-transform:uppercase; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .b_text1 p{font-size:22px; color:#FFF; line-height:34px; text-transform:uppercase} .b_text2{position:absolute; top:26%; left:22%} .b_text2 h2{padding-top:30px; font-size:46px; color:#FFF; font-weight:bold; line-height:54px; letter-spacing:-.5px; text-transform:uppercase; position:relative} .b_text2 h2 span{color:var(--i_color2)} .b_text2 h2:before{content:""; position:absolute; top:0; left:0; width:130px; height:6px; background:var(--i_color)} .b_text2 dl{margin:16px 0; overflow:hidden} .b_text2 dt i, .b_text2 dt p{display:inline-block; vertical-align:middle} .b_text2 dt i{width:30px; height:30px; overflow:hidden} .b_text2 dt img{width:100%; height:100%; object-fit:contain} .b_text2 dt p{margin-left:14px; font-size:22px; color:#FFF; text-transform:uppercase; line-height:40px} .b_text3{position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); width:90%; text-align:center}.b_text3 h2{display:inline-block; font-size:62px; color:#FFF; font-weight:bold; line-height:72px; text-transform:uppercase; border-bottom:2px solid var(--i_color2)}.b_text3 h4{margin:20px auto; font-size:28px; color:#FFF; font-weight:bold; line-height:28px; text-transform:uppercase}.b_text3 p{display:inline-block; padding:0 16px; background:var(--i_color2); font-size:18px; color:#FFF; line-height:54px; text-transform:uppercase}.b_text3 dl{margin-top:24px; display:-webkit-flex; display:flex; justify-content:center; flex-wrap:nowrap}.b_text3 dt{margin:0 30px; padding-left:34px; background:url(static/images/b_text3_ico.png) no-repeat left center; background-size:contain; font-size:18px; color:#FFF; line-height:24px; text-transform:uppercase} @media screen and (max-width:1440px){ .b_text1{left:20%} .b_text2{left:18%} .b_text3 h2{font-size:60px; line-height:68px} } @media screen and (max-width:1366px){ .b_text1{left:24%} .b_text2{left:16%} .b_text3 h2{font-size:50px; line-height:64px} .b_text3 p{line-height:48px} } @media screen and (max-width:1200px){ .b_text1 h2{font-size:36px} .b_text1 p{font-size:18px; line-height:28px} .b_text2 h2{font-size:36px; line-height:42px} .b_text2 dt p{font-size:18px} .b_text3 h2{font-size:44px; line-height:50px} .b_text3 h4{font-size:26px} .b_text3 p{font-size:16px; line-height:48px} } @media screen and (max-width:959px){ .b_text1{display: none;padding:16px 16px 26px 16px; left:50%; top:54%; transform:translate(-50%,-50%)} .b_text2{display: none;padding:16px 16px 26px 16px; left:50%; top:54%; transform:translate(-50%,-50%)} .b_text3{display: none;padding:16px 16px 26px 16px; left:50%; top:54%; transform:translate(-50%,-50%)} .b_text1 h2{padding-bottom:10px; margin-bottom:20px; font-size:34px} .b_text2 h2{font-size:32px; line-height:40px; padding-top:20px} .b_text2 dt i{width:28px; height:28px} .b_text3 h2{font-size:36px; line-height:42px} .b_text3 h4{margin:16px auto; font-size:22px} .b_text3 p{line-height:40px} .b_text3 dt{margin:0 20px; font-size:16px; line-height:20px} } @media screen and (max-width:767px){ .b_text1 h2{padding-bottom:4px; margin-bottom:10px; font-size:26px} .b_text1 p{font-size:16px; line-height:24px} .b_text2 h2{font-size:28px; line-height:36px} .b_text2 dt i{width:26px; height:26px} .b_text2 dt p{font-size:16px; line-height:36px} .b_text3 h2{font-size:32px; line-height:38px} .b_text3 h4{margin:16px auto 12px; font-size:20px} .b_text3 p{} .b_text3 dt{margin:0 10px; padding-left:24px; font-size:14px; line-height:18px} } @media screen and (max-width:560px){ .b_text1 b{font-size:28px; line-height:30px} .b_text1 h2{font-size:20px} .b_text1 p{font-size:14px; line-height:22px} .b_text2{left:14%} .b_text2 h2{font-size:24px; line-height:32px} .b_text2 h2:before{width:90px; height:4px} .b_text2 dt i{width:24px; height:24px} .b_text2 dt p{font-size:16px; line-height:36px} .b_text3 h2{font-size:24px; line-height:32px} .b_text3 h4{margin:10px auto 8px; font-size:15px} .b_text3 p{font-size:13px; line-height:28px} .b_text3 dl{flex-wrap:wrap; margin-top:14px} .b_text3 dt{margin:4px 10px; padding-left:24px; font-size:12px; line-height:18px} } @media screen and (max-width:375px){ .b_text2 h2{font-size:20px; line-height:26px} .b_text2 h2:before{width:80px; height:4px} .b_text2 dt i{width:22px; height:22px} .b_text2 dt p{margin-left:8px; font-size:15px; line-height:32px} } /* .more_ul ul{padding: 0 8px;display: none;} */ /* .more_ul{position: relative;} .more_ul span{ display: block; position: absolute; top: 0; right: 0; width: 42px; height: 42px; box-sizing: border-box; background: rgb(0 0 0 / 3%) url(static/images/arrow_down_hollow_hei.svg) no-repeat center; background-size: 18px; } .more_ul span.on{ background: rgb(0 0 0 / 3%) url(static/images/arrow_up_hollow_hei.svg) no-repeat center; background-size: 18px } */ /* banner 左右箭头 */ .banner-button-prev, .banner-button-next{ position:absolute; top:50%; transform:translate(0,-50%); width:44px; line-height:70px; background:rgba(0,0,0,.6); text-align:center; font-family:宋体, SimSun, sans-serif, NSimSun; font-size:40px; color:#FFF; z-index:999; outline:none; cursor:pointer; -moz-user-select:none; /*火狐*/ -webkit-user-select:none; /*webkit浏览器*/ -ms-user-select:none; /*IE10*/ -khtml-user-select:none; /*早期浏览器*/ user-select:none; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .banner-button-prev{left:-60px} .banner-button-next{right:-60px} .i_banner:hover .banner-button-prev{left:4%} .i_banner:hover .banner-button-next{right:4%} .banner-button-prev:hover, .banner-button-next:hover{background:var(--i_color)} /* 首页- banner - 圆点指示器 */ .banner-pagination{ position:absolute; bottom:30px; left:50%; transform:translate(-50%,0); cursor:pointer; z-index:10 } .banner-pagination .swiper-pagination-bullet{width:14px; height:14px; display:inline-block; margin:0 5px; background:#E5E5E5; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .banner-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ .i_banner_list .swiper-slide{width:100%; position:relative; overflow:hidden} .i_banner_list .swiper-slide:before{content:""; display:block; padding-bottom:90%} .i_banner_list .swiper-slide>img{position:absolute; top:80%; left:50%; transform:translate(-50%,-50%); width:100%; } .swiper-wrapper{height: 200px;} .banner-button-prev, .banner-button-next{display:none} .banner-pagination{bottom:20px} .i_news_list h6{ font-size: 16px !important;} .i_news_list li:first-child h6{ font-size: 16px !important;;} .i_news_list .txt{ margin-top: 9px!important; font-size: 13px !important;; color: rgba(var(--font-opacity) .8); line-height: 150%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } .i_news_list .data{ margin-top: 10px; font-size: 12px !important; ; color: var(--i_color); } .xiaoguo { width: 41%; flex: 0 0 calc(50% - 20px); /* 每个列表项占据50%宽度，减去间距 */ margin: 10px; /* 设置间距 */ box-sizing: border-box; /* 包含边框和内边距 */ display: inline-grid; } .i_news_list i{ display: flex; justify-content: center; align-items: center; margin-top: 20px; width: 26px!important; ; height: 26px!important; ; border-radius: 50%; background-color: var(--i_color); font-size: 30px; color: #fff; border: 1px solid transparent; -webkit-transition: all .5s ease; transition: all .5s ease; } .i_news_list.i_news_list { margin-top: 50px!important; ; } .i_factory_list .img img { position: absolute; top: 13%!important; ; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .i_factory_list .img h2 { font-size: 16px; } } @media screen and (max-width:767px){ .i_banner_list .swiper-slide:before{padding-bottom:110%} } @media screen and (max-width:560px){ .i_banner_list .swiper-slide:before{padding-bottom:120%} } @media screen and (min-width: 470px) and (max-width: 767px){ .i_banner_list .swiper-slide:before{padding-bottom:120%} .i_banner_list .swiper-slide>img{position:absolute; top:74%; left:50%; transform:translate(-50%,-50%); width:100%; } } /* main */ main{} /* box间距 margin and padding */ .box_mg{margin:80px auto 3px} .box_pd{padding:80px 0} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .box_mg{margin:70px auto 60px} .box_pd{padding:70px 0} } @media screen and (max-width:1200px){ .box_mg{margin:50px auto 60px} .box_pd{padding:60px 0} } @media screen and (max-width:959px){ .box_pd{padding:50px 0} } @media screen and (max-width:767px){ .box_mg{margin:40px auto 50px} .box_pd{padding:44px 0} } @media screen and (max-width:560px){ .box_mg{margin:30px auto 40px} .box_pd{padding:34px 0} } @media screen and (max-width:375px){ .box_mg{margin:24px auto 30px} .box_pd{padding:15px 0} } /* 首页标题 */ .i_tit{text-align:center; margin-bottom:44px} .i_tit h2{font-size:35px; color:#222; font-weight:bold; } @media screen and (max-width:1440px){ .i_tit h2{font-size:40px} } @media screen and (max-width:1366px){ .i_tit{margin-bottom:30px} .i_tit h2{font-size:36px} } @media screen and (max-width:1200px){ .i_tit{margin-bottom:28px} .i_tit h2{font-size:30px} } @media screen and (max-width:959px){ .i_tit{margin-bottom:26px} .i_tit h2{font-size:28px} } @media screen and (max-width:767px){ .i_tit{margin-bottom:24px} .i_tit h2{font-size:26px} } @media screen and (max-width:560px){ .i_tit{margin-bottom:20px} .i_tit h2{font-size:18px} } @media screen and (max-width:375px){ .i_tit{margin-bottom:18px} .i_tit h2{font-size:18px} } /* 产品 */ .i_products{background:#f7f7f7} /* 产品左侧菜单 */ .i_products_nav{float:left; width:23%} .i_products_nav ul{} .i_products_nav li{border-bottom:1px solid var(--border_color); position:relative} .i_products_nav li a{display:block; font-size:20px; color:#555; line-height:56px; font-weight:normal; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer} .i_products_nav .current a{color:var(--i_color)!important; font-weight:bold} .i_products_nav .current:after{content:""; position:absolute; top:50%; transform:translate(0,-50%); right:-26px; width:10px; height:10px; background:#B1B1B1; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;} .i_products a.i_more{position:absolute; left:0; bottom:4%} /* 产品右侧展示 */ .i_products_show{float:right; width:72%; overflow:hidden} .i_products_show .sublist{padding:10px; display:none} .i_products_show .sublist:first-child{display:block} .i_products_list{padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .i_products_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .i_products_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; } .i_products_list .swiper-slide a{display:block; width:100%} .i_products_list .img{width:100%; box-sizing:border-box; border:1px solid var(--border_color); background:#FFF; position:relative; overflow:hidden} .i_products_list .img:before{content:""; display:block; padding-bottom:100%} .i_products_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; height:80%; } .i_products_list .txt{margin-top:18px; text-align:center; overflow:hidden} .i_products_list .txt p{font-size:20px; color:#222; max-height:52px; line-height:26px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2} .i_products_list .swiper-slide:hover .img{box-shadow:0 0 8px rgba(0,0,0,.1)} .i_products_list .swiper-slide:hover img{-webkit-transform:translate(-50%,-50%) scale(1.15,1.15); -moz-transform:translate(-50%,-50%) scale(1.15,1.15); transform:translate(-50%,-50%) scale(1.15,1.15)} .i_products_list .img img{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} /* 左右箭头 */ .i_products_list .pro-button-prev, .i_products_list .pro-button-next{position:absolute; top:46%; transform:translate(0,-50%); width:50px; height:50px; background:rgba(0,0,0,.5); z-index:999; cursor:pointer; outline:none} .i_products_list .pro-button-prev:before, .i_products_list .pro-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; color:#FFF; font-family:-apple-system, 宋体, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .i_products_list .pro-button-prev{left:0} .i_products_list .pro-button-prev:before{content:"<"} .i_products_list .pro-button-next{right:0} .i_products_list .pro-button-next:before{content:">"} .i_products_list .pro-button-prev:hover, .i_products_list .pro-button-next:hover{background:var(--i_color)} .i_products_list .pro-button-prev:hover:before, .i_products_list .pro-button-next:hover:before{color:#FFF} .i_products_list .swiper-button-disabled{cursor:not-allowed; background:#E2E2E2!important} .i_products_list .swiper-button-disabled:before{color:#FFF!important} /* 指示器 */ .pro-pagination{display:none; text-align:center; margin:20px auto 34px} .pro-pagination .swiper-pagination-bullet{width:14px; height:14px; display:inline-block; margin:0 5px; background:#E5E5E5; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .pro-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} @media screen and (max-width:1440px){ .i_products_nav li a{line-height:52px} .i_products_list .txt p{font-size:19px} } @media screen and (max-width:1366px){ .i_products_nav ul{} .i_products_nav li a{line-height:50px} .i_products_list .txt p{font-size:18px} } @media screen and (max-width:1200px){ .i_products_nav ul{} .i_products_nav li a{font-size:18px; line-height:44px} .i_products_list .txt p{font-size:16px} .i_products a.i_more{bottom:0} } @media screen and (max-width:959px){ .i_products_nav, .i_products_show{float:none!important; width:100%!important} .i_products_nav{margin-bottom:16px} .i_products_nav ul{overflow:hidden} .i_products_nav li{float:left; width:49%; margin:0 2% 16px 0; box-sizing:border-box; border:1px solid var(--border_color)} .i_products_nav li:nth-child(2n){margin-right:0} .i_products_nav li a{padding:0 10px; font-size:16px; text-align:center} .i_products_nav .current{background:var(--i_color)} .i_products_nav .current a{color:#FFF!important} .i_products_nav .current:after{display:none} .i_products_show .sublist{padding:0} .i_products_list .pro-button-prev, .i_products_list .pro-button-next{display:none!important} .pro-pagination{display:block!important} .i_products a.i_more{position:relative; margin:0 auto} } @media screen and (max-width:767px){ .i_products_nav li{margin-bottom:12px} .i_products_nav li a{font-size:15px} .i_products_list .txt{margin-top:12px} .i_products_list .txt p{font-size:15px; line-height:22px} .pro-pagination{margin-bottom:26px} .pro-pagination .swiper-pagination-bullet{width:12px; height:12px; margin:0 4px} } @media screen and (max-width:560px){ .i_products_nav{margin-bottom:8px} .i_products_nav li{width:48.5%; margin:0 3% 10px 0} .i_products_nav li a{font-size:13px; line-height:40px; font-weight:normal} .i_products_list .txt{margin-top:8px} .i_products_list .txt p{font-size:13px; line-height:18px} .pro-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* 应用 */ .i_application{--p_height:24px} .i_app_list{overflow:hidden; display:flex; display:-webkit-flex; justify-content:space-between; flex-wrap:wrap} .i_app_list li{width:23%; overflow:hidden; position:relative} .i_app_list li:after{content:""; position:absolute; left:0; bottom:0; width:0; height:6px; background:var(--i_color2)} .i_app_list li a{display:block; overflow:hidden} .i_app_list .img{width:100%; position:relative; overflow:hidden} .i_app_list .img:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3)} .i_app_list .img:before{content:""; display:block; padding-bottom:180%} .i_app_list .img img{position:absolute; bottom:-10%; left:0; width:100%; height:110%; object-fit:cover} .i_app_list .txt{position:absolute; right:0; bottom:calc(-1 * (34px + var(--p_height) * 6)); width:100%; box-sizing:border-box; padding:20px 20px 30px} .i_app_list .txt h2{margin-bottom:50px; text-align:center; font-size:21px; color:#FFF; line-height:24px} .i_app_list .txt h2:after{content:""; position:absolute; left:50%; transform:translate(-50%,0); bottom:-20px; width:60px; height:4px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#FFF} .i_app_list .txt p{font-size:16px; color:#FFF; height:calc(var(--p_height) * 6); line-height:var(--p_height); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6} .i_app_list .txt h2, .i_app_list .txt p{position:relative; z-index:2} .i_application a.i_more{margin:60px auto 0} @media screen and (min-width:960px){ .i_app_list li:hover:after{-webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease} .i_app_list li:hover .img:after{background:rgba(0,0,0,0)} .i_app_list li:hover .img img{bottom:0} .i_app_list li:hover .txt{bottom:0; background:var(--i_color)} .i_app_list li, .i_app_list .img:after, .i_app_list .img img, .i_app_list .txt{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} .i_app_list li:after{} /* .i_nav{position: relative; display: flex;display: -webkit-flex;align-items: center;} .i_nav>li{ display: flex;display: -webkit-flex; justify-content: center;align-items: center; margin-right: 6%; height: var(--header_height); text-overflow:ellipsis; white-space:nowrap; position: relative; } .i_nav>li>a{ width: 100%; font-size:16px; color:#000; border-bottom: 1px solid transparent; position: relative; } .more_ul>a::after{ content: ''; width: 16px;height: 16px; background: url(static/images/arrow_down_hollow_hei.svg) no-repeat center;background-size: contain; position: absolute; top: 50%;transform: translateY(-50%); right: -18px; } .i_nav>li:hover>a{border-bottom: 1px solid #000;} .i_nav>li>ul{ } .i_nav>li>ul>li{position: relative; text-align: center;padding: 10px 0;border-bottom: 1px solid #eee;} .i_nav>li>ul>li a{display: block;width: 100%;} .i_nav>li>ul li:hover{background-color: rgba(0,0,0,.1);} .i_nav>li>ul li:hover a{color: var(--font_color);} .i_nav>li>ul>li>ul>li:hover{background-color: rgba(0,0,0,.1);} .i_nav>li>ul>li>ul>li:hover a{color: var(--font_color);} .i_nav>li>ul{ box-sizing: border-box; position: absolute; left: 0; z-index: 2; top: var(--header_height); display: none; } .i_nav>li>ul>li>ul{ position: absolute; top: 0px; left: 100%; box-sizing: border-box; width: 260px; z-index: 3; transition: 0.3s; display: none; background-color: #fff; box-shadow: 0px 0px 6px 0px rgba(0,0,0,.3); } .i_nav>li>ul>li>ul>li{ text-align: center;padding: 10px 0;border-bottom: 1px solid #eee;position: relative; } .i_nav>li>ul>li>ul>li>ul{ position: absolute; top: 0px; left: 100%; box-sizing: border-box; width: 260px; z-index: 3; transition: 0.3s; display: none; background-color: #fff; box-shadow: 0px 0px 6px 0px rgba(0,0,0,.3); } .i_nav>li>ul>li>ul>li>ul>li{ text-align: center;padding: 10px 0;border-bottom: 1px solid #eee;position: relative; } .i_nav>li:hover>ul{display: block;} .i_nav>li>ul>li:hover>ul{display: block;} .i_nav>li>ul>li>ul>li:hover>ul{display: block;} */ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .i_application{--p_height:22px} .i_app_list .txt h2{font-size:19px} .i_app_list .txt p{font-size:15px} } @media screen and (max-width:1200px){ .i_application{--p_height:20px} .i_app_list .txt h2{font-size:18px} .i_app_list .txt p{font-size:14px} .i_application a.i_more{margin:46px auto 0} } @media screen and (max-width:959px){ .i_app_list li{width:48.5%; margin-bottom:30px} .i_app_list li:after{width:100%; height:4px} .i_app_list .img img{bottom:0; height:100%} .i_app_list .img:before{padding-bottom:140%} .i_app_list .img:after{display:none} .i_app_list .txt{bottom:0; padding:30px 16px 30px; background:rgba(0,113,188,.6)} .i_app_list .txt h2{margin-bottom:26px; font-size:17px; line-height:22px} .i_app_list .txt h2:after{bottom:-8px; width:40px; height:2px} .i_app_list .txt p{font-size:13px} .i_application a.i_more{margin:36px auto 0} } @media screen and (max-width:767px){ .i_app_list{display:block} .i_app_list li{float:left; width:48.5%; margin:0 3% 22px 0; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px} .i_app_list li:nth-child(2n){margin-right:0} .i_app_list .txt h2{font-size:16px} .i_app_list .txt p{height:calc(var(--p_height) * 5); -webkit-line-clamp:5} .i_application a.i_more{margin:16px auto 0} } @media screen and (max-width:560px){ .i_app_list .txt h2{font-size:14px} .i_app_list .txt p{font-size:12px} .i_app_list .img:before{padding-bottom:150%} .i_app_list .txt{padding:14px 12px} .i_app_list .txt p{height:calc(var(--p_height) * 4); -webkit-line-clamp:4} .i_application a.i_more{margin:10px auto 0} } @media screen and (max-width:350px){ .i_app_list li{float:none; width:100%; margin:0 0 16px 0} .i_app_list .txt p{height:calc(var(--p_height) * 8); -webkit-line-clamp:8} } /* 关于 */ .i_about{--l_width:35%} .i_about{background:#F7F7F7; overflow:hidden} .i_about_l{width:var(--l_width)} .i_about_l h2{font-size:50px; color:#1c1c1c; font-weight:bold; line-height:74px} .i_about_l i{display:block} .i_about_l h4{margin:20px 0 20px; font-size:24px; color:#1c1c1c; font-weight:bold} .i_about_l p{font-size:18px; color:#1c1c1c; line-height:26px} .i_about_l a.i_more{margin:30px 0 20px} .i_about_r{width:calc(100% - var(--l_width) - 90px); padding-top:60px; position:relative} .i_about_r:before{content:"ABOUT US"; position:absolute; top:0; right:-50px; font-size:110px; color:rgba(0,0,0,.03)} .i_about_img{width:100%; position:relative; overflow:hidden} .i_about_img:before{content:""; display:block} .i_about_l .i_about_img:before{padding-bottom:66.5%} .i_about_r .i_about_img:before{padding-bottom:75.6%} .i_about_img:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.2)} .i_about_img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .i_about_img:hover:after{background:rgba(0,0,0,0)} .i_about_img:after{-webkit-transition:all .7s ease; -moz-transition:all .7s ease; -ms-transition:all .7s ease; -o-transition:all .7s ease; transition:all .7s ease} .i_about_r dl{margin-top:40px; overflow:hidden; display:flex; display:-webkit-flex; justify-content:space-between; flex-wrap:wrap} .i_about_r dt{width:23%; text-align:center} .i_about_r dt .roll_num{font-size:40px; color:var(--i_color); font-weight:bold} .i_about_r dt p{font-size:20px; color:#1c1c1c} @media screen and (max-width:1440px){ .i_about_l h2{font-size:54px; line-height:64px} .i_about_l h4{font-size:20px; margin:30px 0 20px} .i_about_l p{font-size:16px} .i_about_l a.i_more{margin:24px 0 60px} .i_about_r dt .roll_num{font-size:50px} .i_about_r dt p{font-size:20px} } @media screen and (max-width:1366px){ .i_about_l h2{font-size:44px; line-height:50px} .i_about_l h4{margin:20px 0} .i_about_r:before{font-size:100px} .i_about_r dt .roll_num{font-size:46px} .i_about_r dt p{font-size:18px} } @media screen and (max-width:1200px){ .i_about_l h2{font-size:36px; line-height:40px} .i_about_l i{display:inline-block; margin:0 8px} .i_about_l h4{font-size:18px} .i_about_l p{font-size:15px; line-height:24px} .i_about_r{padding-top:50px} .i_about_r:before{right:-30px; font-size:80px} } @media screen and (max-width:959px){ .i_about_l, .i_about_r{float:none!important; width:100%} .i_about_l h2{font-size:28px} .banner_text{display: none;} .i_about_l h4{margin:12px 0} .i_about_l a.i_more{margin:24px 0 40px} .i_about_l .i_about_img{display:none!important} .i_about_r{padding-top:0} .i_about_r:before{top:-46px; right:-20px; font-size:70px} .i_about_r .i_about_img:before, .i_about_r .i_about_img:after{display:none!important} .i_about_r .i_about_img img{position:initial; width:100%; height:auto; transform:none} .i_about_r dl{margin-top:30px} } @media screen and (max-width:767px){ .i_about_r dt .roll_num{font-size:42px} .i_about_r dt p{font-size:17px} } @media screen and (max-width:560px){ .i_about_l h2{font-size:22px} .i_about_l h4{margin:0 0 8px} .i_about_l p{font-size:14px; color:#555} .i_about_l a.i_more{margin:18px 0 30px} .i_about_r:before{display:none} .i_about_r dl{margin-top:22px} .i_about_r dt .roll_num{font-size:32px} .i_about_r dt p{font-size:12px; color:#666} } /* 工厂参观 */ .i_factory{margin-top:56px; position:relative} .i_factory .tit{margin-bottom:24px; padding-left:20px; position:relative} .i_factory .tit:before{content:""; position:absolute; top:50%; transform:translate(0,-50%); left:0; width:6px; height:100%; background:var(--i_color)} .i_factory .tit h2{font-size:26px; color:#1c1c1c; font-weight:bold; line-height:34px} .i_factory_list{padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .i_factory_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .i_factory_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .i_factory_list .img{width:100%; position:relative; overflow:hidden} .i_factory_list .img:before{content:""; display:block; padding-bottom:75%} .i_factory_list .img img{position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} /* 指示器 */ .factory-pagination{display:none; text-align:center; margin:20px auto 0} .factory-pagination .swiper-pagination-bullet{width:14px; height:14px; display:inline-block; margin:0 5px; background:#E5E5E5; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .factory-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .i_factory .factory-button-prev, .i_factory .factory-button-next{position:absolute; top:0; right:0; width:16px; height:30px; z-index:999; cursor:pointer; outline:none} .i_factory .factory-button-prev:before, .i_factory .factory-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#333; font-family:-apple-system, simsun, 宋体, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .i_factory .factory-button-prev{right:30px} .i_factory .factory-button-prev:before{content:"<"} .i_factory .factory-button-next{right:0} .i_factory .factory-button-next:before{content:">"} .i_factory .factory-button-prev:hover:before, .i_factory .factory-button-next:hover:before{color:var(--i_color)} .i_factory .swiper-button-disabled{cursor:not-allowed; color:#E2E2E2!important} .i_factory .swiper-button-disabled:before{color:#CCC!important} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .i_factory{margin-top:40px} .i_factory .tit h2{font-size:24px} } @media screen and (max-width:959px){ .i_factory .tit h2{font-size:20px} .i_factory .tit{margin-bottom:20px} .factory-pagination{display:block!important} } @media screen and (max-width:767px){ .factory-pagination .swiper-pagination-bullet{width:12px; height:12px; margin:0 4px} } @media screen and (max-width:560px){ .factory-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* 内页框架 */ .in_box{--box_l_width:28%} .in_box_l{width:var(--box_l_width); box-sizing:border-box; padding:30px; background:#F6F6F6; overflow:hidden} .in_box_r{width:calc(100% - var(--box_l_width) - 50px); overflow:hidden} @media screen and (max-width:1440px){ .in_box_l{padding:24px} } @media screen and (max-width:1366px){ .in_box{--box_l_width:27%} .in_box_l{padding:20px} } @media screen and (max-width:1200px){ .in_box{--box_l_width:26%} .in_box_l{padding:16px} .in_box_r{width:calc(100% - var(--box_l_width) - 40px)} } @media screen and (max-width:1080px){ .in_box{--box_l_width:28%} } @media screen and (max-width:959px){ .in_box_l, .in_box_r{float:none!important; width:100%} .in_box_l{margin-bottom:30px; padding:0!important} } @media screen and (max-width:768px){ .in_box_l{margin-bottom:24px} } @media screen and (max-width:560px){ .in_box_l{margin-bottom:20px} } /* 内页左侧 二级栏目导航 */ .in_nav_list{background:#FFF; position:relative; overflow:hidden} .in_nav_bg{width:100%; background:#FFF; position:relative; overflow:hidden} .in_nav_bg:before{content:""; display:block; padding-bottom:66%} .in_nav_bg:after{content:""; position:absolute; right:0; bottom:0; width:76%; height:82%; background:url(static/images/logo_10t.png) no-repeat; background-size:contain} .in_nav_list .in_nav_tit{background:var(--i_color); position:relative; padding:0 20px} .in_nav_list .in_nav_tit h2{font-size:20px; color:#FFF; font-weight:bold; line-height:56px; text-transform:uppercase; letter-spacing:1px} .in_nav_list .submenu{ box-sizing: border-box; padding: 20px; overflow:hidden} .in_nav_list .submenu>li { margin: 0 0 30px 0; box-sizing: border-box; position: relative } .in_nav_list .submenu>li>a { display: block; margin-bottom: 4px; width: 100%; position: relative; z-index: 2 } .in_nav_list .submenu>li>a b { display: block; font-size: 16px; color: #333; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .in_nav_list .submenu>.current-menu-item>a b, .in_nav_list .submenu>.current-category-parent>a b, .in_nav_list .submenu .current-menu-item>a { color: var(--i_color) } .in_nav_list .submenu li ul {} .in_nav_list .submenu li li { margin: 16px 0; position: relative; z-index: 2 } .in_nav_list .submenu li li::before { content: ''; position: absolute; top: 50%; transform: translate(0, -50%); width: 10px; height: 2px; background: #888; } .in_nav_list .submenu li li a { display: block; padding-left: 20px; font-size: 16px; color: #363636; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .in_nav_list .submenu li li.curr a { color: var(--i_color); } .in_nav_list .submenu li li.curr::before { background: var(--i_color); } .in_nav_list .submenu>li a:hover b{color: var(--i_color);} .in_nav_list .sub-menu li:hover a{color: var(--i_color);} @media screen and (max-width:1440px){ .in_nav_list .in_nav_tit h2{font-size:19px;line-height: 50px;letter-spacing: 0;} } @media screen and (max-width:959px){ .in_nav_list{background:#F7F7F7} .in_nav_list .in_nav_tit h2{font-size:17px} .in_nav_tit:after{content:""; position:absolute; top:50%; transform:translate(0,-50%); right:20px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #FFF} .open .in_nav_tit:after{border-top:none!important; border-bottom:8px solid #FFF!important} .in_nav_list .submenu, .in_nav_bg{display:none} } @media screen and (max-width:560px){ .in_nav_list .in_nav_tit h2{font-size: 16px;line-height: 42px;} } /* footer */ footer{background: rgb(0 0 0); background-size:cover} .f_form_box{padding-top:60px} .f_form_box .i_tit h2{color:#FFF} /* 表单 */ .footer_form{--input_font_size:16px; --input_height:54px} .footer_form{margin:0 auto} #wpforms-71{width:100%; margin:0 auto; padding:0} #wpforms-form-71{width:100%; overflow:hidden; display:flex; display:-webkit-flex; flex-wrap:nowrap} /* 表单初始化 */ #wpforms-71 input, #wpforms-71 button{margin:0; padding:0; border:none; background:none} #wpforms-71 .wpforms-field{padding:0; margin:0} /* 输入框和按钮框架 */ #wpforms-71 .wpforms-field-container{float:left; padding-bottom:20px; width:100%; overflow:hidden; display:flex; display:-webkit-flex; justify-content:space-between; flex-wrap:nowrap} #wpforms-71 .wpforms-submit-container{float:right; padding:0!important; margin-left:1.5%; width:170px; height:var(--input_height); background:#999; position:relative} #wpforms-71 .wpforms-submit-container:hover{background:#e4aa02} /* 输入框 */ #wpforms-71 .wpforms-field-label{display:none!important} #wpforms-71 .wpforms-field{width:100%; background:transparent; overflow:hidden} #wpforms-71 .wpforms-field:not(:last-child){margin-right:1.5%} #wpforms-71 input, #wpforms-71 textarea{width:100%; max-width:100%!important; font-size:var(--input_font_size); color:#FFF; height:var(--input_height); line-height:var(--input_height); box-sizing:border-box; border:1px solid rgba(255,255,255,.6); padding:0 10px} #wpforms-71 input::-webkit-input-placeholder{color:rgba(255,255,255,.6); font-size:var(--input_font_size)} #wpforms-71 input::-moz-placeholder{color:rgba(255,255,255,.6); font-size:var(--input_font_size)} #wpforms-71 input::-moz-placeholder{color:rgba(255,255,255,.6); font-size:var(--input_font_size)} #wpforms-71 input::-ms-input-placeholder{color:rgba(255,255,255,.6); font-size:var(--input_font_size)} /* 提示错误 */ #wpforms-71 #wpforms-71-field_8-error, #wpforms-71 #wpforms-71-field_9-error, #wpforms-71 #wpforms-71-field_7-error{position:absolute; font-size:14px} /* 按钮 */ #wpforms-71 .wpforms-submit-container button{width:100%; height:var(--input_height); font-size:16px; color:#FFF; line-height:var(--input_height); cursor:pointer; text-transform:uppercase; position:relative; z-index:2} #wpforms-71 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} .f_cont{margin-top:50px; display:-webkit-flex; display:flex; flex-wrap:nowrap; justify-content:space-between} .f_cont dd{margin:0 70px} .f_cont dd:last-child{margin-right:0} .f_cont dt{max-width:25%} .f_logo{text-align:center; margin:0 auto; -webkit-filter:brightness(100); -moz-filter:brightness(100); -o-filter:brightness(100); -ms-filter:brightness(100); filter:brightness(100)} .f_logo img{-webkit-filter:invert(1); -moz-filter:invert(1); -o-filter:invert(1); -ms-filter:invert(1); filter:invert(1)} .f_cont dt h6{margin:20px 0 14px; font-size:16px; color:#FFF; line-height:24px} .f_cont dt span{margin:20px 0 14px; font-size:16px; color:#FFF; line-height:24px} .f_icolink{padding-top:10px; overflow:hidden} .f_icolink img{height:34px} .f_icolink a{display:block; float:left} .f_icolink a:not(:last-child){margin-right:24px} .f_icolink a:hover{-webkit-transform:translate(0,-8px); -moz-transform:translate(0,-8px); -o-transform:translate(0,-8px); -ms-transform:translate(0,-8px); transform:translate(0,-8px)} .f_icolink a{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} .f_cont dd{} .f_cont dd h2{margin:20px 0; font-size:24px; color:#FFF; font-weight:bold; line-height:50px; text-transform:uppercase; position:relative; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .f_cont dd h2:after{content:""; position:absolute; left:0; bottom:0; width:146px; height:1px; background:#FFF} .f_cont li a{display:block; font-size:15px; color:#FFF; line-height:34px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-transform:uppercase!important} .f_cont dd p{margin-bottom:16px; overflow:hidden; display:-webkit-flex; display:flex; flex-wrap:nowrap} .f_cont dd i{display:block; margin-right:10px; width:22px; height:22px} .f_cont dd i img{height:100%} .f_cont dd span, .f_cont dd span a{display:block; font-size:15px; color:#FFF; line-height:24px} .f_cont a:hover{color:var(--i_color2)} /* 版权 */ .f_copy{padding:14px 0; background:rgba(0,0,0,.2); margin-top:60px} .f_copy h6, .f_copy a{text-align:center; font-size:16px; color:#FFF; line-height:22px} .f_copy a:hover{color:var(--i_color2)} @media screen and (max-width:1440px){ .f_cont{margin-top:44px} .f_cont dd{margin:0 60px} } @media screen and (max-width:1366px){ .footer_form{--input_height:48px} .f_cont{margin-top:40px} .f_cont dd{margin:0 50px} .f_cont dt h6{font-size:15px} .f_cont dd h2{font-size:22px} .f_copy h6, .f_copy a{font-size:15px} } @media screen and (max-width:1200px){ .footer_form{--input_height:44px} .f_form_box{padding-top:50px} .f_cont{margin-top:24px} .f_cont dd{margin:0 40px} .f_cont dt h6{font-size:14px} .f_cont dd h2{font-size:20px} .f_cont li a, .f_cont dd span{font-size:14px} .f_copy h6, .f_copy a{font-size:14px} .f_copy{margin-top:40px} } @media screen and (max-width:959px){ .f_cont{margin-top:0; flex-wrap:wrap} .f_cont dt{max-width:100%; width:100%; margin-bottom:20px} .f_logo, .f_cont dt h6{display:none} .f_cont dd{margin:0 0; width:100%} .f_cont dd h2{line-height:38px; margin:0 0 14px} .f_cont li a{float:left; margin-right:16px} .f_cont dd p{margin-bottom:8px} } @media screen and (max-width:767px){ .f_form_box{padding-top:40px} #wpforms-form-71, #wpforms-71 .wpforms-field-container{display:block} #wpforms-71 .wpforms-field-container, #wpforms-71 .wpforms-submit-container{float:none!important} #wpforms-71 .wpforms-field-container{padding-bottom:0} #wpforms-71 .wpforms-submit-container{margin-left:0} #wpforms-71 .wpforms-field{width:100%!important; margin:0 0 10px 0!important} .f_copy{margin-top:20px} .f_cont{margin-top:10px} .f_cont dt h6{margin:10px 0 14px} .f_cont dd h2{font-size:18px} .f_cont li a, .f_cont dd span{font-size:13px} .f_cont dd:nth-child(2), .f_cont dd:nth-child(3){display:none!important} } @media screen and (max-width:560px){ .f_copy{padding:10px 0} .f_copy h6, .f_copy a{font-size:12px} } /* 侧边 */ .aside_cont{position:fixed; bottom:55%; transform:translate(0,145%); right: 20px; z-index:2013} .aside_cont a{display:block; width:50px; height:50px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; position:relative; overflow:hidden} .aside_cont a:nth-child(1){margin: 12px 0;} .aside_cont a:nth-child(2){background:#64e66a} .aside_cont a:nth-child(3){margin:12px 0; background:#54abe5} .aside_cont a:nth-child(4){background:#f5465c} .aside_cont a i{display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60%; height:60%} .aside_cont a:nth-child(1) i{width: 130px; height: 51px; background: url(https://qcgac.com/wp-content/uploads/2023/12/facebook-1.png) no-repeat center; background-size: contain;} .aside_cont a:nth-child(2) i{background:url(static/images/whatsapp.svg) no-repeat center; background-size:contain} .aside_cont a:nth-child(3) i{background:url(static/images/aside_tel.svg) no-repeat center; background-size:contain} .aside_cont a:nth-child(4) i{background:url(static/images/email.svg) no-repeat center; background-size:contain} @media screen and (max-width:1200px){ .aside_cont a{width:40px; height:40px} } @media screen and (max-width:560px){ .aside_cont{bottom:46%; right:10px} .aside_cont a:nth-child(1){margin-bottom:14px} .aside_cont a{width:38px; height:34px} } /* 隐私政策 */ .privacy_cont{} .privacy_cont .tit{margin-bottom:30px} .privacy_cont .tit h2{font-size:24px; text-align:center; font-weight:bold} .privacy_cont article, .privacy_cont article *{font-size:14px; color:#666; line-height:24px} /* -------------------------------------- 内页 -------------------------------------- */ /* 内页头部 */ .in_page_header{background:#FFF!important} .full_header_height{display:block; width:100%; height:var(--header_height)} /* 当前位置 */ .in_position{padding:14px 0; background:#F6F6F6} .in_position a{display:block; float:left; font-size:14px; color:#666; position:relative; line-height:20px; text-transform:uppercase} .in_position a:first-child{padding-left:24px; background:url(static/images/home_b.svg) no-repeat left center; background-size:16px} .in_position a:not(:last-child):after{content:">"; margin:0 4px; color:#777} .in_position a:last-child{color:var(--i_color)!important} .in_position a:hover{color:var(--i_color)} @media screen and (max-width:959px){ .in_position a{font-size:15px} } @media screen and (max-width:767px){ .in_position a{font-size:14px} } @media screen and (max-width:560px){ .in_position a{font-size:12px} } /* 内页banner */ .in_banner{width:100%; position:relative; margin-bottom:-2px; overflow:hidden} .in_banner img{width:100%; opacity: 0.4; height: 330px;width:100vw; object-fit:cover} @media screen and (max-width:959px){ .in_banner:before{content:""; display:block; padding-bottom:32%} .in_banner img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} } @media screen and (max-width:767px){ .in_banner:before{padding-bottom:34%} } @media screen and (max-width:560px){ .in_banner:before{padding-bottom:36%} } /* 内页框架 */ .in_box{--box_l_width:28%} .in_box_l{width:var(--box_l_width); box-sizing:border-box; padding:30px; background:#F6F6F6; overflow:hidden} .in_box_r{width:calc(100% - var(--box_l_width) - 50px); overflow:hidden} @media screen and (max-width:1440px){ .in_box_l{padding:24px} } @media screen and (max-width:1366px){ .in_box{--box_l_width:27%} .in_box_l{padding:20px} } @media screen and (max-width:1200px){ .in_box{--box_l_width:26%} .in_box_l{padding:16px} .in_box_r{width:calc(100% - var(--box_l_width) - 40px)} } @media screen and (max-width:1080px){ .in_box{--box_l_width:28%} } @media screen and (max-width:959px){ .in_box_l, .in_box_r{float:none!important; width:100%} .in_box_l{margin-bottom:30px; padding:0!important} } @media screen and (max-width:767px){ .in_box_l{margin-bottom:24px} } @media screen and (max-width:560px){ .in_box_l{margin-bottom:20px} } /* 首页新闻 */ .i_news_box{margin-bottom: 90px;} .i_news_list{ margin-top: 80px; width: 100%; display: grid; grid-template-columns: 50% 50%; grid-template-rows:33% 33% 33% 33% ; gap: 10px; position: relative; } .i_news_list::after, .i_news_list::before{ content: ''; width:49.5%;height: 120%;background: none; border-radius: 10px; box-shadow: 0px 0px 10px 4px #eee; position: absolute;top: -10%; z-index: -1; } .i_news_list::after{left: 0;} .i_news_list::before{right: 0;} .i_news_list li{ border-bottom: 1px solid var(--border-color); width:88%;margin: 0 auto; position: relative; } .i_news_list li:nth-child(1) { grid-column: 1; grid-row: 1 / 4; } .i_news_list li:nth-child(2) { grid-column: 2; grid-row: 1; } .i_news_list li:nth-child(3) { grid-column: 2; grid-row: 2; } .i_news_list li:nth-child(4) { grid-column: 2; grid-row: 3; } .i_news_list li a{ display: flex;display: -webkit-flex; justify-content: space-between;align-items: center; flex-wrap: wrap; } .i_news_list .left_img{width: 45%;position: relative; overflow: hidden;} .i_news_list .left_img::before{content: ''; display: block; padding-bottom: 100%;} .i_news_list .left_img img{width: 100%; height: 89%; object-fit: cover; position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);} .i_news_list li section{width: 100%;} .i_news_list li:first-child section{width: 50%;} .i_news_list h6{ color: rgba(var(--font-opacity) .9); font-size: 20px;font-weight: bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .i_news_list li:first-child h6{font-size: 22px;} .i_news_list .data{ margin-top: 10px; font-size: 16px; color: var(--i_color); } .i_news_list .txt{ margin-top: 24px; font-size: 16px; color: rgba(var(--font-opacity) .8); line-height: 150%; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; } .i_news_list i{ display: flex;justify-content: center;align-items: center; margin-top: 20px; width: 36px;height: 36px;border-radius: 50%; background-color: var(--i_color); font-size: 30px; color: #fff; border: 1px solid transparent; -webkit-transition:all .5s ease; transition:all .5s ease; } .i_news_list li img{-webkit-transition:all .5s ease; transition:all .5s ease;} .i_news_list li:hover .left_img img{width: 105%;height: 105%;} .i_news_list li:hover h6{color: var(--i_color);} .i_news_list li:hover i{background-color: #fff;color: var(--i_color);border: 1px solid var(--i_color);} @media screen and (min-width:959px){ .i_news_list li:not(:first-of-type) .left_img, .i_news_list li:not(:first-of-type) i{display: none;} .i_news_list li:not(:first-of-type) .txt{ margin-top: 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .i_news_list li:not(:first-of-type) .data{ margin: 0; position: absolute;top: 0;left: 0; font-size: 16px; color: rgba(var(--font-opacity) .7); display: flex;flex-direction: column-reverse } .i_news_list li:not(:first-of-type) .data span{font-size: 40px;} .i_news_list li:not(:first-of-type) section{padding-left: 14%;margin-top: 10px;} .i_news_list li:not(:first-of-type):hover h6, .i_news_list li:not(:first-of-type):hover .data span{color: var(--i_color);} .i_news_list li:first-child, .i_news_list li:last-child{border: none;} } @media screen and (max-width:959px){ .i_news_list li section{width: 50%;} .i_news_list{display: block;} .i_news_list li{ width: 100% !important; box-shadow: 0px 0px 10px 4px #eee; padding: 5%; margin: 30px auto; border: none; } .i_news_list::after, .i_news_list::before{display: none;} } @media screen and (max-width:560px){ .i_news_list li section{width: 50%;} .i_news_list li .left_img{margin-bottom: 20px;} } .i_par_swiper{position: relative;overflow: hidden;margin-top: var(--box-space);} .i_par_swiper_list{position: relative;} .i_par_swiper .b-button-next, .i_par_swiper .b-button-prev { display: none; position: absolute; top: 50%; transform: translate(0, -50%); width: 34px; height: 60px; z-index: 999; outline: none; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .i_par_swiper .b-button-prev { left:0px; background: rgb(255 255 255 / 30%) url(static/images/public/arrow_left_hollow_bai3.svg) no-repeat center; background-size: 22px } .i_par_swiper .b-button-next { right: 0px; background: rgb(255 255 255 / 30%) url(static/images/public/arrow_right_hollow_bai3.svg) no-repeat center; background-size: 22px } .i_par_swiper .b-button-next:hover, .i_par_swiper .b-button-prev:hover { background-color: var(--i_color) } /* 内页左侧 二级栏目导航 */ /* .in_nav_list{background:#FFF; position:relative; overflow:hidden} .in_nav_bg{width:100%; background:#FFF; position:relative; overflow:hidden} .in_nav_bg:before{content:""; display:block; padding-bottom:66%} .in_nav_bg:after{content:""; position:absolute; right:0; bottom:0; width:76%; height:82%; background:url(static/images/logo_10t.png) no-repeat; background-size:contain} .in_nav_list .in_nav_tit{background: rgb(66 51 84); position:relative; padding:16px 20px} .in_nav_list .in_nav_tit h2{font-size:22px; color:#FFF; font-weight:bold; line-height:26px; text-transform:uppercase; letter-spacing:1px} .in_nav_list ul{overflow:hidden} .in_nav_list li{border-bottom:1px solid var(--border_color); position:relative} .in_nav_list li:after{content:""; opacity:.4; position:absolute; top:50%; transform:translate(0,-50%); right:20px; width:20px; height:20px; background:url(static/images/d_arrow_right.svg) no-repeat center; background-size:16px} .in_nav_list li:hover:before, .in_nav_list .current-menu-item:before{content:""; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--i_color2)} .in_nav_list li:hover:after, .in_nav_list .current-menu-item:after{content:""; opacity:1!important; background:url(static/images/d_arrow_right2.svg) no-repeat center; background-size:16px} .in_nav_list li a{display:block; padding:14px 40px 14px 20px; font-size:16px; color:#555; line-height:22px} .in_nav_list li:hover a, .in_nav_list .current-menu-item a{color:var(--i_color)!important} .in_nav_list li:hover a{padding-left:26px} .in_nav_list li a{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} */ @media screen and (max-width:1600px){ .in_nav_list .in_nav_tit h2{font-size:20px} } @media screen and (max-width:1440px){ .in_nav_list .in_nav_tit h2{font-size:19px} } @media screen and (max-width:1366px){ .in_nav_list .in_nav_tit h2{font-size:18px} .in_nav_list li a{font-size:15px} } @media screen and (max-width:1200px){ .in_nav_list .in_nav_tit h2{font-size:18px} .in_nav_list li a{font-size:14px} } @media screen and (max-width:959px){ .in_nav_list{background:#F7F7F7} .in_nav_list .in_nav_tit h2{font-size:17px} .in_nav_tit:after{content:""; position:absolute; top:50%; transform:translate(0,-50%); right:20px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #FFF} .open .in_nav_tit:after{border-top:none!important; border-bottom:8px solid #FFF!important} .in_nav_list ul, .in_nav_bg{display:none} } @media screen and (max-width:767px){ .in_nav_list .in_nav_tit{padding:14px 20px} .in_nav_list li a{padding:12px 40px 12px 20px} } @media screen and (max-width:560px){ .in_nav_list .in_nav_tit{padding:10px 20px} .in_nav_list .in_nav_tit h2{font-size:16px} .in_nav_list li a{padding:10px 40px 10px 20px} } /* 内页 产品列表 */ .in_products_list{padding:10px; overflow:hidden} .in_products_list li{float:left; box-sizing:border-box; border:1px solid var(--border_color); border-bottom:3px solid var(--i_color2)!important; width:31.33%; margin:0 3% 50px 0} @media screen and (min-width:561px){ .in_products_list li:nth-child(3n){margin-right:0} } .in_products_list a{display:block; overflow:hidden} .in_products_list .img{width:100%; background:#FFF; position:relative; overflow:hidden} .in_products_list .img:before{content:""; display:block; padding-bottom:100%} .in_products_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; height:90%; object-fit:cover} .in_products_list .txt{padding:26px 12px; background:#fafafa} .in_products_list .txt p{text-align:center; font-size:18px; font-weight:bold; color:#464646; line-height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .in_products_list .txt h6{margin-top:16px; font-size:15px; color:#656565; height:44px; line-height:22px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2} .in_products_list li:hover{box-shadow:0 0 10px rgba(0,0,0,.1); border-color:var(--i_color)} .in_products_list li:hover img{width:115%; height:115%} .in_products_list li:hover p{color:var(--i_color)} .in_products_list .img img{-webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .in_products_list li{margin-bottom:40px} .in_products_list .txt p{font-size:17px} .in_products_list .txt h6{font-size:14px} } @media screen and (max-width:1200px){ .in_products_list li{margin-bottom:30px} .in_products_list .txt p{font-size:16px} .in_products_list .txt h6{margin-top:12px; font-size:13px; height:40px; line-height:20px} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .in_products_list .txt{padding:20px 12px} .in_products_list .txt p{font-size:15px} .in_products_list .txt h6{margin-top:10px} } @media screen and (max-width:560px){ .in_products_list li{width:48%; margin:0 4% 24px 0} .in_products_list li:nth-child(2n){margin-right:0} .in_products_list .txt p{font-size:14px} .in_products_list .txt h6{margin-top:8px; font-size:12px; color:#888; height:36px; line-height:18px} } /* 页数 */ .in_page_box{text-align:center; margin-bottom:30px; overflow:hidden} .in_page{display:inline-block} .in_page a{float:left; display:block; margin:0 4px; padding:0 12px; line-height:30px; font-size:14px; color:#666; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; border:1px solid #CCC} .in_page a:hover, .in_page .current{border-color:var(--i_color)!important; background: rgb(66 51 84); color:#FFF!important} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } /* ----------------------- 内页 - 产品详情页 ----------------------- */ .pro_details{--img_size:460px} .pro_details{position:relative; overflow:hidden} /* #pro_img_zoom{position:relative} #pro_img_zoom img{width:var(--img_size); height:380px; object-fit:cover} */ /* 图片查看区 */ .bg_left{width:var(--img_size)} /* 商品大图 */ .show{width:100%; height:var(--img_size); margin-bottom:16px; position:relative; box-sizing:border-box; border:1px solid #E8E8E8; background:#FFF; cursor:move} .show img{width:100%; height:100%; object-fit:contain} .mask{width:215px; height:215px; background:#000; filter:Alpha(opacity=50); opacity:0.5; position:absolute; top:0; left:0; display:none;} /* 小缩略图 */ .smallshow{width:100%; position:relative} .smallshow>.middle_box{width:356px; overflow:hidden; margin:0 auto} .smallshow .middle{overflow:hidden; transition:all 0.5s} .smallshow .middle>li{width:106px; padding:0 6px; float:left; cursor:pointer} .smallshow img{width:100%; height:100px; border:1px solid #e8e8e8; box-sizing:border-box; transition:all 0.5s} /* 小缩略图左右箭头 */ .smallshow>p{ opacity:.4; position:absolute; top:50%; transform:translate(0,-50%); width:30px; height:30px; margin:0!important; padding:0!important; background:rgba(0,0,0,.1); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .smallshow>.prev, .smallshow>.next{color:#797979; transition:all 0.5s; cursor:pointer; outline:none} .smallshow>.prev{left:0; background:url(static/images/d_arrow_left.svg) no-repeat center; background-size:contain} .smallshow>.next{right:0; background:url(static/images/d_arrow_right.svg) no-repeat center; background-size:contain} .smallshow>.prev.prevnone, .smallshow>.next.nextnone{opacity:.1; cursor:not-allowed; outline:none} /* 右侧放大展示 */ .bg_right{position:absolute; left:var(--img_size); background:#FFF; z-index:999} .bigshow{width:var(--img_size); height:var(--img_size); overflow:hidden; margin-left:0; display:none; box-sizing:border-box} .bigshow img{width:100%; margin-right:5px;} /* 右侧标题内容 */ .pro_tit{/* position:absolute; top:0; right:0; */float:right; width:calc(100% - var(--img_size) - 50px)} .pro_tit>h1{font-size:30px; color:#222; line-height:30px} .pro_tit article{margin:26px 0} .pro_tit article, .pro_tit article *{font-size:15px; color:#333; line-height:26px} .pro_det_usage{box-sizing:border-box; padding:30px 20px; color:#f2f9ff; background:#f2f9ff} .pro_det_usage .tit{font-size:18px; color:#333; font-weight:bold} .pro_det_usage p{margin-top:16px; padding-left:20px; font-size:15px; color:#444!important; line-height:20px; position:relative} .pro_det_usage p:before{content:""; position:absolute; top:6px; left:0; width:6px; height:6px; background:#9ca1a4} .pro_det_explain{min-height:24px; margin:32px 0; color:#FFF} .pro_det_explain p{margin:16px 0; padding-left:36px; font-size:16px; color:#444!important; line-height:24px; position:relative} .pro_det_explain p:before{content:""; position:absolute; top:2px; left:0; width:22px; height:22px; background:url(static/images/pro_det_explain_ico.png) no-repeat center;} .pro_det_link{overflow:hidden; display:-webkit-flex; display:flex; flex-wrap:wrap; justify-content:space-between} .pro_det_link li{width:48%} .pro_det_link li a{display:block; padding:0 10px; text-align:center; font-size:14px; color:#FFF; line-height:46px; background: rgb(66 51 84); overflow:hidden; white-space:nowrap; text-overflow:ellipsis} @media screen and (max-width:1800px){ .pro_det_link li a{font-size:15px} } @media screen and (max-width:1600px){ .pro_det_link li a{font-size:14px} } @media screen and (max-width:1440px){ .pro_tit>h1{font-size:26px} .pro_tit article{margin:20px 0} .pro_det_usage{padding:20px 20px} .pro_det_usage p{font-size:13px} .pro_det_explain{margin:22px 0} .pro_det_explain p{font-size:14px; line-height:22px} } @media screen and (max-width:1366px){ .pro_details{--img_size:420px} .pro_tit>h1{font-size:24px} .pro_det_usage .tit{font-size:16px} .pro_det_usage p{font-size:12px} .pro_det_explain p{font-size:13px} } @media screen and (max-width:1300px){ .pro_det_link li{width:100%; margin-bottom:10px} } @media screen and (max-width:1200px){ .pro_tit>h1{font-size:22px} } @media screen and (max-width:1080px){ .pro_details{--img_size:100%} .bg_left, .pro_tit{float:none!important; width:100%} .bg_left{margin-bottom:40px} .mask, .bg_right{display:none!important} .smallshow>.middle_box{width:390px} .smallshow .middle>li{width:70px; padding:0 4px} .smallshow img{height:70px} .pro_det_link li{width:48%; margin-bottom:0} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .smallshow>p{width:24px; height:24px} .smallshow>.middle_box{width:260px} .smallshow .middle>li{width:44px; padding:0 4px} .smallshow img{height:44px} .pro_tit>h1{font-size:19px} .pro_tit article{margin:10px 0 14px} .pro_tit article, .pro_tit article *{font-size:13px; line-height:22px} .pro_det_usage{padding:14px 14px} .pro_det_usage p{margin-top:12px} .pro_det_explain{margin:12px 0} .pro_det_explain p{font-size:12px} } /* 弹出窗口 */ #mask_bg{display:none; position:fixed; top:0%; left:0%; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:9999999999998} #sc_from{display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; padding:30px 30px 40px; background:#FFF; z-index:9999999999999; overflow:auto} #sc_from .tit{margin-bottom:40px} #sc_from .tit h6{font-size:26px; color:#333; font-weight:bold; line-height:30px} #wpforms-75{--input_font_size:16px; --input_height:42px} #wpforms-75{width:100%; margin:0 auto; padding:0} #wpforms-form-75{width:100%; overflow:hidden} /* 表单初始化 */ #wpforms-75 input, #wpforms-75 button{margin:0; padding:0; border:none; background:none} #wpforms-75 .wpforms-field{padding:0; margin:0} #wpforms-75 .wpforms-error-container{line-height:16px} /* 输入框和按钮框架 */ #wpforms-75 .wpforms-field-container{width:100%; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} #wpforms-75 .wpforms-submit-container{padding:0!important; width:170px; height:var(--input_height); background: rgb(66 51 84); position:relative} /* 输入框 */ #wpforms-75 .wpforms-field{width:100%; margin-bottom:10px; padding-bottom:20px; background:transparent; overflow:hidden} #wpforms-75 .wpforms-field:nth-child(1){margin-right:20px} #wpforms-75 .wpforms-field:nth-child(1), #wpforms-75 .wpforms-field:nth-child(2){width:calc(50% - 10px)} #wpforms-75 input{height:var(--input_height)} #wpforms-75 textarea{min-height:100px} #wpforms-75 input, #wpforms-75 textarea{width:100%; max-width:100%!important; font-size:var(--input_font_size); color:#555; box-sizing:border-box; border:1px solid rgba(0,0,0,.3); line-height:var(--input_height); padding:0 10px} #wpforms-75 input::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-75 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-75 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-75 input::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-75 textarea::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-75 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-75 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-75 textarea::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} /* 提示错误 */ #wpforms-75 #wpforms-75-field_1-error, #wpforms-75 #wpforms-75-field_2-error, #wpforms-75 #wpforms-75-field_3-error, #wpforms-75 #wpforms-75-field_4-error{position:absolute; font-size:14px} /* 按钮 */ #wpforms-75 .wpforms-submit-container button{width:100%; height:var(--input_height); font-size:16px; color:#FFF; line-height:var(--input_height); cursor:pointer; text-transform:uppercase; position:relative; z-index:2} #wpforms-75 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} #wpforms-75 .wpforms-submit-container:after{display:none; content:""; position:absolute; top:0; left:0; box-sizing:border-box; width:100%; height:100%; border:3px solid var(--i_color)} #wpforms-75 .wpforms-submit-container:hover:after{display:block} #wpforms-75 .wpforms-submit-container:hover{background:#FFF} #wpforms-75 .wpforms-submit-container:hover button{color:var(--i_color)} .close{position:absolute; top:30px; right:30px; display:block; width:30px; height:30px; background:url(static/images/close.png) no-repeat center; background-size:30px} .close:hover{-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg)} .close{-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease} @media screen and (max-width:959px){ #sc_from{width:80%} } @media screen and (max-width:767px){ } @media screen and (max-width:580px){ #mask_bg{display:none!important; background:#FFF} #sc_from{width:100%; height:100%; height:100vh; box-sizing:border-box} #sc_from .tit{margin:10px auto} #sc_from .tit h1{font-size:20px} .p_form_list{margin-bottom:0} .p_form_list li{float:none; width:100%; margin-bottom:10px} .p_form_list li, .p_form_list label, .p_form_list input{height:40px; line-height:40px} } @media screen and (max-width:560px){ #wpforms-75 .wpforms-field{padding-bottom:0; margin-bottom:16px} #wpforms-75 .wpforms-field:nth-child(1), #wpforms-75 .wpforms-field:nth-child(2){width:100%; margin-right:0} #wpforms-75 #wpforms-75-field_1-error, #wpforms-75 #wpforms-75-field_2-error, #wpforms-75 #wpforms-75-field_3-error, #wpforms-75 #wpforms-75-field_4-error{position:relative} } /* 产品详情内容 */ .pro_det_cont{margin-top:70px} .pro_det_tab_nav{margin-bottom:40px; background:#f6f6f6; position:relative} .pro_det_tab_nav:after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#e0e0e0} .pro_det_tab_nav ul{overflow:hidden} .pro_det_tab_nav li{float:left; cursor:pointer; box-sizing:border-box; position:relative; z-index:2} .pro_det_tab_nav li:before{content:""; position:absolute; top:0; left:0; width:0; height:3px; background:var(--i_color)} .pro_det_tab_nav li p{padding:0 40px; font-size:16px; color:#555; line-height:52px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .pro_det_tab_nav .current{background:#FFF; border-left:1px solid #DDD; border-right:1px solid #DDD} .pro_det_tab_nav .current:before{width:100%} .pro_det_tab_nav .current p{font-weight:bold; color:var(--i_color)!important} .pro_det_show{} .pro_det_show .sublist{display:none} .pro_det_show .sublist:first-child{display:block} /* 优势 */ .adv_tit{margin-bottom:26px; font-size:24px; font-weight:bold; color:var(--i_color)} .adv_cont{margin-bottom:30px; display:-webkit-flex; display:flex; flex-wrap:wrap; counter-reset:section; font-size:0; overflow:hidden} .adv_cont b{display:none} .adv_cont dt{width:22.75%; box-sizing:border-box; padding:26px 16px 20px; margin:0 3% 26px 0; position:relative; background:#e4f1f9} .adv_cont dt:nth-child(4n){margin-right:0} .adv_cont dt:before{counter-increment:section; content:"0" counter(section); display:block; text-align:center; font-size:36px; color:#555; font-weight:bold} .adv_cont dt h6{margin-top:10px; text-align:center; font-size:13px; color:#555; line-height:20px} .adv_cont dt:hover{box-shadow:1px 5px 10px rgba(0,0,0,.1)} .adv_cont dt:hover:before{color:var(--i_color)} @media screen and (max-width:767px){ .adv_cont dt{padding:20px 14px 20px} .adv_cont dt:before{font-size:32px} .adv_cont dt h6{margin-top:4px} } @media screen and (max-width:560px){ .adv_cont dt{width:48%; margin:0 4% 16px 0; padding:16px 14px 16px} .adv_cont dt:nth-child(2n){margin-right:0} .adv_cont dt:before{font-size:28px} .adv_cont dt h6{font-size:12px; color:#777; line-height:18px} } /* 表格样式 */ .pro_det_show table{width:100%; max-width:100%; border-collapse:collapse!important; border-spacing:0!important} .pro_det_show, .pro_det_show p, .pro_det_show table, .pro_det_show table *{font-size:16px; color:#666} .pro_det_show p{margin:10px 0;line-height: 21px;} .pro_det_show table tr, .pro_det_show table td{max-width:100%!important} .pro_det_show table tr, .pro_det_show table td, .pro_det_show table tr p, .pro_det_show table td p{margin:0; padding:0} .pro_det_show table tr:nth-child(even){background:rgba(0,0,0,.04)} .pro_det_show table td{padding:10px; border:1px solid var(--border_color)} /* 图片样式 */ .pro_det_show img{margin:0 2% 20px 0; height:initial!important; box-sizing:border-box; border:1px solid var(--border_color)} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .pro_det_cont{margin-top:40px} .pro_det_tab_nav li p{font-size:15px} } @media screen and (max-width:1080px){ .pro_det_tab_nav ul{display:-webkit-flex; display:flex; flex-wrap:nowrap} .pro_det_tab_nav li{width:100%; text-align:center} .pro_det_tab_nav li p{padding:0 10px; font-size:14px} } @media screen and (max-width:959px){ .pro_det_tab_nav{margin-bottom:30px} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .pro_det_tab_nav ul{display:block} .pro_det_tab_nav li{width:33.3%} .pro_det_tab_nav li p{padding:0 4px; font-size:12px} } /* 内页 新闻列表 */ .in_news_list{--img_width:248px} .in_news_list{margin-top:46px; overflow:hidden} .in_news_list li{width:100%; box-sizing:border-box; padding:16px; border:1px solid var(--border_color); margin:0 0 30px 0; position:relative; overflow:hidden} .in_news_list .img{float:left; width:var(--img_width); position:relative; overflow:hidden} .in_news_list .img:before{content:""; display:block; padding-bottom:64%} .in_news_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .in_news_list .txt{float:right; width:calc(100% - var(--img_width) - 100px); margin-right:60px; position:relative} .in_news_list .txt h4{font-size:17px; color:#333; font-weight:bold; line-height:28px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1} .in_news_list .n_time{margin:6px 0 8px; font-size:13px; color:#999} .in_news_list .txt h6{font-size:14px; color:#666; line-height:20px; overflow:hidden; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3} .in_news_list .i_more2{display:block; width:40px; height:40px; position:absolute; top:50%; transform:translate(0,-50%); right:16px; box-sizing:border-box; border:1px solid var(--i_color); -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; background:#FFF url(static/images/arrow_right_hollow.svg) no-repeat center; background-size:18px; overflow:hidden} .in_news_list .img:hover img{width:110%; height:110%} .in_news_list h4:hover{color:var(--i_color)} .in_news_list .img img{-webkit-transition:all .7s ease; -moz-transition:all .7s ease; -ms-transition:all .7s ease; -o-transition:all .7s ease; transition:all .7s ease} @media screen and (max-width:1440px){ .in_news_list li{margin:0 0 20px 0} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .in_news_list{--img_width:200px} .in_news_list .txt h4{font-size:16px} .in_news_list .txt h6{font-size:13px} } @media screen and (max-width:959px){ .in_news_list .txt h4{line-height:24px; -webkit-line-clamp:2} .in_news_list .txt h6{-webkit-line-clamp:2} } @media screen and (max-width:767px){ .in_news_list{margin-top:30px} .in_news_list{--img_width:166px} .in_news_list .txt{width:calc(100% - var(--img_width) - 22px); margin-right:0} .in_news_list .i_more2{display:none} .in_news_list .txt h4{font-size:15px; line-height:20px} .in_news_list .txt h6{font-size:12px; line-height:16px} } @media screen and (max-width:560px){ .in_news_list{margin-top:20px} .in_news_list{--img_width:140px} .in_news_list li{padding:0 0 14px; border:none; border-bottom:1px solid var(--border_color)} .in_news_list .txt h4{font-size:14px} .in_news_list .txt h6{-webkit-line-clamp:1} } .in_news_art_box{margin: 46px auto;} .in_news_art{box-sizing:border-box} .in_news_art_tit{margin-bottom:30px; text-align:center} .in_news_art_tit h1{font-size:26px; color:#222; line-height:36px; font-weight:bold} .in_news_art_tit p{margin-top:20px; font-size:15px; color:#777; background:#EEE; line-height:28px} .in_news_art article, .in_news_art article *{text-align:left; font-family:Arial, system-ui, -apple-system, Microsoft Yahei, tahoma, sans-serif!important; font-size:16px; color:#666; line-height:28px} .in_news_art article img{display:block; margin:20px auto; max-width:100%!important; height:initial!important} .in_news_art article .aligncenter{display: block;margin: 0 auto !important;} .ar_fot{margin:60px auto 0; overflow:hidden} .ar_fot .end{margin-bottom:10px; text-align:center; font-size:17px; color:#555; font-weight:bold; position:relative} .ar_fot .end:before, .ar_fot .end:after{content:""; position:absolute; top:50%; width:44%; height:1px; background:rgba(0,0,0,.2)} .ar_fot .end:before{left:0} .ar_fot .end:after{right:0} .ar_fot ul{overflow:hidden} .ar_fot li{margin:0 0 14px 0; overflow:hidden} .ar_fot li b{float:left; text-align:center; width:80px; font-size:14px; color:#FFF; background:#A9A9A9; line-height:34px} .ar_fot li a, .ar_fot li span{float:right; margin-top:8px; width:calc(100% - 80px - 30px); font-size:14px; line-height:18px} .ar_fot li a{color:#333} .ar_fot li span{color:#999} .ar_fot li a:hover{color:var(--i_color)} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .in_news_art_tit h1{font-size:24px} .in_news_art article, .in_news_art article *{font-size:15px; line-height:26px} } @media screen and (max-width:1200px){ .in_news_art_tit h1{font-size:22px; line-height:30px} .in_news_art article, .in_news_art article *{font-size:14px; line-height:24px} } @media screen and (max-width:959px){ .in_news_art_tit h1{font-size:20px} .in_news_art article, .in_news_art article *{font-size:15px; line-height:26px} .ar_fot{margin:40px auto 0} } @media screen and (max-width:767px){ .in_news_art_tit{margin-bottom:20px} .in_news_art_tit h1{font-size:18px; line-height:26px} .in_news_art_tit p{margin-top:16px} .ar_fot .end{font-size:15px} .ar_fot li b{width:66px; font-size:13px; line-height:28px} .ar_fot li a, .ar_fot li span{width:calc(100% - 86px); margin-top:6px; font-size:13px} } @media screen and (max-width:560px){ .in_news_art_tit h1{font-size:17px; line-height:24px} .in_news_art article, .in_news_art article *{font-size:14px; line-height:24px} } /* Application 列表 */ .in_aap_list{--li_height:440px} .in_aap_list{padding:10px; overflow:hidden} .in_aap_list li{margin-bottom:70px; overflow:hidden} .in_aap_list li:last-child{margin-bottom:20px} .in_aap_list .img{float:left; width:50%; position:relative; overflow:hidden} .in_aap_list .img:before{content:""; display:block; padding-bottom:var(--li_height)} .in_aap_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .in_aap_list .txt{float:right; width:50%; height:var(--li_height); box-sizing:border-box; padding:0 50px; border:1px solid var(--border_color); background:#F8F8F8; position:relative} .in_aap_list .txt .center{position:relative; top:50%; transform:translate(0,-50%);} .in_aap_list .txt .tit{font-size:28px; color:#1C1C1C; font-weight:bold} .in_aap_list .txt p{margin:10px 0; font-size:16px; color:#656565; line-height:24px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4} .in_aap_list .txt dl{margin-bottom:10px; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} .in_aap_list .txt dt{width:48%; box-sizing:border-box; padding-left:14px; margin:0 4% 0 0; position:relative} .in_aap_list .txt dt:nth-child(2n){margin-right:0} .in_aap_list .txt dt:before{content:""; position:absolute; top:50%; transform:translate(0,-50%); left:0; width:6px; height:6px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background:#000} .in_aap_list .txt dt a{display:block; font-size:15px; color:#333; line-height:40px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .in_aap_list .txt dt:hover a{color:var(--i_color)} .in_aap_list li:nth-child(odd) .img{float:left} .in_aap_list li:nth-child(odd) .txt{float:right; border-left:none} .in_aap_list li:nth-child(even) .img{float:right} .in_aap_list li:nth-child(even) .txt{float:left; border-right:none} .in_aap_list li:hover{box-shadow:0 0 10px rgba(0,0,0,.2)} .in_aap_list li:hover img{-webkit-transform:translate(-50%,-50%) scale(1.15,1.15); -moz-transform:translate(-50%,-50%) scale(1.15,1.15); transform:translate(-50%,-50%) scale(1.15,1.15)} .in_aap_list li:hover .txt{border-color:var(--i_color)} .in_aap_list li .tit:hover{color:var(--i_color)} .in_aap_list .img img{-webkit-transition:all .8s ease; -moz-transition:all .8s ease; -ms-transition:all .8s ease; -o-transition:all .8s ease; transition:all .8s ease} @media screen and (max-width:1440px){ .in_aap_list .txt .tit{font-size:24px} .in_aap_list .txt p{font-size:15px} .in_aap_list .txt dt a{line-height:36px} } @media screen and (max-width:1366px){ .in_aap_list{--li_height:380px} .in_aap_list li{margin-bottom:60px} .in_aap_list .txt .tit{font-size:22px} .in_aap_list .txt p{font-size:14px} .in_aap_list .txt dt a{font-size:14px} } @media screen and (max-width:1200px){ .in_aap_list{--li_height:360px} .in_aap_list .txt{padding:0 30px} .in_aap_list .txt p{-webkit-line-clamp:3} .in_aap_list .txt dt a{font-size:13px; line-height:30px} } @media screen and (max-width:959px){ .in_aap_list{--li_height:340px} .in_aap_list li{margin-bottom:40px} .in_aap_list .txt .tit{font-size:20px} .in_aap_list .txt p{font-size:13px} } @media screen and (max-width:767px){ .in_aap_list{--li_height:auto} .in_aap_list li{margin-bottom:34px} .in_aap_list .img, .in_aap_list .txt{float:none!important; width:100%!important} .in_aap_list .img:before{content:""; display:block; padding-bottom:58.6%} .in_aap_list .txt{padding:24px 30px; border:1px solid var(--border_color)!important} .in_aap_list .txt .center{position:initial; transform:none} } @media screen and (max-width:560px){ .in_aap_list .txt{padding:20px 20px} .in_aap_list .txt p{font-size:12px; line-height:20px} } /* Application 详情 */ .in_app_cont{overflow:hidden} .in_app_cont>h2.tit{margin-bottom:30px; text-align:center; font-size:36px; color:#1c1c1c; font-weight:bold} .in_app_cont article, .in_app_cont article *{text-align:left; font-family:Arial, system-ui, -apple-system, Microsoft Yahei, tahoma, sans-serif!important; font-size:18px; color:#444; line-height:34px} .in_app_cont article img{display:block; margin:20px auto; max-width:100%!important; height:initial!important} /* Applications Products */ .in_app_products{margin-top:80px} .in_app_products>h2.tit{margin-bottom:34px; text-align:left; font-size:24px; color:#1c1c1c; font-weight:bold} .in_app_products li{width:23.5%; margin-right:2%} @media screen and (min-width:561px){ .in_app_products li:nth-child(3n){margin-right:2%} .in_app_products li:nth-child(4n){margin-right:0} } @media screen and (max-width:1440px){ .in_app_cont>h2.tit{font-size:34px} .in_app_products{margin-top:70px} } @media screen and (max-width:1366px){ .in_app_cont>h2.tit{margin-bottom:20px; font-size:30px} .in_app_products{margin-top:60px} .in_app_products>h2.tit{margin-bottom:24px} .in_app_cont article, .in_app_cont article *{font-size:16px; line-height:32px} } @media screen and (max-width:1200px){ .in_app_cont>h2.tit{font-size:26px} .in_app_products>h2.tit{font-size:20px} } @media screen and (max-width:959px){ .in_app_products{margin-top:50px} } @media screen and (max-width:767px){ .in_app_cont>h2.tit{font-size:22px} .in_app_products{margin-top:40px} .in_app_products>h2.tit{font-size:19px} .in_app_cont article, .in_app_cont article *{font-size:14px; line-height:28px} } @media screen and (max-width:560px){ .in_app_cont>h2.tit{margin-bottom:14px} .in_app_products{margin-top:30px} .in_app_products li{width:48%; margin-bottom:18px} } /* about us */ .in_about_cont{} .in_about_l{float:left; width:50%} .in_about_l>.tit{font-size:28px; color:#222; font-weight:bold} .in_about_l article{margin:30px 0 46px} .in_about_l article, .in_about_l article *{font-size:18px; color:#222; line-height:34px} .in_about_l dl{display:-webkit-flex; display:flex; overflow:hidden} .in_about_l dt{} .in_about_l dt a{display:block; padding:0 46px; border:2px solid var(--i_color); font-size:20px; color:var(--i_color); line-height:40px} .in_about_l dt:nth-child(1){margin-right:50px} .in_about_l dt a:hover{background:var(--i_color2); border-color:var(--i_color2); color:#FFF} .in_about_r{float:right; width:46%; position:relative} .in_about_r img{width:100%} .in_about_r i{position:absolute; bottom:0; left:-140px; font-size:60px; color:rgba(0,0,0,.06); font-weight:bold; line-height:60px} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .in_about_l>.tit{font-size:26px} .in_about_l article, .in_about_l article *{font-size:17px; line-height:32px} .in_about_r i{left:-106px; font-size:50px; line-height:50px} .in_about_l dt:nth-child(1){margin-right:40px} .in_about_l dt a{padding:0 36px} } @media screen and (max-width:1200px){ .in_about_l>.tit{font-size:22px} .in_about_l article{margin:20px 0 36px} .in_about_l article, .in_about_l article *{font-size:15px; line-height:28px} .in_about_r i{left:-66px; font-size:40px; line-height:40px} } @media screen and (max-width:959px){ .in_about_l, .in_about_r{float:none!important; width:100%} .in_about_l{margin-bottom:40px} .in_about_l>.tit{font-size:20px} .in_about_l article{margin:20px 0 20px} .in_about_l article, .in_about_l article *{font-size:14px; line-height:26px} .in_about_l dt:nth-child(1){margin-right:30px} .in_about_l dt a{padding:0 20px; font-size:16px; line-height:34px} .in_about_r i{left:0; line-height:70px} } @media screen and (max-width:767px){ .in_about_l>.tit{font-size:18px} .in_about_r i{font-size:30px; line-height:50px} } @media screen and (max-width:560px){ .in_about_l{margin-bottom:30px} .in_about_l>.tit{font-size:16px} .in_about_l article{margin:10px 0 16px} .in_about_l dt:nth-child(1){margin-right:20px} .in_about_l dt a{padding:0 14px; font-size:14px} .in_about_r i{font-size:20px; line-height:32px} } /* advantage */ .in_advantage{background:url(static/images/in_adv_bg.jpg) no-repeat center; background-size:cover} .in_advantage .i_tit h2{color:#FFF} .in_adv_list{display:-webkit-flex; display:flex; flex-wrap:nowrap; justify-content:space-between; overflow:hidden} .in_adv_list dt{width:23%; box-sizing:border-box; padding:40px 10px; background:rgba(255,255,255,0); text-align:center; cursor:pointer} .in_adv_list dt .ico{display:block; width:70px; height:70px; margin:0 auto; background:#000} .in_adv_list dt:nth-child(1) .ico{background:url(static/images/in_adv_ico1.png) no-repeat center; background-size:contain} .in_adv_list dt:nth-child(2) .ico{background:url(static/images/in_adv_ico2.png) no-repeat center; background-size:contain} .in_adv_list dt:nth-child(3) .ico{background:url(static/images/in_adv_ico3.png) no-repeat center; background-size:contain} .in_adv_list dt:nth-child(4) .ico{background:url(static/images/in_adv_ico4.png) no-repeat center; background-size:contain} .in_adv_list dt p{margin:30px 0 40px; font-size:22px; color:#FFF; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1} .in_adv_list dt h6{padding-bottom:14px; font-size:48px; color:#FFF; font-weight:bold; line-height:48px; position:relative} .in_adv_list dt h6:after{content:""; position:absolute; left:50%; transform:translate(-50%,0); bottom:0; width:64px; height:4px; background:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px} @media screen and (min-width:561px){ .in_adv_list dt:hover{background:rgba(255,255,255,.6)} .in_adv_list dt:nth-child(1):hover .ico{background:url(static/images/in_adv_ico1_on.png) no-repeat; background-size:contain} .in_adv_list dt:nth-child(2):hover .ico{background:url(static/images/in_adv_ico2_on.png) no-repeat; background-size:contain} .in_adv_list dt:nth-child(3):hover .ico{background:url(static/images/in_adv_ico3_on.png) no-repeat; background-size:contain} .in_adv_list dt:nth-child(4):hover .ico{background:url(static/images/in_adv_ico4_on.png) no-repeat; background-size:contain} .in_adv_list dt:hover p{color:#373737} .in_adv_list dt:hover h6{color:#1c1c1c} .in_adv_list dt:hover h6:after{background:var(--i_color)} } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .in_adv_list dt p{font-size:20px} .in_adv_list dt h6{font-size:44px} } @media screen and (max-width:1200px){ .in_adv_list dt .ico{height:64px} .in_adv_list dt p{font-size:17px} .in_adv_list dt h6{font-size:40px} } @media screen and (max-width:959px){ .in_adv_list dt .ico{width:56px; height:56px} .in_adv_list dt p{margin:24px 0 16px; height:48px; line-height:24px; -webkit-line-clamp:2} .in_adv_list dt h6{font-size:36px} } @media screen and (max-width:767px){ .in_adv_list dt .ico{width:50px; height:50px} .in_adv_list dt p{font-size:15px} .in_adv_list dt h6{font-size:32px} } @media screen and (max-width:560px){ .in_adv_list{flex-wrap:wrap} .in_adv_list dt{width:50%; margin:10px 0 30px 0; padding:0} .in_adv_list dt .ico{width:40px; height:40px} .in_adv_list dt p{font-size:14px; margin:10px auto 0} .in_adv_list dt h6{line-height:32px} } /* Certificate */ .in_certificate{position:relative; overflow:hidden} .in_zs{padding-bottom:60px; position:relative} .in_zs:after{content:""; position:absolute; left:0; bottom:76px; width:100%; height:1px; border-bottom:1px dashed var(--i_color)} .in_zs_list{padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .in_zs_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .in_zs_list .swiper-slide{ flex-shrink:0; position:relative; cursor:pointer; overflow:hidden; } .in_zs_list .img{width:100%; position:relative; overflow:hidden} .in_zs_list .img:before{content:""; display:block; padding-bottom:141%} .in_zs_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; object-fit:cover} .in_zs_list .txt{text-align:center} .in_zs_list .txt p{font-size:18px; color:#2b2b2b; line-height:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .in_zs_list li i{display:block; margin:0 auto; width:32px; height:32px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background:rgba(0,113,188,.3); position:relative} .in_zs_list li i:before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:10px; height:10px; background: rgb(66 51 84); -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%} /* 指示器 */ .zs-pagination{display:block; position:absolute; bottom:0; width:100%; text-align:center; padding-bottom:2px; margin:40px auto 0} .zs-pagination .swiper-pagination-bullet{width:10px; height:10px; display:inline-block; margin:0 5px; background:#E5E5E5; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .zs-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .in_zs .zs-button-prev, .in_zs .zs-button-next{opacity:.8; position:absolute; bottom:0; width:24px; height:20px; z-index:999; cursor:pointer; outline:none} .in_zs .zs-button-prev{left:42%; background:url(static/images/d_arrow_left.svg) no-repeat center; background-size:contain} .in_zs .zs-button-next{right:42%; background:url(static/images/d_arrow_right.svg) no-repeat center; background-size:contain} .in_zs .zs-button-prev:hover:before, .in_zs .zs-button-next:hover:before{color:var(--i_color)} .in_zs .swiper-button-disabled{cursor:not-allowed; color:#E2E2E2!important} .in_zs .swiper-button-disabled:before{color:#CCC!important} @media screen and (max-width:1440px){ .in_zs_list .txt p{font-size:16px} } @media screen and (max-width:1366px){ .in_zs_list .txt p{font-size:14px} .in_zs .zs-button-prev{left:40%} .in_zs .zs-button-next{right:40%} } @media screen and (max-width:1200px){ .in_zs .zs-button-prev{left:38%} .in_zs .zs-button-next{right:38%} } @media screen and (max-width:959px){ .in_zs .zs-button-prev{left:35%} .in_zs .zs-button-next{right:35%} } @media screen and (max-width:767px){ .in_zs{padding-bottom:50px} .in_zs:after{bottom:66px} .in_zs .zs-button-prev{left:30%} .in_zs .zs-button-next{right:30%} .zs-pagination .swiper-pagination-bullet{width:8px; height:8px} } @media screen and (max-width:560px){ .in_zs{padding-bottom:40px} .in_zs:after{bottom:55px} .in_zs .zs-button-prev{left:24%} .in_zs .zs-button-next{right:24%} } /* 联系我们 */ .in_contact_cont{position:relative; overflow:hidden} .in_contact_cont .i_tit h2{text-align:left} .in_contact_cont h6{padding-bottom:20px; font-size:24px; color:#333; font-weight:bold; line-height:34px; position:relative} .in_contact_cont h6:after{content:""; position:absolute; left:0; bottom:0; width:124px; height:5px; background: rgb(66 51 84); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px} .in_contact_cont dl{width:44%; overflow:hidden} .in_contact_cont dt{margin:40px 0; overflow:hidden} .in_contact_cont dt i{float:left} .in_contact_cont dt img{height:40px; filter:grayscale(1); -webkit-filter:grayscale(1); -moz-filter:grayscale(1); -o-filter:grayscale(1); -ms-filter:grayscale(1)} .in_contact_cont dt span{float:right; width:calc(100% - 56px)} .in_contact_cont dt b{font-size:21px; color:#1c1c1c} .in_contact_cont dt p{margin-top:6px} .in_contact_cont dt p, .in_contact_cont dt a{font-size:18px; color:#222} .in_contact_cont dt:hover img{filter:grayscale(0); -webkit-filter:grayscale(0); -moz-filter:grayscale(0); -o-filter:grayscale(0); -ms-filter:grayscale(0)} .in_contact_cont dt:hover b{color:var(--i_color)} /* 地图 */ .in_c_map{position:absolute; top:0; right:0; width:52%; height:100%; background:#FFF} .in_c_map #simpleMap, .in_c_map .fluid-width-video-wrapper, .in_c_map iframe{width:100%; height:100%!important} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .in_contact_cont h6{font-size:22px} .in_contact_cont dt p, .in_contact_cont dt a{font-size:17px} } @media screen and (max-width:1200px){ .in_contact_cont h6{font-size:21px} .in_contact_cont dt p, .in_contact_cont dt a{font-size:16px} } @media screen and (max-width:959px){ .in_contact_cont{margin-bottom:0!important} .in_contact_cont dl{max-width:100%; width:100%} .in_c_map{position:initial; width:100%; height:400px} } @media screen and (max-width:767px){ .in_contact_cont h6{font-size:20px; line-height:28px} .in_contact_cont h6:after{height:4px} .in_contact_cont dt{margin:30px 0} .in_contact_cont dt b{font-size:18px} .in_contact_cont dt p, .in_contact_cont dt a{font-size:15px} } @media screen and (max-width:560px){ .in_contact_cont h6{font-size:17px; line-height:24px; padding-bottom:10px} .in_contact_cont h6:after{width:94px; height:3px} .in_contact_cont dt img{height:30px} .in_contact_cont dt span{width:calc(100% - 46px)} .in_contact_cont dt b{font-size:16px; font-weight:bold} .in_contact_cont dt p, .in_contact_cont dt a{font-size:14px} .in_c_map{height:300px} } /* 表单 */ .in_c_form{--input_font_size:16px; --input_height:50px} .in_c_form{width:100%; padding:60px 0 80px; background:#F8F8F8; overflow:hidden} .in_c_form .tit{margin-bottom:30px; text-align:center} .in_c_form .tit h2{font-size:30px; color:#1c1c1c; font-weight:bold} .in_c_form .tit h6{margin-top:20px; font-size:18px; color:var(--i_color)} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ .in_c_form{--input_font_size:15px} .in_c_form .tit h2{font-size:28px} .in_c_form .tit h6{font-size:17px} #wpforms-75 .wpforms-field-label{font-size:16px} } @media screen and (max-width:1200px){ .in_c_form{--input_font_size:14px; --input_height:46px} .in_c_form{padding:50px 0 60px} } @media screen and (max-width:959px){ .in_c_form .tit h2{font-size:26px} .in_c_form .tit h6{font-size:16px; margin-top:14px} #wpforms-75 .wpforms-field-container>div{margin:10px 0} } @media screen and (max-width:767px){ .in_c_form{--input_font_size:13px; --input_height:42px} .in_c_form .tit h2{font-size:24px} .in_c_form .tit h6{font-size:15px; margin-top:10px} #wpforms-75 .wpforms-field-container>div{margin:6px 0!important; width:100%!important} #wpforms-75 .wpforms-field-label{font-size:14px} } @media screen and (max-width:560px){ .in_c_form{padding:40px 0 50px} .in_c_form .tit{margin-bottom:24px} .in_c_form .tit h2{font-size:20px} .in_c_form .tit h6{font-size:14px; margin-top:10px} } /* 感谢页面 */ .thanks{margin:80px auto 300px; text-align:center; overflow:hidden} .thanks h2{margin-bottom:20px; font-size:30px; color:#222; font-weight:bold} .thanks a{display:inline-block; padding:0 40px; background: rgb(66 51 84); line-height:38px; font-size:15px; color:#FFF} @media screen and (max-width:1200px){ .thanks{margin-top:60px} .thanks h2{font-size:26px} } @media screen and (max-width:767px){ .thanks{margin:40px auto 70px} .thanks h2{font-size:22px} } @media screen and (max-width:560px){ .thanks h2{font-size:18px} } /* 404 */ .in404{position:absolute; top:0; left:0; width:100%; height:100%; background:#FFF} .in404_text{position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:80%; text-align:center} .in404_text h1{font-size:220px; color:#BBB} .in404_text h6{margin:10px auto 30px; font-size:18px; color:#999} .in404_text a{display:inline-block; padding:0 40px; line-height:32px; font-size:15px; color:#999; border:2px solid #DDD; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px} @media screen and (max-width:959px){ .in404_text h1{font-size:180px} } @media screen and (max-width:767px){ .in404_text h1{font-size:140px} .in404_text h6{font-size:16px} .in404_text a{font-size:14px} } @media screen and (max-width:560px){ .in404_text h1{font-size:70px} .in404_text h6{margin:10px auto 18px; font-size:14px; line-height:20px} .in404_text a{font-size:13px} }