/* Theme Name: Aegisec Description: 安徽领聚数字作为Google中国区核心合作伙伴,拥有安徽省唯一的一家Google出海体验中心,为安徽本土化外贸企业出海提供一站式服务——网站搭建,谷歌SEO优化,谷歌竞价,谷歌SNS社媒营销等。 Version: 1.0 Author: 版权所有：安徽领聚 */ /* 初始化 */ @font-face { font-family: 'roboto'; src: url('static/font/Roboto-Light.ttf') format("truetype"); font-weight: 100; } @font-face { font-family: 'roboto'; src: url('static/font/Roboto-Regular.ttf') format("truetype"); font-weight: 300; } @font-face { font-family: 'roboto'; src: url('static/font/Roboto-Black.ttf') format("truetype"); font-weight: 500; } html { scroll-behavior: smooth; direction: ltr !important; } 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 } /* body { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; -o-user-select: none; user-select: none; } */ button, input, textarea, select { font-size: inherit; font-weight: inherit; border: 0; outline: 0 } 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 } .wpforms-field-container input, .wpforms-field-container textarea { margin: 0; padding: 0; border: none; background: none } .wpforms-container-full .wpforms-form .wpforms-field { clear: none !important } /* 全局表单文字 */ 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 } .fl { float: left } .fr { float: right } .container { overflow: hidden } .pr { position: relative } .clear { clear: both } .wrap { width: 73%; max-width: 1400px; margin: 0 auto } .wrap_header { width: 94%; margin: 0 auto } @media screen and (max-width:1600px) { .wrap { width: 80% } } @media screen and (max-width:1440px) { .wrap { width: 86% } } @media screen and (max-width:1200px) { .wrap { width: 94% } } :root { --i_color: #00AF4C; /* 全局颜色-浅绿 */ --i_color2: #FF9F24; /* 副颜色 */ --i_color3: #00883B; /* 选中颜色-深绿 */ --header_height: 100px; /* PC端头部高度 */ --border_color: rgba(0, 0, 0, .1); /* 默认边框颜色 */ } @media screen and (max-width:1024px){ :root{--header_height:60px} } @media screen and (max-width:959px){ :root{--border_color:rgba(0,0,0,.06)} } /* header */ header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.6); -webkit-transition:all .5s ease; transition:all .5s ease; z-index: 2014 } header::before{content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: rgb(0 0 0 / 10%);} header.fixedHeader{ background: rgba(0, 0, 0, .9); box-shadow: 0 4px 10px rgb(0 0 0 / 10%); } header .wrap_header { box-sizing: border-box; display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: center; } @media screen and (max-width:1024px) { } /* logo */ .logo { display: -webkit-flex; display: flex; align-items: center; height: var(--header_height); } .logo a { display: -webkit-flex; display: flex; align-items: center; height: 100%; } .logo img { max-height: 66%; } @media screen and (max-width:1440px) { .logo img { max-height: 52%; } } @media screen and (max-width:1024px) { .logo img { max-height: 70%; } } /* 导航 */ @media screen and (min-width:1025px) { .i_nav { margin-left: 5%; display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: center; gap: 0 46px; position: relative; z-index: 2014; } .i_nav>li {position: relative;} /* .i_nav>li::before{content: '';position: absolute;right: 0;bottom: 0;width: 0;height: 2px;background: var(--i_color);-webkit-transition:all .5s ease; transition:all .5s ease;} */ .i_nav>li>a { text-align: center; height: var(--header_height); display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center; font-size: 17px; text-transform: uppercase; color: #FFF; line-height: 1.4; font-weight: bold; position: relative; } .i_nav>.current-menu-item::before, .i_nav>.current-category-ancestor::before, .i_nav>.current-post-ancestor::before, .i_nav>.current-menu-ancestor::before, .i_nav>.current-menu-parent::before, .i_nav>li:hover::before, .i_nav>li.active::before { /* right: initial;left: 0;width: 100%; */ } .i_nav>.current-menu-item>a, .i_nav>.current-category-ancestor>a, .i_nav>.current-post-ancestor>a, .i_nav>.current-menu-ancestor>a, .i_nav>.current-menu-parent>a, .i_nav>li:hover>a, .i_nav>li.active>a { color: var(--i_color); } .i_nav>li>.sub-menu { display: none; position: absolute; left: 0; top: var(--header_height); min-width: 200px; background: rgba(0, 0, 0, 0.6); box-shadow: 0 6px 10px rgb(0 0 0 / 8%); font-size: 0; } .i_nav>li>.sub-menu li { position: relative; border-bottom: 1px solid var(--border_color); } .i_nav>li>.sub-menu .menu-item-has-children::before{ content: ''; position:absolute; top:50%; transform:translate(0,-50%);right: 6px; width: 20px;height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M19 12L31 24L19 36'/%3E%3C/svg%3E") center; background-size: contain; } .i_nav>li>.sub-menu a { display: block; padding: 0 24px 0 16px; font-size: 15px; color: #FFF; line-height: 36px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; } .i_nav>li>.sub-menu li:hover>a { color: var(--i_color); } .i_nav .sub-menu .sub-menu{display: none; position: absolute; top: 0; left: 100%;background: rgba(0, 0, 0, 0.6); box-shadow: 0 6px 10px rgb(0 0 0 / 8%);} .i_nav .sub-menu .sub-menu a{font-size: 14px;color: #FFF;} .fixedHeader .i_nav>li>.sub-menu, .fixedHeader .i_nav .sub-menu .sub-menu {background: rgba(0, 0, 0, 0.9);} } @media screen and (max-width:1440px) { .i_nav{margin-left: 4%; gap: 0 36px;} .i_nav>li>a{font-size: 15px;} } @media screen and (max-width:1366px) { .i_nav{max-width: 72%;gap: 0 30px;} } @media screen and (max-width:1200px) { .i_nav>li>a{font-size: 14px;} } @media screen and (max-width:1024px) {} @media screen and (max-width:768px) {} @media screen and (max-width:560px) {} @media screen and (max-width:1024px) { .i_nav { opacity: 0; position: fixed; top: var(--header_height); left: 101%; width: 100%; width: 100vw; max-width: 100%; margin: 0 0; height: calc(100vh - var(--header_height)); background: #FFF; overflow-y: auto; -webkit-transition:all .5s ease; transition:all .5s ease; z-index: 9999 } .i_nav.active{opacity: 1; left: 0;} /*滚动条*/ .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: 8px; right: 20px; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid #CCC; -webkit-border-radius:50%; border-radius:50%; background:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23555" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"%2F%3E%3C%2Fsvg%3E') no-repeat center; background-size: 20px; } .i_nav>.menu-item-has-children span.on { background:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23555" d="M19 12.998H5v-2h14z"%2F%3E%3C%2Fsvg%3E') no-repeat center; background-size: 20px; } .i_nav>li>a { padding: 0 20px; font-size: 16px; color: #222; line-height: 44px; text-transform: uppercase; } .i_nav>.current-menu-item>a, .i_nav>.current-category-ancestor>a, .i_nav>.current-post-ancestor>a, .i_nav>.current-menu-ancestor>a, .i_nav>.current-menu-parent>a{ color: var(--i_color) !important; } .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 } } /* 移动端导航按钮 */ .nav_menu { /* position: absolute; right: 0; top: 50%; transform: translateY(-50%); */ position: relative; width: 22px; height: 16px; display: none; cursor: pointer } .nav_menu i { display: block; width: 100%; height: 3px; position: absolute; top: 50%; margin-top: -2px; background: var(--i_color); border-radius: .1rem; transition: 0.5s } .nav_menu::before, .nav_menu::after { content: ""; width: 100%; height: 3px; background: var(--i_color); position: absolute; left: 0; border-radius: .1rem; transition: 0.5s } .nav_menu::before { top: 0; } .nav_menu::after { bottom: 0; } .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:1024px) { .nav_menu { display: block !important; margin-left: 30px; } } .top_r {--size: 24px} .top_r { display: -webkit-flex; display: flex; flex-wrap: nowrap; margin-left: auto; gap: 0 30px; } /* @media screen and (max-width:1024px) { .top_r{margin-left: auto;} } */ .search_cont, .top_language{ height: var(--header_height); display:-webkit-flex; display:flex; flex-wrap:wrap; align-items: center; text-align: center; position: relative; } .top_search_ico iconify-icon, .top_language_btn iconify-icon {font-size: var(--size);color: var(--i_color);cursor: pointer;} .top_search_ico iconify-icon:hover,.top_search_ico.on iconify-icon, .top_language_btn.on iconify-icon { color: var(--i_color); } .top_language{position: relative;} .top_language_btn{padding:10px 18px 10px 0; position: relative; cursor: pointer;} .top_language_btn::before{content: '';position:absolute; top:44%; right: 0; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #FFF;-webkit-transition:all .5s ease; transition:all .5s ease;} .top_language_btn.on::before{-webkit-transform:rotate(-180deg); transform:rotate(-180deg); border-top-color:var(--i_color)} .top_language_btn.on p{color: var(--i_color);} .language_list{ opacity: 0; visibility: hidden; position: absolute;top: calc(var(--header_height) + .2rem);right: 0; background: rgba(0, 0, 0, 0.6); min-width: 120px; z-index: 2016; box-shadow: 0 8px 10px rgb(0 0 0 / 10%); -webkit-transition:all .4s ease; transition:all .4s ease; padding: 16px 20px; text-align: left; } .language_list.on{ opacity: 1; visibility: visible; top: var(--header_height); } .fixedHeader .language_list{background: rgba(0, 0, 0, .9);} .language_list dt>h6{margin-bottom: 8px; font-size: 17px;color: #FFF; font-weight: bold;white-space: nowrap;} .curr_lang{margin-bottom: 12px;padding-bottom: 12px;border-bottom: 1px solid #EEE;} .lang_list a{display: block; padding: 6px 0;} .lang_list a>span{display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;} /* .lang_list span img{display: none;} */ .lang_list .trp-ls-language-name{font-size: 14px;color: #FFF; position: relative;} /* .lang_list .trp-ls-language-name::before{content: '';position:absolute; top:50%; transform:translate(0,-50%);left: 0;width: 18px;height: 18px;box-sizing: border-box;border: 1px solid #AAA;-webkit-border-radius:50%; border-radius:50%;} .lang_list .trp-ls-language-name::after{display: none; content: '';position:absolute; top:50%; transform:translate(0,-50%);left: 6px;width: 6px;height: 6px;background: var(--i_color);-webkit-border-radius:50%; border-radius:50%;} */ .lang_list li:hover .trp-ls-language-name::after, .curr_lang .trp-ls-language-name::after{display: block;} .lang_list li:hover .trp-ls-language-name, .curr_lang .trp-ls-language-name{color: var(--i_color);} /* @media screen and (max-width:1024px) { .language_list dt>h6{font-size: 16px;} } @media screen and (max-width:768px) { .top_language_btn p{display: none;} .top_language_btn iconify-icon{display: block;} .language_list dt>h6{font-size: 15px;} } @media screen and (max-width:560px) { .language_list dt>h6{font-size: 14px;} .language_list{-webkit-border-radius:6px; border-radius:6px;} .lang_list .trp-ls-language-name{font-size: 13px;} } */ @media screen and (max-width:768px) { .language_list dt>h6{font-size: 15px;} } /* search */ .top_search { --search_height: 38px } .top_search { visibility: hidden; opacity: 0; position: fixed; top: var(--header_height); right: 6%; width: 360px; box-sizing: border-box; background: none; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 2015; } .top_search.on { visibility: visible; opacity: 1; box-shadow: 0 4px 10px rgb(0 0 0 / 6%); } /* .top_search::before{ content: ''; position: absolute;bottom: 100%;right: 14px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid var(--i_color); } */ .top_search form{ width: 100%; display: -webkit-flex; background: #FFF; display: flex; flex-wrap: wrap; box-sizing: border-box; border: 1px solid var(--i_color); } .top_search_ipt { width: calc(100% - var(--search_height) * 1.5); height: var(--search_height); box-sizing: border-box; padding: 0 0 0 12px; } .top_search_btn { font-size: 0; color: #FFF; width: calc(var(--search_height) * 1.5); height: var(--search_height); background: var(--i_color) url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="512" height="512" viewBox="0 0 512 512"%3E%3Cpath fill="white" d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0 0 34.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 0 0 327.3 362.6l94.09 94.09a25 25 0 0 0 35.3-35.3ZM97.92 222.72a124.8 124.8 0 1 1 124.8 124.8a124.95 124.95 0 0 1-124.8-124.8Z"%2F%3E%3C%2Fsvg%3E') no-repeat center; background-size: 24px; cursor: pointer; } @media screen and (max-width:1440px) { .top_search{right: 7%;} } @media screen and (max-width:1200px) { .top_search{right: 8%;} } @media screen and (max-width:1024px) { .top_search{right: 0;width: 100%;padding: 16px 0; background: rgba(0, 0, 0, 0.6);} .top_search::before{display: none;} .top_search form { width: 90%; margin: 0 auto; max-width: 500px; display: -webkit-flex; display: flex; flex-wrap: wrap; box-sizing: border-box; border: 1px solid var(--i_color); overflow: hidden; } } @media screen and (max-width:768px) { .top_search { --search_height: 34px } } /* banner */ .i_banner { overflow: hidden; position: relative } .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%; height: 100vh; object-fit: cover } /* banner 左右箭头 */ .banner-button-prev, .banner-button-next { position: absolute; top: 50%; transform: translate(0, -50%); width: 60px; height: 60px; z-index: 999; outline: none; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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; background: rgba(0, 0, 0, .4) url(static/images/public/arrow_left_hollow_bai.svg) no-repeat center; background-size: 26px } .banner-button-next { right: -60px; background: rgba(0, 0, 0, .4) url(static/images/public/arrow_right_hollow_bai.svg) no-repeat center; background-size: 26px } .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-color: 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: 12px; height: 12px; 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) { .banner-button-prev, .banner-button-next { display: none } .banner-pagination { bottom: 20px } } @media screen and (max-width:767px) { .i_banner_list .swiper-slide { width: 100%; position: relative; overflow: hidden } .i_banner_list .swiper-slide:before { content: ""; display: block; padding-bottom: 66% } .i_banner_list .swiper-slide>img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100% } .banner-pagination .swiper-pagination-bullet { width: 10px; height: 10px } } @media screen and (max-width:560px) {} /* banner文字 */ .b_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; text-align: center; overflow: hidden } .b_text h6 { font-family: roboto; font-size: 30px; color: #FFF; line-height: 50px; font-weight: 300; text-transform: uppercase; font-style: italic; } /* 品牌商标 */ i.brand_r { margin-left: 4px; position: relative; top: -16px; font-size: 16px; color: #FFF; } @media screen and (max-width:1366px) { i.brand_r { top: -12px; font-size: 14px; } } @media screen and (max-width:767px) { i.brand_r { top: -6px; } } .b_text h2 { margin: 0 0 36px; font-family: roboto; font-size: 48px; color: #FFF; font-weight: 500; text-transform: uppercase; line-height: 60px } .b_more { width: 210px; margin: 0 auto; position: relative; background: var(--i_color); } .b_more::before { content: ''; position: absolute; left: 0; width: 0; height: 100%; background: var(--i_color3); } .b_more a { display: block; font-size: 18px; color: #FFF; line-height: 44px; text-transform: uppercase; position: relative; } .b_more:hover::before { left: initial; right: 0; width: 100%; } .b_more::before { -webkit-transition: all .5s ease; transition: all .5s ease } @media screen and (max-width:1600px) { .b_text h6 { font-size: 26px; } .b_text h2 { font-size: 46px; } .b_more a { font-size: 17px; } } @media screen and (max-width:1440px) { .b_text h6 { font-size: 24px; } .b_text h2 { font-size: 40px; line-height: 50px; } } @media screen and (max-width:1366px) { .b_text { width: 76%; } .b_text h6 { font-size: 22px; } .b_text h2 { font-size: 36px; } .b_more a { font-size: 16px; padding: 0 34px; line-height: 44px; } } @media screen and (max-width:1200px) { .b_text h6 { font-size: 20px; } .b_text h2 { font-size: 34px; line-height: 40px; } .b_more a { font-size: 16px; padding: 0 34px; line-height: 44px; } } @media screen and (max-width:959px) { .b_text { width: 90%; } .b_text h6 { font-size: 18px; } .b_text h2 { font-size: 30px; } .b_more a { font-size: 15px; padding: 0 30px; line-height: 40px; } } @media screen and (max-width:767px) { .b_text h6 { font-size: 16px; } .b_text h2 { font-size: 22px; line-height: 36px; } } @media screen and (max-width:560px) { .b_text { top: 54%; } .b_text h6 { font-size: 14px; } .b_text h2 { margin: 10px 0 20px; font-size: 16px; line-height: 24px; } .b_more a { font-size: 13px; padding: 0 20px; line-height: 30px; } .b_text h6 { line-height: 20px; } } /* -------------------------------------------- main -------------------------------------------- */ /* 字号 */ /* 首页 大标题 */ .i_tit { margin-bottom: 40px; text-align: center } .i_tit h2 { font-size: 30px; color: #1E1E1E; font-weight: 900; text-transform: uppercase; position: relative } /* 内页 大标题 */ .in_tit_l, .in_tit_s { text-align: center } .in_tit_l h2 { font-size: 22px; font-weight: 900; color: var(--i_color) } .in_tit_s h2 { font-size: 30px; font-weight: 900; color: var(--i_color) } /* 正文 */ .text_font { font-size: 15px; color: #333; line-height: 22px } @media screen and (max-width:1600px) { .in_tit_s h2 { font-size: 28px } } @media screen and (max-width:1440px) { .i_tit h2 { font-size: 28px } .in_tit_l h2 { font-size: 20px } } @media screen and (max-width:1366px) { .i_tit { margin-bottom: 30px } .i_tit h2 { font-size: 26px } .in_tit_s h2 { font-size: 26px } .text_font { font-size: 14px; line-height: 20px } } @media screen and (max-width:1200px) { .i_tit h2 { font-size: 24px } .in_tit_l h2 { font-size: 18px; line-height: 22px } .in_tit_s h2 { font-size: 22px } } @media screen and (max-width:959px) { .i_tit h2 { font-size: 22px } .in_tit_l h2 { font-size: 16px } .in_tit_s h2 { font-size: 20px } } @media screen and (max-width:767px) { .i_tit { margin-bottom: 20px } .i_tit h2 { font-size: 20px } .in_tit_l h2 { font-size: 15px; line-height: 18px } .in_tit_s h2 { font-size: 18px } .text_font { font-size: 13px; line-height: 18px } } @media screen and (max-width:560px) { .i_tit h2 { font-size: 16px } .in_tit_l h2 { font-size: 13px } .in_tit_s h2 { font-size: 16px } } /* 版块边距 margin & padding */ .box_mg { margin: 54px auto 64px } .box_pd { padding: 60px 0 60px } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) { .box_mg { margin: 46px auto 54px } .box_pd { padding: 50px 0 50px } } @media screen and (max-width:1200px) { .box_mg { margin: 40px auto 44px } .box_pd { padding: 40px 0 40px } } @media screen and (max-width:959px) {} @media screen and (max-width:767px) { .box_mg { margin: 36px auto 40px } .box_pd { padding: 36px 0 34px } } @media screen and (max-width:560px) { .box_mg { margin: 26px auto 26px } .box_pd { padding: 34px 0 28px } } @media screen and (max-width:375px) { .box_mg { margin: 20px auto 24px } .box_pd { padding: 30px 0 } } /* 更多按钮 */ .i_more { display: inline-block; box-sizing: border-box; position: relative } .i_more:before { content: ""; position: absolute; top: 50%; transform: translate(0, -50%); right: 10px; width: 20px; height: 20px; background: url(static/images/public/arrow_right_hollow_bai2.svg) no-repeat center; background-size: 14px } .i_more a { display: block; padding: 0 60px 0 30px; font-size: 15px; color: #FFF; font-weight: bold; line-height: 44px; text-transform: uppercase } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) { .i_more a { font-size: 14px; padding: 0 50px 0 20px; line-height: 38px } } @media screen and (max-width:1200px) { .i_more:before { background-size: 12px } .i_more a { font-size: 13px; padding: 0 40px 0 20px; line-height: 34px } } @media screen and (max-width:959px) { .i_more { border-width: 1px } .i_more:before { background-size: 10px } .i_more a { font-size: 12px; padding: 0 30px 0 16px; line-height: 30px } } @media screen and (max-width:767px) {} @media screen and (max-width:560px) {} /* 产品分类 自定义 */ .i_products_category { overflow: hidden } .i_pc_list_box { width: 100%; padding-bottom: 1px; position: relative } .i_pc_list { margin: 0 auto; position: initial !important; overflow: hidden } .i_pc_list .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 2; display: flex; transition-property: transform; box-sizing: content-box; } .i_pc_list .swiper-slide { text-align: left; height: auto; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; transition-property: transform; } .i_pc_list .swiper-slide a { display: block; box-sizing: border-box; border: 1px solid #DDD; border-bottom: none; } .i_pc_list .img { width: 100%; position: relative; overflow: hidden } .i_pc_list .img:before { content: ""; display: block; padding-bottom: 100% } .i_pc_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover } .i_pc_list .txt { text-align: center; background: var(--i_color) } .i_pc_list .txt p { box-sizing: border-box; padding: 0 10px; font-size: 16px; color: #363636; font-weight: bold; line-height: 40px; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .i_pc_list .swiper-slide:hover .txt { background: var(--i_color3) } .i_pc_list .swiper-slide:hover .txt p { color: #FFF } /* 左右箭头 */ .i_pc_list .pc-button-prev, .i_pc_list .pc-button-next { position: absolute; top: 50%; transform: translate(0, -50%); width: 30px; height: 80px; background: #F9F9F9; z-index: 999; cursor: pointer; outline: none } .i_pc_list .pc-button-prev { left: -60px; background: url(static/images/public/arrow_left_hollow_hei2.svg) no-repeat center; background-size: 20px } .i_pc_list .pc-button-next { right: -60px; background: url(static/images/public/arrow_right_hollow_hei2.svg) no-repeat center; background-size: 20px } .i_pc_list .pc-button-prev:hover { background: url(static/images/arrow_left_hollow.svg) no-repeat center; background-size: 20px } .i_pc_list .pc-button-next:hover { background: url(static/images/arrow_right_hollow.svg) no-repeat center; background-size: 20px } .i_pc_list .swiper-button-disabled { opacity: .2; cursor: not-allowed } /* 指示器 */ .pc-pagination { display: none; margin-top: 20px; width: 100%; cursor: pointer; text-align: center; z-index: 10 } .pc-pagination .swiper-pagination-bullet { width: 12px; height: 12px; display: inline-block; background: rgba(0, 0, 0, .6); margin: 0 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; outline: none } .pc-pagination .swiper-pagination-bullet-active { background: var(--i_color) } @media screen and (max-width:1440px) { .i_pc_list .txt p { font-size: 17px } } @media screen and (max-width:1366px) { .i_pc_list .txt p { font-size: 16px } } @media screen and (max-width:1200px) { .i_pc_list { overflow: hidden !important } .i_pc_list .txt p { font-size: 15px } .i_pc_list .pc-button-prev { left: -30px } .i_pc_list .pc-button-next { right: -30px } } @media screen and (max-width:959px) { .i_pc_list .txt p { font-size: 14px } .i_pc_list .pc-button-prev, .i_pc_list .pc-button-next { display: none } .pc-pagination { display: block } } @media screen and (max-width:767px) { .i_pc_list .txt p { font-size: 13px } } @media screen and (max-width:560px) { .pc-pagination .swiper-pagination-bullet { width: 8px; height: 8px } } /* why_choose_us */ .why_choose_us { padding-bottom: 40px; position: relative; overflow: hidden } .why_choose_us .img { position: absolute; top: 0; right: 0; width: 59%; height: 100%; z-index: 1 } .why_choose_us .img img { width: 100%; height: 100%; object-fit: cover } .why_choose_us:after { content: ""; position: absolute; top: 0; left: 0; width: 49%; height: 101%; background: var(--i_color); clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%); z-index: 2 } .why_choose_us .wrap { position: relative; z-index: 3 } .why_choose_us .text { width: 39%; overflow: hidden } .why_choose_us .text h2 { position: absolute; top: 0; left: 0; font-size: 80px; line-height: 130px; color: transparent; font-weight: bold; -webkit-text-stroke: 1px rgba(255, 255, 255, .15); transform: scale(1.5, 1); transform-origin: 0 0 } .why_choose_us .text h3 { padding: 48px 0 0 0; margin-bottom: 20px; font-size: 40px; color: #FFF; font-weight: 900; text-transform: uppercase; position: relative; z-index: 2 } .why_list { margin-bottom: 20px; counter-reset: section; overflow: hidden } .why_list dt { margin-bottom: 10px; padding-left: 20px; position: relative } .why_list dt i { position: absolute; top: 0; left: 0; font-size: 18px; color: var(--i_color2); font-weight: bold; line-height: 26px } .why_list h5, .why_list h6 { font-size: 15px; color: #FFF; font-weight: bold; line-height: 24px } .why_choose_us .more { display: inline-block; margin-right: 20px; box-sizing: border-box; border: 2px solid #FFF; position: relative; } .why_choose_us .more::before { content: ''; position: absolute; top: 50%; transform: translate(0, -50%); right: 10px; width: 20px; height: 20px; background: url(static/images/public/arrow_right_hollow_bai2.svg) no-repeat right center; background-size: 14px; } .why_choose_us .more i { display: block; padding: 0 60px 0 30px; font-size: 15px; color: #FFF; font-weight: bold; line-height: 44px; text-transform: uppercase; } .why_choose_us .more:hover { background: var(--i_color3); } .why_choose_us .more:hover::before { background: url(static/images/public/arrow_right_hollow_bai2.svg) no-repeat right center; background-size: 14px; } .why_choose_us .more:hover i { color: #FFF; } .why_choose_us .i_more:hover:before { background: url(static/images/public/arrow_right_hollow_hei2.svg) no-repeat center; background-size: 14px } .why_choose_us .i_more:hover a { color: #333 } @media screen and (max-width:1440px) { .why_choose_us .text h2 { font-size: 70px; line-height: 120px; } .why_choose_us .text h3 { padding: 48px 0 0 0; font-size: 34px } .why_choose_us .more i { padding: 0 50px 0 20px; line-height: 40px; } } @media screen and (max-width:1366px) { .why_choose_us .text h2 { font-size: 60px } .why_choose_us .text h3 { font-size: 30px } .why_choose_us .more i { font-size: 14px; } } @media screen and (max-width:1200px) { .why_choose_us .text h2 { font-size: 50px; line-height: 110px; } .why_choose_us .text h3 { font-size: 24px } .why_list h5, .why_list h6 { font-size: 14px; font-weight: normal } .why_choose_us .i_more { margin-right: 10px } } @media screen and (max-width:1024px) { .why_choose_us .more { margin-right: 10px; } .why_choose_us .more::before { background-size: 12px } .why_choose_us .more i { padding: 0 44px 0 20px; } } @media screen and (max-width:959px) { .why_choose_us .img, .why_choose_us:after, .why_choose_us .text { width: 100% } .why_choose_us:after { opacity: .9; clip-path: none } .why_choose_us .text h2 { font-size: 44px; line-height: 110px; } .why_choose_us .text h3 { font-size: 20px } .why_list h5, .why_list h6 { font-size: 15px } } @media screen and (max-width:767px) { .why_choose_us .text h2 { font-size: 50px; line-height: 80px } .why_choose_us .text h3 { margin-bottom: 14px; padding: 34px 0 0 0; font-size: 28px } .why_list h5, .why_list h6 { font-size: 14px } .why_choose_us .more i { padding: 0 40px 0 18px; line-height: 38px; font-weight: normal; font-size: 13px; } } @media screen and (max-width:560px) { .why_choose_us .text h2 { font-size: 40px; line-height: 76px } .why_choose_us .text h3 { margin-bottom: 14px; padding: 34px 0 0 0; font-size: 20px } .why_list { margin-bottom: 10px } .why_list dt i, .why_list h5, .why_list h6 { font-size: 13px; line-height: 22px } .why_choose_us .more { border-width: 1px; } .why_choose_us .more::before { background-size: 10px; } .why_choose_us .more i { padding: 0 30px 0 16px; line-height: 36px; font-weight: normal; font-size: 12px; } } /* Hot selling items */ .i_p_list_box { padding-bottom: 1px; position: relative } .i_p_list { margin: 0 auto; position: initial !important; overflow: hidden } .i_p_list .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 2; display: flex; transition-property: transform; box-sizing: content-box; } .i_p_list .swiper-slide { text-align: left; height: auto; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; transition-property: transform; } .i_p_list .swiper-slide a { display: block; box-sizing: border-box; } .i_p_list .img { width: 100%; position: relative; overflow: hidden } .i_p_list .img:before { content: ""; display: block; padding-bottom: 100% } .i_p_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover } .i_p_list .txt { margin-top: 10px; text-align: center } .i_p_list .txt p { box-sizing: border-box; padding: 0 20px; font-size: 16px; color: #363636; font-weight: bold; line-height: 22px } .i_p_list .swiper-slide:hover .txt p { color: var(--i_color) } /* 左右箭头 */ .i_p_list .p-button-prev, .i_p_list .p-button-next { position: absolute; top: 50%; transform: translate(0, -50%); width: 30px; height: 80px; background: #F9F9F9; z-index: 999; cursor: pointer; outline: none } .i_p_list .p-button-prev { left: -60px; background: url(static/images/public/arrow_left_hollow_hei2.svg) no-repeat center; background-size: 20px } .i_p_list .p-button-next { right: -60px; background: url(static/images/public/arrow_right_hollow_hei2.svg) no-repeat center; background-size: 20px } .i_p_list .p-button-prev:hover { background: url(static/images/arrow_left_hollow.svg) no-repeat center; background-size: 20px } .i_p_list .p-button-next:hover { background: url(static/images/arrow_right_hollow.svg) no-repeat center; background-size: 20px } .i_p_list .swiper-button-disabled { opacity: .2; cursor: not-allowed } /* 指示器 */ .p-pagination { display: none; margin-top: 20px; width: 100%; cursor: pointer; text-align: center; z-index: 10 } .p-pagination .swiper-pagination-bullet { width: 10px; height: 10px; display: inline-block; background: rgba(0, 0, 0, .6); margin: 0 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; outline: none } .p-pagination .swiper-pagination-bullet-active { background: var(--i_color) } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) { .i_p_list .txt p { font-size: 15px; line-height: 20px } } @media screen and (max-width:1200px) { .i_p_list .txt p { font-size: 14px } .i_p_list .p-button-prev, .i_p_list .p-button-next { display: none } .p-pagination { display: block } } @media screen and (max-width:959px) { .i_p_list .txt p { font-size: 13px; line-height: 18px } } @media screen and (max-width:767px) { .i_p_list .txt p { font-size: 12px; line-height: 16px } } @media screen and (max-width:560px) { .p-pagination .swiper-pagination-bullet { width: 8px; height: 8px } } /* Solution */ .i_solution { padding: 50px 0 60px } .i_solution .tit { text-align: center; overflow: hidden } .i_solution .tit h2 { font-size: 26px; color: #FFF; font-weight: 900 } .i_solution .tit h4 { margin: 6px auto 20px; font-size: 20px; color: var(--i_color); font-weight: bold } .i_solution .text_font { color: #FFF } .i_sol_list { margin-top: 40px; display: -webkit-flex; display: flex; flex-wrap: nowrap; justify-content: space-between; overflow: hidden } .i_sol_list li { width: 23%; overflow: hidden } .i_sol_list .img { width: 100%; position: relative; overflow: hidden } .i_sol_list .img:before { content: ""; display: block; padding-bottom: 82% } .i_sol_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover } .i_sol_list .txt { text-align: center; background: var(--i_color) } .i_sol_list .txt p { box-sizing: border-box; padding: 0 10px; font-size: 16px; color: #111; font-weight: bold; line-height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .i_sol_list li:hover .txt { background: var(--i_color3) } .i_sol_list li:hover p { color: #FFF } @media screen and (max-width:1440px) { .i_solution .tit h2 { font-size: 24px } .i_solution .tit h4 { font-size: 18px } } @media screen and (max-width:1366px) { .i_solution .tit h2 { font-size: 22px } .i_solution .tit h4 {} .i_solution .tit h6 {} .i_sol_list .txt p { font-size: 15px } } @media screen and (max-width:1200px) { .i_solution .tit h2 { font-size: 20px } .i_solution .tit h4 {} .i_sol_list .txt p { font-size: 14px } } @media screen and (max-width:959px) { .i_solution .tit h2 { font-size: 18px } .i_solution .tit h4 {} .i_sol_list .txt p { font-size: 13px } } @media screen and (max-width:767px) { .i_solution { padding: 50px 0 30px } .i_solution .tit h2 { font-size: 16px } .i_solution .tit h4 { font-size: 15px; margin: 4px auto 16px } .i_sol_list { display: block; margin-top: 30px } .i_sol_list li { float: left; width: 48%; margin: 0 4% 30px 0 } .i_sol_list li:nth-child(2n) { margin-right: 0 } .i_sol_list .txt p { font-size: 12px } } @media screen and (max-width:560px) { .i_solution { padding: 34px 0 24px } .i_solution .tit h2 { font-size: 14px } .i_solution .tit h4 { font-size: 14px } .i_sol_list li { margin: 0 4% 20px 0 } } /* about */ .i_about { overflow: hidden } .i_about_t { position: absolute; top: 50%; transform: translate(0, -50%); width: 40% } .i_about_t .i_tit { text-align: left } /* .i_about_t h2{font-size:40px; color:#363636; font-weight:bold} */ /* .i_about_t h6{margin:30px auto 40px; font-size:16px; color:#363636; line-height:28px} */ .i_about_t .text_font { margin: 30px auto 40px } .i_about_t .i_more { background: var(--i_color); border-color: var(--i_color) } .i_about_t .i_more:hover { background: var(--i_color3) } /* .i_about_t .i_more:hover:before { background-image: url(static/images/public/arrow_right_hollow_bai.svg) } */ .i_about_t .i_more:hover a { color: #FFF } .i_about_v { width: 54%; position: relative; overflow: hidden } .i_about_v:before { content: ""; display: block; padding-bottom: 56.25% } .i_about_v iframe, .i_about_v video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) { .i_about_t .text_font { margin: 16px auto 30px } } @media screen and (max-width:1200px) {} @media screen and (max-width:959px) { .i_about_t { position: initial; top: initial; transform: none } } @media screen and (max-width:767px) { .i_about_t, .i_about_v { float: none; width: 100% } .i_about_t { margin-bottom: 30px } } @media screen and (max-width:560px) {} /* footer */ footer {padding:70px 0 0} .f_cont_box {padding-bottom:60px;display:-webkit-flex;display:flex;flex-wrap:nowrap;overflow:hidden} .f_logo{width: 24%;} .f_logo>a img {height: 60px;} .f_logo h5 {margin:34px 0 26px;font-size:18px;color:#FFF;max-width:350px} .f_logo dl {display:-webkit-flex;display:flex;flex-wrap:wrap;align-items:center;padding-top:10px;overflow:hidden} .f_logo dt {margin-right:36px;position:relative} .f_logo dt:last-child {margin-right:0} .f_logo dt:not(:last-child):after {content:"";position:absolute;top:0;right:-19px;width:1px;height:100%;background:rgba(255,255,255,.25)} .f_logo dt img {max-height:28px} .f_logo dt:first-child img{max-height: 26px;} .f_logo dt:hover img {-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_logo dt 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} .f_nav {margin-left:auto;display:-webkit-flex;display:flex;flex-wrap:nowrap} .f_nav dl {float:left;margin-right:150px;overflow:hidden} .f_nav dl:last-child {margin-right:0} .f_nav dt {margin-bottom:30px} .f_nav dt,.f_nav dt a {font-size:20px;color:var(--i_color);font-weight:bold;text-transform:uppercase;} .f_nav li a {display:block;font-size:15px;color:#FFF;font-weight:bold;line-height:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:capitalize;} /* .f_nav ul ul {margin-left:20px}*/ .f_nav li li a {font-size:14px;font-weight:normal} .f_nav a:hover {color:var(--i_color)} .f_cont {margin-left:auto;width:28%} .f_tit {margin-bottom:30px;font-size:20px;color:var(--i_color);font-weight:bold;text-transform:uppercase;} .f_info dt {margin-bottom:16px;overflow:hidden;display:-webkit-flex;display:flex;flex-wrap:nowrap} .f_info dt i {display:block;margin-right:10px;width:26px;height:26px} .f_info dt i img {height:100%} .f_info dt span,.f_info dt span a {display:inline-block;font-size:14px;color:#FFF;line-height:26px} .f_info a {cursor:pointer;} .f_info span b {margin-right:6px;font-weight:bold} .f_info a:hover {color:var(--i_color)} .f_cont ul {padding-top:10px;overflow:hidden} .f_cont li {float:left;margin-left:20px} .f_cont li:first-child {margin-left:0} .f_cont li: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_cont li {-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 li img {width:30px;height:30px;object-fit:contain} .f_copy {padding:10px 0;text-align:center;background:var(--i_color)} .f_copy,.f_copy p,.f_copy h6 {font-size:13px;color:#FFF;line-height:24px} .f_copy ul {display:inline-block} .f_copy li {float:left;margin:0 20px;position:relative} .f_copy li:not(:last-child):after {content:"";position:absolute;top:0;right:-20px;width:1px;height:100%;background:rgba(255,255,255,.4)} .f_copy li,.f_copy li a {font-size:13px;color:#FFF;line-height:20px} @media screen and (max-width:1440px) { .f_logo h5 {font-size:17px} .f_logo dt img {height:40px} .f_nav dl {margin-right:120px} } @media screen and (max-width:1366px) { .f_logo {max-width:320px} .f_logo>a img {max-height:70px} .f_logo dt img {height:38px} .f_logo h5 {margin:26px 0 22px} } @media screen and (max-width:1280px) { .f_logo {max-width:300px} .f_logo>a img {max-height:60px} .f_logo h5 {font-size:16px;line-height:24px} .f_logo dt img {height:30px} .f_cont li img {width:24px;height:24px} .f_nav dt,.f_nav dt a,.f_tit {font-size:18px} .f_nav dt,.f_tit {margin-bottom:20px} } @media screen and (max-width:1080px) { .f_logo {max-width:260px;width: auto;} .f_logo>a img {max-height:56px} .f_logo h5 {font-size:15px;line-height:20px} .f_logo dt img {height:26px} .f_nav dl {margin-right:90px} .f_nav li a {font-size:14px} .f_nav li li a {font-size:13px} .f_cont li {margin-left:20px} .f_copy li {margin:0 12px} .f_copy li:not(:last-child):after {right:-12px} .f_copy li,.f_copy li a {font-size:12px} } @media screen and (max-width:959px) { .f_cont_box {display:block} .f_logo {max-width:100%;margin-bottom:38px} .f_logo h5 {max-width:100%;margin:26px 0 20px} .f_nav {display: none;} .f_cont {float:left;width:44%} } @media screen and (max-width:767px) { footer {padding:50px 0 0} .f_cont_box {padding-bottom:40px} .f_nav {display:none} .f_copy {padding:8px 0} .f_cont {float:none;width:100%} .f_copy li {float:none;margin:0 0} .f_copy li:after {display:none} .f_copy li,.f_copy li a {display:block;line-height:18px} } @media screen and (max-width:560px) { footer {padding:30px 0 0} .f_cont_box {padding-bottom:30px} .f_logo h5 {margin:16px 0 10px;font-size:13px} .f_nav dt,.f_tit {margin-bottom:20px} .f_info dt span,.f_info dt span a {font-size:13px;line-height:24px} .f_info dt i {width:22px;height:22px} } .aside_right { position: fixed; right: 0; bottom: 10%; z-index: 2012 } .aside_right ul {} .aside_right li { position: relative; cursor: pointer } .aside_right li>a { display: block; width: 48px; height: 48px; background: rgba(0, 0, 0, .7); display: flex; justify-content: center; align-items: center; z-index: 3 } .aside_right li img { display: block; margin: 0 auto; width: 20px; height: 20px; object-fit: contain } .aside_right li:hover>a { background: var(--i_color) } .side_tel_box, .side_qr_box { position: absolute; box-shadow: -1px 2px 6px rgba(0, 0, 0, .2); display: flex; justify-content: center; align-items: center; z-index: -1 } .side_tel_box { top: 0; right: -300px; width: 180px; min-height: 100%; background: #FFF } .side_qr_box { top: 50%; transform: translate(0, -50%); right: -180px; width: 120px; height: 120px; background: #FFF } .side_tel_box h6 { padding: 8px 0; font-size: 14px; color: #666 } .side_tel_box h6 a { line-height: 20px } .side_tel_box a:hover { color: var(--i_color) } .side_qr_box img { width: 90%; height: 90% } .aside_right li:hover .side_tel_box, .aside_right li:hover .side_qr_box { right: 48px } .side_tel_box, .side_qr_box { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } #aside_sc_from .close { position: absolute; top: 20px; right: 20px; display: block; width: 30px; height: 30px; background: url(static/images/public/close_1_hei.svg) no-repeat center; background-size: contain } #aside_sc_from .close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } #aside_sc_from .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 } #aside_mask_bg { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 9999999999998 } #aside_sc_from { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; box-sizing: border-box; padding: 30px 30px 40px; background: rgb(255 255 255 / 100%); z-index: 9999999999999; overflow: auto } #aside_sc_from .tit { margin-bottom: 20px } #aside_sc_from .tit h2 { text-align: center; font-size: 26px; color: var(--i_color); font-weight: bold; line-height: 30px } #wpforms-84 { --input_font_color: rgb(0 0 0 / 50%); --input_font_size: 14px; --input_height: 42px } #wpforms-84 { width: 100%; margin: 0 auto; padding: 0 } #wpforms-form-84 { width: 100%; overflow: hidden } #wpforms-84 input, #wpforms-84 button { margin: 0; padding: 0; border: none; background: none } #wpforms-84 .wpforms-field { padding: 0; margin: 0 } #wpforms-84 .wpforms-error-container { line-height: 16px } #wpforms-84 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; overflow: hidden } #wpforms-84 .wpforms-submit-container { padding: 0 !important; margin: 0 auto; width: 170px; background: var(--i_color); -webkit-border-radius: .05rem; border-radius: .05rem; position: relative } #wpforms-84 .wpforms-field-label { font-size: 0 } #wpforms-84 .wpforms-required-label { position: absolute; top: 16px; left: 5px; font-size: 16px; color: #F00 } #wpforms-84 .wpforms-field { width: 100%; margin-bottom: 0; padding-bottom: 18px; background: transparent; position: relative; overflow: hidden } #wpforms-84 input { height: var(--input_height); line-height: var(--input_height); } #wpforms-84 textarea { padding-top: 7px !important; min-height: 100px; line-height: 22px; } #wpforms-84 input, #wpforms-84 textarea { width: 100%; max-width: 100% !important; font-size: var(--input_font_size); color: #333; box-sizing: border-box; border: 1px solid rgb(0 0 0 / 30%); padding: 0 16px } #wpforms-84 input::-webkit-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-84 input::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-84 input::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-84 input::-ms-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-84 textarea::-webkit-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-84 textarea::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-84 textarea::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-84 textarea::-ms-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-84 #wpforms-84-field_1-error, #wpforms-84 #wpforms-84-field_2-error, #wpforms-84 #wpforms-84-field_3-error, #wpforms-84 #wpforms-84-field_5-error { position: absolute; font-size: 13px } #wpforms-84 .wpforms-submit-container button { width: 100%; height: 38px; font-size: 14px; color: #FFF; line-height: 38px; cursor: pointer; text-transform: uppercase; position: relative; z-index: 2 } #wpforms-84 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } #wpforms-84 .wpforms-submit-container:hover { background: var(--i_color3); } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) { .aside_right li>a { width: 42px; height: 42px } .aside_right li img { width: 18px; height: 18px } #aside_sc_from { width: 70% } .aside_right li:hover .side_tel_box, .aside_right li:hover .side_qr_box { right: 42px } } @media screen and (max-width:1024px) { #aside_sc_from { width: 94%; } } @media screen and (max-width:959px) { #aside_sc_from { padding: 40px 40px } .aside_right li>a { width: 36px; height: 36px } .aside_right li:hover .side_tel_box, .aside_right li:hover .side_qr_box { right: 36px } } @media screen and (max-width:767px) { #aside_sc_from .tit h2 { font-size: 20px } .aside_right { bottom: 32% } #aside_sc_from { padding: 20px 20px 30px } #aside_sc_from .tit { margin-bottom: 18px; } #wpforms-98 { --input_font_size: 13px; --input_height: 38px } #wpforms-98 .wpforms-submit-container { height: 34px; } #wpforms-98 .wpforms-submit-container button { height: 30px; line-height: 30px; font-size: 14px; } .aside_close { top: 10px; right: 10px; } } @media screen and (max-width:560px) { #aside_sc_from { padding: 30px 20px } #aside_sc_from .tit h2 { font-size: 16px } } /* ------------------------------------------ 内页 ------------------------------------------ */ .in_full_height { display: none; width: 100%; height: var(--header_height); } @media screen and (max-width:959px) { .in_full_height { display: block; } } /* 内页 banner */ .in_banner { width: 100%; position: relative; overflow: hidden } .in_banner img { width: 100%; width: 100vw; height: auto; object-fit: cover } @media screen and (max-width:959px) { .in_banner:before { content: ""; display: block; padding-bottom: 42% } .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: 48% } } @media screen and (max-width:560px) { .in_banner:before { padding-bottom: 56% } } .in_b_text { position: absolute; top: 54%; transform: translate(0, -50%); left: 0; text-align: center; width: 100%; text-transform: uppercase } .in_b_text h6 { font-family: roboto; font-size: 30px; color: #FFF; font-weight: 100; text-transform: uppercase; font-style: italic; font-weight: 300; /* text-shadow: 0 2px 0 rgb(0 0 0 / 20%) */ } .in_b_text h2 { margin: 14px 0 0; font-family: roboto; font-size: 46px; color: #FFF; font-weight: 500; text-transform: uppercase; line-height: 60px; /* text-shadow: 0 3px 0 rgb(0 0 0 / 20%) */ } @media screen and (max-width:1600px) { .in_b_text h6 { font-size: 26px; } .in_b_text h2 { font-size: 40px; } } @media screen and (max-width:1440px) { .in_b_text h6 { font-size: 24px; } .in_b_text h2 { font-size: 36px; } } @media screen and (max-width:1366px) { .in_b_text h2 { font-size: 34px; line-height: 46px; } } @media screen and (max-width:1200px) { .in_b_text { top: 56%; } .in_b_text h6 { font-size: 20px; } .in_b_text h2 { font-size: 30px; line-height: 36px; } } @media screen and (max-width:959px) { /* .in_b_text { top: 48%; } */ .in_b_text h6 { font-size: 18px; } .in_b_text h2 { font-size: 26px; line-height: 30px; } } @media screen and (max-width:767px) { .in_b_text h2 { font-size: 22px; } } @media screen and (max-width:560px) { .in_b_text h6 { font-size: 14px; } .in_b_text h2 { margin: 10px 0 0; font-size: 18px; line-height: 20px; } } .full_header_height { display: block; height: var(--header_height) } /* 当前位置 */ .in_position { margin: 22px 0 0 } .in_position a { display: block; float: left; font-size: 14px; color: #666; position: relative; line-height: 20px; text-transform: capitalize } .in_position a:first-child { padding-left: 24px; background: url(static/images/public/home_3_hei.svg) no-repeat left center; background-size: 20px } .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 } } /* 新闻列表 */ .in_news { margin-bottom: 70px; overflow: hidden } .in_news .in_tit_s { margin-bottom: 40px } .in_news .in_tit_s h2 { color: #333 } .in_news_list { width: 84%; margin: 0 auto; display: -webkit-flex; display: flex; flex-wrap: wrap; overflow: hidden } .in_news_list li { width: 21.25%; margin: 0 5% 54px 0 } .in_news_list li:nth-child(4n) { margin-right: 0 } .in_news_list .img { width: 100%; box-sizing: border-box; position: relative; overflow: hidden } .in_news_list .img:before { content: ""; display: block; padding-bottom: 94.5% } .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 { position: relative } .in_news_list .txt h2 { margin: 24px 0 14px; font-size: 16px; color: #333; font-weight: bold; height: 40px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .in_news_list .txt i { display: block; font-size: 14px; color: var(--i_color2); font-weight: bold } .in_news_list li:hover .img img { width: 108%; height: 108%; } .in_news_list li:hover .txt h2 { color: var(--i_color) } .in_news_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 } @media screen and (max-width:1440px) { .in_news_list .txt h2 { font-size: 15px } } @media screen and (max-width:1366px) { .in_news_list .txt i { font-size: 13px } } @media screen and (max-width:1200px) {} @media screen and (max-width:959px) { .in_news_list { width: 100%; } .in_news_list .txt h2 { margin: 18px 0 10px; font-size: 14px; line-height: 18px } .in_news_list .txt i { font-size: 12px } } @media screen and (max-width:767px) { .in_news_list li { width: 47%; margin: 0 6% 40px 0 } .in_news_list li:nth-child(2n) { margin-right: 0 } } @media screen and (max-width:560px) {} /* 页数 */ .in_page_box { text-align: center; margin: 20px auto 80px; position: relative; overflow: hidden } .in_page { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .in_page li { margin: 0 4px; } .in_page a, .in_page span { display: block; padding: 0 14px; line-height: 30px; font-size: 14px; color: #666; background: #f1f1f1; border: 1px solid var(--border_color); overflow: hidden; } .in_page>i { margin-left: 10px; font-size: 13px; color: #888; } .in_page a:hover, .in_page .active_page a, .in_page .active_page span { border-color: var(--i_color) !important; background: var(--i_color); color: #FFF !important } @media screen and (max-width:1024px) { .in_page_box { margin-bottom: 60px; } .in_page a, .in_page span { padding: 0 12px; line-height: 26px; font-size: 14px; } } @media screen and (max-width:767px) { .in_page>i { display: block; width: 100%; margin-top: 10px; font-size: 13px; } } /* 新闻详情页 */ .in_news_art { box-sizing: border-box } .in_news_art_tit { border-bottom: 1px solid #DDD; margin-bottom: 30px; text-align: center } .in_news_art_tit h1 { font-size: 30px; color: #222; line-height: 36px; font-weight: bold } .in_news_art_tit h6 { text-align: right; margin: 10px 0 8px; font-size: 15px; color: var(--i_color2); font-weight: bold; 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: #444; line-height: 30px } .in_news_art article img { display: block; margin: 20px auto; max-width: 100% !important; height: initial !important } .in_news_art article iframe { display: block; margin: 20px auto; object-fit: contain; } @media screen and (min-width:1025px) { .in_news_art article iframe { width: 1000px; height: 562px; } } /* 上一篇 下一篇 */ .ar_fot { min-height: 40px; border-bottom: .01rem solid #CCC; margin-top: 80px; padding-bottom: 40px; position: relative; } .ar_fot ul { display: -webkit-flex; display: flex; flex-wrap: nowrap; justify-content: space-between; } .ar_fot li { width: 40%; } .ar_fot a { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; } .ar_fot li:nth-child(2) a { justify-content: flex-end; } .ar_fot a i { display: block; width: 46px; height: 46px; -webkit-border-radius: 50%; border-radius: 50%; } .ar_fot li:nth-child(1) i { margin-right: 20px; background: rgb(8 52 114 / 10%) url(static/images/arrow_left_long.svg) no-repeat center; background-size: 22px; } .ar_fot li:nth-child(2) i { margin-left: 20px; background: rgb(8 52 114 / 10%) url(static/images/arrow_right_long.svg) no-repeat center; background-size: 22px; } .ar_fot a span { width: calc(100% - 46px - 20px); } .ar_fot li:nth-child(2) span { text-align: right; } .ar_fot a p { font-size: 18px; color: #555; } .ar_fot a h6 { font-size: 17px; color: #666; } .ar_fot li:hover h6 { color: var(--i_color); } .ar_prev:hover i { background: var(--i_color3) url(static/images/public/arrow_left_long_bai.svg) no-repeat center !important; background-size: 22px !important; } .ar_next:hover i { background: var(--i_color3) url(static/images/public/arrow_right_long_bai.svg) no-repeat center !important; background-size: 22px !important; } @media screen and (max-width:1200px) { .ar_fot { margin-top: 60px; } } @media screen and (max-width:1024px) { .ar_fot { padding-bottom: 30px; } .ar_fot a i { width: 40px; height: 40px; background-size: 18px !important; } .ar_fot a:hover i { background-size: 18px !important; } .ar_fot a p { font-size: 16px; } .ar_fot a h6 { font-size: 15px; } } @media screen and (max-width:959px) { .ar_fot li { width: 48%; } } @media screen and (max-width:767px) { .ar_fot { margin-top: 40px; padding-bottom: 10px; } .ar_fot a i { display: none !important; } .ar_fot a span { width: 100%; } .ar_fot a p { font-size: 14px; } .ar_fot a h6 { font-size: 13px; } } @media screen and (max-width:1366px) { .in_news_art_tit h1 { font-size: 26px } .in_news_art article, .in_news_art article * { font-size: 15px; line-height: 30px } } @media screen and (max-width:1200px) { .in_news_art_tit h1 { font-size: 24px; line-height: 30px } .in_news_art article, .in_news_art article * { font-size: 14px; line-height: 28px } } @media screen and (max-width:1024px) { .in_news_art article iframe { width: 100% !important; } } @media screen and (max-width:959px) { .in_news_art_tit h1 { font-size: 20px } .in_news_art article, .in_news_art article * { font-size: 13px; line-height: 26px } } @media screen and (max-width:767px) { .in_news_art_tit { margin-bottom: 20px } .in_news_art_tit h1 { font-size: 18px; line-height: 24px } .in_news_art_tit h6 { font-size: 14px; text-align: center } } @media screen and (max-width:560px) { .in_news_art_tit h1 { font-size: 16px; line-height: 22px } } /* 内页 联系我们 */ .in_contact { box-sizing: border-box; padding: 60px 90px; position: relative; background: #f6f7f6 } .in_contact:before { content: ""; position: absolute; top: 70px; right: 30px; width: 120px; height: 164px; background: url(static/images/in_c_cont_bg.png) no-repeat center; background-size: contain } .in_c_form { width: 60% } /* 表单 */ #wpforms-130 { --input_font_size: 15px; --input_height: 46px } #wpforms-130 { width: 100%; margin: 0 auto; padding: 0 } #wpforms-form-130 { width: 100%; overflow: hidden } #wpforms-130 input, #wpforms-130 button { margin: 0; padding: 0; border: none; background: none } #wpforms-130 .wpforms-field { padding: 0; margin: 0 } #wpforms-130 .wpforms-field-label { font-size: 0 } #wpforms-130 .wpforms-required-label { position: absolute; top: 14px; left: 4px; font-size: 14px; color: #F00 } #wpforms-130 .wpforms-field { float: left; width: 48%; margin-right: 4%; background: transparent; padding-bottom: 20px; position: relative; overflow: hidden } #wpforms-130 .wpforms-field:nth-child(2n) { margin-right: 0 } #wpforms-130 .wpforms-field-textarea { width: 100% !important } #wpforms-130 input, #wpforms-130 textarea { width: 100%; max-width: 100% !important; min-width: 100%; font-size: var(--input_font_size); color: #000; height: var(--input_height); box-sizing: border-box; border: 1px solid var(--border_color); background: transparent; padding: 0 10px } #wpforms-130 input { line-height: var(--input_height) } #wpforms-130 textarea { line-height: 22px; min-height: 180px; padding: 10px; position: relative; } /* #wpforms-130-field_4-container::after { content: ""; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background-color: #ccc; border-bottom: 1px solid #999; border-right: 1px solid #999; } */ #wpforms-130 input::-webkit-input-placeholder, #wpforms-130 textarea::-webkit-input-placeholder { color: #999; font-size: var(--input_font_size) } #wpforms-130 input::-moz-placeholder, #wpforms-130 textarea::-moz-placeholder { color: #999; font-size: var(--input_font_size) } #wpforms-130 input::-ms-input-placeholder, #wpforms-130 textarea::-ms-input-placeholder { color: #999; font-size: var(--input_font_size) } #wpforms-130 #wpforms-130-field_1-error, #wpforms-130 #wpforms-130-field_2-error, #wpforms-130 #wpforms-130-field_3-error, #wpforms-130 #wpforms-130-field_4-error, #wpforms-130 #wpforms-130-field_5-error, #wpforms-130 #wpforms-130-field_6-error { position: absolute; font-size: 13px } #wpforms-130 .wpforms-field-container { width: 100%; overflow: hidden } #wpforms-130 .wpforms-submit-container { padding: 0 !important; box-sizing: border-box; width: 160px; height: 36px; background: var(--i_color); position: relative } #wpforms-130 .wpforms-submit-container:hover { background: var(--i_color3) } #wpforms-130 .wpforms-submit-container button { width: 100%; height: 36px; font-size: 15px; color: #FFF; line-height: 36px; cursor: pointer; position: relative; z-index: 2 } #wpforms-130 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } .in_c_cont { width: 35% } .in_c_cont_box { box-sizing: border-box; padding: 0 0; } .in_c_cont_box dt { margin-bottom: 16px; overflow: hidden; display: -webkit-flex; display: flex; flex-wrap: nowrap } .in_c_cont_box dt i { display: block; margin-right: 10px; width: 26px; height: 26px } .in_c_cont_box dt i img { height: 100% } .in_c_cont_box dt span, .in_c_cont_box dt span a { display: inline-block; font-size: 14px; color: #555; line-height: 26px } .in_c_cont_box dt span a { color: var(--i_color) !important; font-weight: bold } .in_c_cont_box span b { margin-right: 6px; font-weight: bold } .in_c_tit { margin-bottom: 40px; overflow: hidden } .in_c_tit h2 { font-size: 30px; color: #363636; font-weight: bold } .in_c_tit h6 { margin-top: 8px; font-size: 14px; color: #363636 } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) { .in_contact { padding: 60px 70px } .in_c_tit h2 { font-size: 28px } } @media screen and (max-width:1200px) { .in_contact { padding: 46px 60px } .in_c_tit { margin-bottom: 36px } .in_c_tit h2 { font-size: 26px } .in_c_tit h6 { font-size: 13px } #wpforms-130 { --input_font_size: 15px; --input_height: 42px } } @media screen and (max-width:959px) { .in_contact { margin-bottom: 36px; padding: 0 0; background: none } .in_contact:before { display: none } .in_c_cont_box dt i { width: 24px; height: 24px } .in_c_cont_box dt span, .in_c_cont_box dt span a { font-size: 13px; line-height: 24px } .in_c_tit { margin-bottom: 30px } .in_c_tit h2 { font-size: 20px } .in_c_tit h6 { font-size: 12px } #wpforms-130 { --input_font_size: 14px; --input_height: 38px } } @media screen and (max-width:767px) { .in_c_form, .in_c_cont { width: 100%; float: none !important } .in_c_form { margin-bottom: 38px } .in_c_tit { margin-bottom: 20px } .in_c_tit h2 { font-size: 18px } #wpforms-130 .wpforms-submit-container button { font-size: 16px } } @media screen and (max-width:560px) { .in_c_tit h2 { font-size: 16px } #wpforms-130 .wpforms-field { width: 100%; margin-right: 0 !important } #wpforms-130 .wpforms-submit-container button { font-size: 14px } } .in_c_map { height: 340px; margin-bottom: 100px; overflow: hidden } .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_c_map { margin-bottom: 80px } } @media screen and (max-width:1200px) { .in_c_map { margin-bottom: 70px } } @media screen and (max-width:959px) { .in_c_map { margin-bottom: 60px } } @media screen and (max-width:767px) { .in_c_map { height: 300px } } @media screen and (max-width:560px) { .in_c_map { margin-bottom: 50px } .in_c_map { height: 240px } } /* -------------------- 内页 产品列表 -------------------- */ .in_pro_bigtit { margin: 30px auto; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: flex-end; } .in_pro_bigtit .tit h1 { font-size: 38px; color: #000; font-weight: bold; text-transform: uppercase; } .in_pro_bigtit .tit b { font-size: 14px; color: #333 } /* 搜索 */ .in_products_search { --height: 36px } .in_products_search { margin-left: auto; overflow: hidden } .in_products_search form { width: 230px; margin: 0 auto; box-sizing: border-box; border: 1px solid var(--border_color); overflow: hidden } .in_products_search .search_ipt { float: left; box-sizing: border-box; padding-left: 10px; width: calc(100% - var(--height)); font-size: 14px; color: #333; line-height: var(--height) } .in_products_search .search_ipt::-webkit-input-placeholder { color: #AAA; font-size: 14px } .in_products_search .search_iptinput::-moz-placeholder { color: #AAA; font-size: 14px } .in_products_search .search_iptinput:-moz-placeholder { color: #AAA; font-size: 14px } .in_products_search .search_iptinput:-ms-input-placeholder { color: #AAA; font-size: 14px } .in_products_search .search_btn { float: right; width: var(--height); height: var(--height); line-height: var(--height); background: url(static/images/search.svg) no-repeat center; background-size: 20px; cursor: pointer } .in_products_search form:hover { border-color: var(--i_color) } @media screen and (max-width:1440px) { .in_pro_bigtit .tit h1 { font-size: 34px; } } @media screen and (max-width:1366px) { .in_pro_bigtit .tit h1 { font-size: 30px; } .in_products_search { --height: 36px } .in_products_search form { width: 240px } } @media screen and (max-width:1200px) { .in_pro_bigtit .tit h1 { font-size: 26px; } } @media screen and (max-width:959px) { .in_products_search form { width: 100% } } @media screen and (max-width:767px) { .in_pro_bigtit .tit h1 { font-size: 22px; } } @media screen and (max-width:560px) { .in_pro_bigtit .tit h1 { font-size: 18px; } .in_products_search { margin-top: 16px; width: 100%; } } /* 产品列表页 左右框架 */ .in_pro_box { --box_l_width: 23% } .in_pro_box { margin-bottom: 70px; overflow: hidden } .in_pro_box_l { float: left; width: var(--box_l_width); box-sizing: border-box; padding: 20px; background: #F5F5F5; overflow: hidden } .in_pro_box_r { float: right; width: calc(100% - var(--box_l_width) - 50px) } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) { .in_pro_box { --box_l_width: 24% } } @media screen and (max-width:1200px) { .in_pro_box { --box_l_width: 26% } .in_pro_box_r { width: calc(100% - var(--box_l_width) - 40px) } } @media screen and (max-width:1080px) { .in_pro_box { margin-bottom: 0 } } @media screen and (max-width:959px) { .in_pro_box_l, .in_pro_box_r { float: none !important; width: 100% } .in_pro_box_l { padding: 0 20px; margin-bottom: 30px } } @media screen and (max-width:767px) { .in_pro_box_l { margin-bottom: 24px } } @media screen and (max-width:560px) { .in_pro_box_l { margin-bottom: 20px } } /* 产品左侧分类导航 */ .in_pro_box_l .tit { margin-bottom: 20px; font-size: 20px; color: #363636; font-weight: 900; text-transform: uppercase } .fold_nav { overflow: hidden } .fold_nav>li { margin-bottom: 6px; position: relative } .fold_nav>li:last-child { margin-bottom: 0 } .fold_nav>li>a { display: block; width: 100%; position: relative } .fold_nav .arrow { display: none } .fold_nav .menu-item-has-children .arrow { position: absolute; top: 0; right: 0; display: block; width: 20px; height: 40px; background: url(static/images/public/arrow_down_hollow_hei.svg) no-repeat center; background-size: 16px; cursor: pointer; z-index: 2 } .fold_nav .menu-item-has-children .arrow.curr { background: url(static/images/public/arrow_up_hollow_hei.svg) no-repeat center; background-size: 16px } .fold_nav>li>a b { max-width: calc(100% - 58px); font-size: 15px; color: #363636; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; } .fold_nav>li>a i { font-size: 13px; color: #363636; margin-left: 4px; font-weight: bold } .fold_nav>li>a b, .fold_nav>li>a i { display: inline-block; line-height: 40px; vertical-align: middle } .fold_nav>.current-category-parent>a b, .fold_nav .current-menu-item>a b, .fold_nav .current-menu-item>a { color: var(--i_color) } /* .fold_nav li ul { display: none; padding-left: 20px } */ .fold_nav .current-category-parent ul { display: block } .fold_nav li li {} .fold_nav li li a { display: block; font-size: 14px; color: #363636; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .fold_nav>li>a:hover b, .fold_nav li li a:hover { color: var(--i_color); } @media screen and (max-width:1440px) { .in_pro_box_l .tit { font-size: 18px } } @media screen and (max-width:1366px) { .in_pro_box_l .tit { margin-bottom: 14px; font-size: 17px } } @media screen and (max-width:1200px) { .fold_nav>li>a b { font-size: 14px } .fold_nav li li a { font-size: 13px } } @media screen and (max-width:959px) { .in_pro_box_l .tit { margin-bottom: 0; font-size: 17px; line-height: 50px; background: url(static/images/public/arrow_down_hollow_hei.svg) no-repeat right center; background-size: 20px; } .in_pro_box_l .tit.on { background: url(static/images/public/arrow_up_hollow_hei.svg) no-repeat right center; background-size: 20px; } .fold_nav { padding-bottom: 10px; display: none; } } @media screen and (max-width:767px) { .in_pro_box_l .tit { font-size: 16px } .fold_nav>li>a b, .fold_nav>li>a i { line-height: 34px } } @media screen and (max-width:560px) { .in_pro_box_l .tit { font-size: 15px } .fold_nav>li>a b { font-size: 13px } } /* 产品列表 */ .in_products_list { margin-bottom: 30px; padding-bottom: 20px; display: -webkit-flex; display: flex; flex-wrap: wrap; overflow: hidden } .in_products_list li { float: left; padding-top: 40px; width: 25%; box-sizing: border-box; border: 1px solid var(--border_color); border-right: none; border-top: none; position: relative } @media screen and (min-width:768px) { .in_products_list li:nth-child(-n+4) { border-top: 1px solid var(--border_color) } .in_products_list li:nth-child(4n), .in_products_list li:last-child { border-right: 1px solid var(--border_color) } } .in_products_list .p_form { position: absolute; padding-left: 16px; top: 14px; right: 14px; cursor: pointer } .in_products_list .p_form i { display: inline-block; margin-right: 8px; width: 12px; height: 12px; box-sizing: border-box; border: 1px solid #CCC; position: relative; top: 1px } .in_products_list .p_form span { font-size: 14px; color: #666 } .in_products_list .p_form:hover i { background: var(--i_color) url(static/images/tick.svg) no-repeat center; background-size: 10px; border-color: var(--i_color) } .in_products_list .img { width: 100%; 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: 100%; height: 100%; object-fit: cover } .switch_img1 { display: block } .switch_img2 { display: none } .switch_img li:hover .switch_img1 { display: none } .switch_img li:hover .switch_img2 { display: block } .in_products_list .txt { padding: 14px } .in_products_list .txt h4 { font-size: 14px; color: #555; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .in_products_list li:hover { box-shadow: 0 6px 10px rgb(0 136 59 / 15%) } .in_products_list li:hover h4 { color: var(--i_color) } .in_products_list .p_form i:before { -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) { .in_products_list .txt h4 { font-size: 13px } } @media screen and (max-width:959px) {} @media screen and (max-width:767px) { .in_products_list { margin-bottom: 20px } .in_products_list li { width: 50% } .in_products_list li:nth-child(-n+2) { border-top: 1px solid var(--border_color) } .in_products_list li:nth-child(2n), .in_products_list li:last-child { border-right: 1px solid var(--border_color) } } @media screen and (max-width:560px) { .in_products_list { margin-bottom: 10px } } /* 弹出窗口 */ #mask_bg { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 9999999999998 } #mask_bg.show { display: block !important } .products_list_form { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; padding: 30px 30px 40px; background: rgb(255 255 255 / 100%); z-index: 9999999999999; overflow: auto } .products_list_form.show { display: block !important } .products_list_form .tit { margin-bottom: 40px } .products_list_form .tit p { text-align: center; font-size: 26px; color: var(--i_color); font-weight: bold; line-height: 30px } /* 表单 */ #wpforms-137 { --input_font_color: rgb(0 0 0 / 50%); --input_font_size: 14px; --input_height: 42px } #wpforms-137 { width: 100%; margin: 0 auto; padding: 0 } #wpforms-form-137 { width: 100%; overflow: hidden } #wpforms-137 input, #wpforms-137 button { margin: 0; padding: 0; border: none; background: none } #wpforms-137 .wpforms-field { padding: 0; margin: 0 } #wpforms-137 .wpforms-error-container { line-height: 16px } #wpforms-137 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; overflow: hidden } #wpforms-137 .wpforms-submit-container { padding: 0 !important; margin: 0 auto; width: 170px; height: 38px; background: var(--i_color); box-sizing: border-box; position: relative } #wpforms-137 .wpforms-field-text { float: left; margin-right: 4% } #wpforms-137 .wpforms-field-email, #wpforms-137 .wpforms-field-text { width: 48% !important } #wpforms-137 .wpforms-field-label { font-size: 0 } #wpforms-137 .wpforms-required-label { position: absolute; top: 16px; left: 5px; font-size: 16px; color: #F00 } #wpforms-137 .wpforms-field { width: 100%; margin-bottom: 6px; padding-bottom: 18px; background: transparent; position: relative; overflow: hidden } #wpforms-137 input { line-height: var(--input_height); height: var(--input_height) } #wpforms-137 textarea { padding-top: 7px !important; line-height: 20px; min-height: 100px } #wpforms-137 input, #wpforms-137 textarea { width: 100%; max-width: 100% !important; font-size: var(--input_font_size); color: #333; box-sizing: border-box; border: 1px solid rgb(0 0 0 / 30%); padding: 0 16px } #wpforms-137 input::-webkit-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-137 input::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-137 input::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-137 input::-ms-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-137 textarea::-webkit-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-137 textarea::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-137 textarea::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-137 textarea::-ms-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-137 #wpforms-137-field_1-error, #wpforms-137 #wpforms-137-field_2-error, #wpforms-137 #wpforms-137-field_3-error, #wpforms-137 #wpforms-137-field_5-error { position: absolute; font-size: 13px } #wpforms-137 .wpforms-submit-container button { width: 100%; height: 38px; font-size: 16px; color: #FFF; line-height: 38px; cursor: pointer; text-transform: uppercase; position: relative; z-index: 2 } #wpforms-137 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } #wpforms-137 .wpforms-submit-container:after { display: none; content: ""; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100% } #wpforms-137 .wpforms-submit-container:hover:after { display: block } #wpforms-137 .wpforms-submit-container:hover { background: var(--i_color3) } /* #wpforms-137 .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/public/close_1_hei.svg) no-repeat center; background-size: 30px; cursor: pointer } .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:1440px) {} @media screen and (max-width:1366px) { .products_list_form { width: 700px } } @media screen and (max-width:1200px) { .products_list_form { width: 640px } } @media screen and (max-width:959px) { .products_list_form { width: 560px } .products_list_form .tit p { font-size: 24px } } @media screen and (max-width:767px) { .products_list_form { width: 82% } .products_list_form .tit { margin-bottom: 20px } .products_list_form .tit p { font-size: 22px } #wpforms-137 { --input_font_size: 13px; --input_height: 36px } #wpforms-137 .wpforms-field { width: 100% !important; float: none !important; margin-right: 0 !important; margin-bottom: 0 !important; } } @media screen and (max-width:560px) { .products_list_form { padding: 30px 20px } .products_list_form .tit p { font-size: 16px } .close { top: 10px; right: 10px; width: 40px; height: 40px; background-size: 40px } #wpforms-202 .wpforms-submit-container button { font-size: 14px } } /* ----------------------- 内页 - 产品详情页 ----------------------- */ .pro_details { --img_size: 60.5%; --sm_pic_width: 92px } .pro_details { position: relative } /* 图片查看区 */ .products_pic_list { float: left; width: var(--img_size); background: #FFF; padding-bottom: 30px; border-bottom: 1px solid var(--border_color); position: relative; overflow: hidden } /* 左侧展示大图 */ .gallery-top-box { width: calc(100% - var(--sm_pic_width) - 20px); height: 100%; box-sizing: border-box; position: relative } .gallery-top { width: 100%; height: 100%; position: relative; overflow: hidden } .gallery-top .swiper-wrapper { display: flex; position: relative; width: 100%; height: 100%; z-index: 1 } .gallery-top .swiper-slide { height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-shrink: 0; position: relative; cursor: pointer; } .gallery-top .img { width: 100%; position: relative; overflow: hidden } .gallery-top .img:before { content: ""; display: block; padding-bottom: 100% } .gallery-top .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover } .gallery-top .swiper-slide>img { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 4 } /* 右侧缩略图列表 */ .gallery-thumbs-box { position: absolute; top: 0; right: 0; width: var(--sm_pic_width); height: calc(100% - 30px); box-sizing: border-box } .gallery-thumbs { height: 100%; overflow: hidden } .gallery-thumbs .swiper-slide { cursor: pointer } .gallery-thumbs .img { width: 100%; height: 100%; box-sizing: border-box; border: 2px solid var(--border_color); position: relative; overflow: hidden } .gallery-thumbs .img img { width: 100%; height: 100%; object-fit: contain } .gallery-thumbs .swiper-slide-thumb-active .img { border-color: var(--i_color) !important } /* 单击以放大 */ .cte { position: absolute; right: 20px; bottom: 20px; padding: 0 10px; background: rgb(0 0 0 / 5%); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; z-index: 2 } .cte p { padding-left: 20px; font-size: 12px; color: #666; line-height: 28px; background: url(static/images/search2.svg) no-repeat left center; background-size: 14px } /* 指示器 */ .ppl-pagination { position: absolute; left: 10px; bottom: 22px; z-index: 4; } .ppl-pagination .swiper-pagination-current { font-size: 20px; color: var(--i_color); } .swiper-pagination-total { font-size: 13px; color: #666; } /* 左右箭头 */ .ppl-button-prev, .ppl-button-next { position: absolute; top: 50%; transform: translate(0, -50%); width: 30px; height: 30px; 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; } .ppl-button-prev { left: 0; background: url(static/images/public/arrow_left_hollow_hei2.svg) no-repeat center; background-size: 18px } .ppl-button-next { right: 0; background: url(static/images/public/arrow_right_hollow_hei2.svg) no-repeat center; background-size: 18px } .ppl-button-prev:hover { background: url(static/images/arrow_left_hollow.svg) no-repeat center; background-size: 18px } .ppl-button-next:hover { background: url(static/images/arrow_right_hollow.svg) no-repeat center; background-size: 18px } .ppl-button-prev.swiper-button-disabled, .ppl-button-next.swiper-button-disabled { cursor: not-allowed; opacity: .3 } /* 右侧标题内容 */ .pro_tit { float: right; width: calc(100% - var(--img_size) - 50px) } .pro_tit>h1 { margin-bottom: 14px; font-size: 20px; color: #111; line-height: 28px; font-weight: bold } .pro_cont { padding-top: 18px; border-top: 1px solid var(--border_color); overflow: hidden } .pro_cont dt { margin-bottom: 10px; overflow: hidden; } .pro_cont, .pro_cont>b { font-size: 0; color: #FFF; } .pro_cont dt b { float: left; margin-right: 6px; font-size: 15px; color: #000; text-transform: capitalize } .pro_cont dt i { font-size: 15px; color: #000 } .pro_cont dt b, .pro_cont dt i { line-height: 26px } .pro_det_link { display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: center; margin-top: 34px } .pro_det_link dt { margin-right: 16px; background: var(--i_color); text-align: center; position: relative; } .pro_det_link dt::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--i_color3); } .pro_det_link dt h6 { text-align: center; padding: 0 50px; font-size: 14px; font-weight: bold; color: #FFF; line-height: 44px; text-transform: uppercase; cursor: pointer; position: relative; } .pro_det_link dt:hover::before { left: initial; right: 0; width: 100%; } .pro_det_link dt::before { -webkit-transition: all .5s ease; transition: all .5s ease } /* 分享 */ .p_share { text-align: center; position: relative; cursor: pointer } .p_share img { max-height: 24px; margin: 0 auto 4px } .p_share p { font-size: 14px; color: var(--i_color2); font-weight: bold } .n_share_list { display: none; position: absolute; border: 1px solid var(--border_color); background: #FFF; z-index: 9 } .n_share_list.on { display: block } .n_share_list li {} .n_share_list a { padding: 0 20px; display: -webkit-flex; display: flex; align-items: center; flex-wrap: nowrap } .n_share_list i { margin-right: 8px; width: 18px; height: 18px; overflow: hidden } .n_share_list img { width: 100%; height: 100%; object-fit: contain } .n_share_list b { font-size: 14px; color: #555; line-height: 36px } .n_share_list li:hover { background: rgb(0 0 0 / 6%) } /* 颜色选择 */ .pro_color { overflow: hidden } .pro_color dl { overflow: hidden } .pro_color dt { font-size: 15px; color: #000 } .pro_color dt b { margin-right: 6px; font-size: 15px; color: #000; text-transform: capitalize } .pro_color dt i { font-size: 15px; color: #000 } .pro_color #tab_tit1 { margin-top: 18px; display: -webkit-flex; display: flex; flex-wrap: wrap } .pro_color #tab_cont1, .pro_color #tab_tit1, .pro_color #tab_cont1>b, .pro_color #tab_tit1>b { font-size: 0; color: #FFF; } .pro_color .sublist { width: 18.4%; margin: 0 2% 4px 0; box-sizing: border-box; border: 1px solid var(--border_color); position: relative; cursor: pointer; overflow: hidden } .pro_color .current { border-color: var(--i_color) } .pro_color .sublist:nth-child(5n) { margin-right: 0 } .pro_color .sublist:before { content: ""; display: block; padding-bottom: 100% } .pro_color .sublist img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover } @media screen and (max-width:1440px) { .pro_tit { float: right; width: calc(100% - var(--img_size) - 40px) } .pro_tit>h1 { font-size: 18px; line-height: 26px } .pro_cont dt b { font-size: 15px } .pro_det_link { margin-top: 24px } } @media screen and (max-width:1366px) { .pro_details { --sm_pic_width: 80px } .pro_tit>h1 { margin-bottom: 14px; font-size: 16px; line-height: 22px } .pro_cont { padding-top: 14px } .pro_cont dt { margin-bottom: 8px } .pro_cont dt b, .pro_cont dt i { font-size: 14px } } @media screen and (max-width:1200px) { .pro_details { --sm_pic_width: 116px } .products_pic_list, .pro_tit { float: none; width: 100% } .pro_tit { margin-top: 46px } .n_share_list b { font-size: 13px } } @media screen and (max-width:959px) { .pro_details { --sm_pic_width: 130px } } @media screen and (max-width:767px) { .gallery-top-box { width: 100% } .gallery-thumbs-box { position: initial; width: 100%; height: auto } .gallery-thumbs .swiper-wrapper { display: flex; position: relative; width: 100%; height: 100%; z-index: 1 } .gallery-thumbs .swiper-slide { height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-shrink: 0; position: relative; cursor: pointer; } .gallery-thumbs .img { height: initial } .gallery-thumbs .img:before { content: ""; display: block; padding-bottom: 80% } .gallery-thumbs .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } } @media screen and (max-width:560px) {} /* 产品详情内容 */ .pro_det_cont { margin-top: 40px } .pro_det_tab_nav { margin-bottom: 40px; position: relative } .pro_det_tab_nav:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #CFCFCF } .pro_det_tab_nav ul { display:-webkit-flex; display:flex; flex-wrap:nowrap; } .pro_det_tab_nav li { text-align: center; width: 100%; cursor: pointer; box-sizing: border-box; position: relative; background: rgb(0 0 0 / 4%); 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 { font-size: 16px; font-weight: bold; color: #555; line-height: 52px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase } .pro_det_tab_nav .current { background: var(--i_color) } .pro_det_tab_nav .current p { color: #FFF !important } .pro_det_show {} .pro_det_show .sublist { display: none } .pro_det_show .sublist:first-child { display: block } /* Table style */ article table { margin-bottom: 20px; max-width: 100% !important; background: #FFF; border-collapse: collapse !important; border-spacing: 0 !important } article tbody { width: 100% !important; max-width: 100% !important } article table tr, article table td { width: auto; max-width: 100% !important } article table tr, article table td, article table tr p, article table td p { margin: 0; padding: 0 } article table td { box-sizing: border-box; padding: 4px; /* border: 1px solid var(--border_color) */ border: none; } article tr:nth-child(odd) { background: rgba(0, 0, 0, .03) } .pro_det_show article img { display: block; margin: 0 auto; max-width: 100% !important; height: initial !important; box-sizing: border-box; border: 1px solid var(--border_color); } .pro_det_show article video { display: block; max-width: 100%; text-align: center; margin: 0 auto } .pro_det_show article { font-size: 14px; color: #000; line-height: 24px; } @media screen and (max-width:1440px) { } @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) { .pro_det_tab_nav li p { font-size: 15px } } @media screen and (max-width:1080px) { .pro_det_tab_nav ul{flex-wrap: wrap;} .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) { .pro_det_tab_nav { margin-bottom: 20px } .pro_det_cont { margin-top: 30px } } @media screen and (max-width:560px) { .pro_det_tab_nav li p { padding: 0 4px; font-size: 12px; line-height: 44px } .pro_det_show article { font-size: 14px; line-height: 22px; } article table { min-width: 90% !important; } article table td { padding: 8px 4px } } /* 相关产品 */ .in_related_products { margin-bottom: 70px } @media screen and (max-width:959px) { .in_related_products { margin-bottom: 50px } } @media screen and (max-width:560px) { .in_related_products { margin-bottom: 40px } } /* 内页 about */ .in_ab_cont {} .in_ab_txt { float: left; width: 48% } .in_ab_cont .in_tit_s { text-align: left } .in_ab_cont .in_tit_s h2 { margin-bottom: 22px } .in_ab_pic { float: right; width: 48% } .in_ab_pic img { width: 100% } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) {} @media screen and (max-width:959px) { .in_ab_cont {} .in_ab_txt, .in_ab_pic { float: none; width: 100% } .in_ab_txt { margin-bottom: 40px } } @media screen and (max-width:767px) { .in_ab_txt { margin-bottom: 30px } } @media screen and (max-width:560px) { .in_ab_txt { margin-bottom: 20px } } /* 历程 */ .in_ab_history { padding-bottom: 0 !important; background: url(static/images/in_th2_bg.jpg) no-repeat center; background-size: cover; overflow: hidden } .history_list { width: 100%; height: 774px; margin: 0 auto; overflow-x: hidden; overflow-y: auto; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; background: url(static/images/in_ab_history_line.png) repeat-y top center } .history_list ul { width: 54%; padding-bottom: 30px; margin: 0 auto; overflow: hidden; } .history_list:before, .history_list:after { content: ""; position: absolute; left: 50%; transform: translate(-50%, 0) } .history_list:before { top: 0; width: 21px; height: 21px; border: 1px solid var(--i_color2); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50% } .history_list:after { top: 4px; width: 14px; height: 14px; background: var(--i_color); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50% } /*滚动条*/ .history_list::-webkit-scrollbar { width: 0; height: 8px } .history_list::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #333 } .history_list::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .history_list li { float: left; width: 50%; margin-top: 60px; box-sizing: border-box; position: relative } .history_list li:first-child { margin-top: 0 } .history_list li:nth-child(2n) { float: right } .history_list li:nth-child(odd) { padding-right: 60px } .history_list li:nth-child(even) { padding-left: 60px } .history_list .txt { margin-bottom: 24px } .history_list li:nth-child(odd) { text-align: right } .history_list .txt h6 { font-size: 18px; color: var(--i_color); line-height: 20px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 } .history_list .img { width: 100%; position: relative; overflow: hidden } .history_list .img:before { content: ""; display: block; padding-bottom: 62% } .history_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover } @media screen and (max-width:1600px) { .history_list ul { width: 59%; } } @media screen and (max-width:1440px) { .history_list { height: 696px } .history_list ul { width: 63%; } .history_list .txt h6 { font-size: 17px } } @media screen and (max-width:1366px) { .history_list { height: 662px } .history_list .txt h6 { font-size: 16px } } @media screen and (max-width:1200px) { .history_list { height: 642px } .history_list ul { width: 69%; } .history_list .txt { margin-bottom: 18px } .history_list .txt h6 { font-size: 14px } } @media screen and (max-width:959px) { .history_list { width: 100%; height: 400px } .history_list ul { width: 94%; } .history_list:before { width: 17px; height: 17px } .history_list:after { width: 10px; height: 10px } .history_list li:nth-child(odd) { padding-right: 40px } .history_list li:nth-child(even) { padding-left: 40px } .history_list li:nth-child(odd):before { right: -8px } .history_list li:nth-child(odd):after { right: -5px } .history_list li:nth-child(even):before { left: -10px } .history_list li:nth-child(even):after { left: -6px } } @media screen and (max-width:767px) { .history_list .txt h6 { font-size: 13px } } @media screen and (max-width:560px) { .history_list { height: 340px } .history_list li:nth-child(odd) { padding-right: 30px } .history_list li:nth-child(even) { padding-left: 30px } .history_list .txt { margin-bottom: 14px } .history_list .txt h6 { font-size: 12px; line-height: 18px } } /* 视频 */ .in_ab_pp { text-align: center } .in_ab_video { width: 74%; margin: 0 auto; position: relative; overflow: hidden } .in_ab_video:before { content: ""; display: block; padding-bottom: 56.25% } .in_ab_video iframe, .in_ab_video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) {} @media screen and (max-width:959px) { .in_ab_video { width: 100% } } @media screen and (max-width:767px) {} @media screen and (max-width:560px) {} /* 证书 */ .in_ab_zs { background: url(static/images/in_th2_bg.jpg) no-repeat center; background-size: cover; overflow: hidden; } .in_zs_list { 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; -webkit-transform: scale(.9, .9); -moz-transform: scale(.9, .9); transform: scale(.9, .9) } .in_zs_list .img { display: block; width: 100%; box-sizing: border-box; border: 4px solid rgb(182 107 40); position: relative; top: 0; overflow: hidden; z-index: 2 } .in_zs_list .img:before { content: ""; display: block; padding-bottom: 141.6% } .in_zs_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover } .in_zs_list .swiper-slide:hover { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1) } .in_zs_list .swiper-slide { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease } /* 指示器 */ .h-pagination { display: block; text-align: center; margin: 30px auto 0 } .h-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; cursor: pointer; } .h-pagination .swiper-pagination-bullet-active { position: relative; background: var(--i_color) } /* 左右箭头 */ .h-button-prev, .h-button-next { position: absolute; top: 50%; transform: translate(0, -50%); width: 30px; height: 80px; background: #F9F9F9; z-index: 999; cursor: pointer; outline: none } .h-button-prev { left: -60px; background: url(static/images/public/arrow_left_hollow_hei2.svg) no-repeat center; background-size: 20px } .h-button-next { right: -60px; background: url(static/images/public/arrow_right_hollow_hei2.svg) no-repeat center; background-size: 20px } .h-button-prev:hover { background: url(static/images/arrow_left_hollow.svg) no-repeat center; background-size: 20px } .h-button-next:hover { background: url(static/images/arrow_right_hollow.svg) no-repeat center; background-size: 20px } .in_zs_list .swiper-button-disabled { opacity: .2; cursor: not-allowed } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) { .h-button-prev, .h-button-next { display: none } } @media screen and (max-width:1080px) {} @media screen and (max-width:959px) {} @media screen and (max-width:767px) { .h-pagination { margin: 24px auto 0 } } @media screen and (max-width:560px) { .h-pagination { margin: 14px auto 0 } .h-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 3px } } /* 内页 承诺 */ .in_pm_cont { overflow: hidden } .in_pm_cont h2 { max-width: 75%; margin: 0 auto 22px; text-transform: uppercase } .in_pm_cont article {} @media screen and (max-width:959px) { .in_pm_cont h2 { max-width: 80%; margin: 0 auto 16px } } @media screen and (max-width:767px) { .in_pm_cont h2 { max-width: 90% } } @media screen and (max-width:560px) { .in_pm_cont h2 { max-width: 100% } } .in_pm_textlist { padding: 44px 0; background: #f3f1f2 } .in_pm_textlist dl { display: -webkit-flex; display: flex; flex-wrap: nowrap; justify-content: space-between } .in_pm_textlist dt { width: 28% } .in_pm_textlist dt h3 { margin-bottom: 16px; font-size: 18px; color: var(--i_color2); font-weight: 900 } @media screen and (max-width:1200px) { .in_pm_textlist { padding: 30px 0 } .in_pm_textlist dt h3 { margin-bottom: 12px; font-size: 17px } } @media screen and (max-width:959px) { .in_pm_textlist dt { width: 30% } .in_pm_textlist dt h3 { font-size: 16px } } @media screen and (max-width:767px) { .in_pm_textlist dl { flex-wrap: wrap } .in_pm_textlist dt { width: 100%; margin-bottom: 16px } .in_pm_textlist dt h3 { font-size: 15px } } @media screen and (max-width:560px) { .in_pm_textlist dt h3 { margin-bottom: 8px; font-size: 14px } } .in_qc {} .in_qc ul { margin-top: -46px; display: -webkit-flex; display: flex; flex-wrap: wrap } .in_qc li { width: 22.75%; margin: 46px 3% 0 0 } .in_qc li:nth-child(4n) { margin-right: 0 } .in_qc .img { width: 100%; position: relative; overflow: hidden } .in_qc .img:before { content: ""; display: block; padding-bottom: 80.625% } .in_qc .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover } .in_qc .txt { margin-top: 10px; text-align: center } .in_qc .txt p { font-size: 15px; color: #333 } @media screen and (max-width:767px) { .in_qc ul { margin-top: -20px; } .in_qc li { width: 48%; margin: 30px 4% 0 0 } .in_qc li:nth-child(2n) { margin-right: 0 } .in_qc .txt p { font-size: 13px } } @media screen and (max-width:560px) { .in_qc .txt p { font-size: 12px } } .in_report {} .in_report_listbox { background: #f3f1f2 } .in_report_list { margin: 0 auto; position: relative; overflow: hidden; z-index: 1 } .in_report_list .swiper-wrapper { display: flex; position: relative; width: 100%; z-index: 1 } .in_report_list .swiper-slide { flex-shrink: 0; position: relative; cursor: pointer; -webkit-transform: scale(.9, .9); -moz-transform: scale(.9, .9); transform: scale(.9, .9) } .in_report_list .img { display: block; width: 100%; box-sizing: border-box; border: 4px solid rgb(182 107 40); position: relative; top: 0; overflow: hidden; z-index: 2 } .in_report_list .img:before { content: ""; display: block; padding-bottom: 141.6% } .in_report_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover } .in_report_list .swiper-slide:hover { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1) } .in_report_list .swiper-slide { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease } /* 指示器 */ .report-pagination { display: block; text-align: center; margin: 24px auto 0 } .report-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 } .report-pagination .swiper-pagination-bullet-active { position: relative; background: var(--i_color) } /* 左右箭头 */ .report-button-prev, .report-button-next { position: absolute; top: 50%; transform: translate(0, -50%); width: 30px; height: 80px; background: #F9F9F9; z-index: 999; cursor: pointer; outline: none } .report-button-prev { left: -60px; background: url(static/images/public/arrow_left_hollow_hei2.svg) no-repeat center; background-size: 20px } .report-button-next { right: -60px; background: url(static/images/public/arrow_right_hollow_hei2.svg) no-repeat center; background-size: 20px } .report-button-prev:hover { background: url(static/images/arrow_left_hollow.svg) no-repeat center; background-size: 20px } .report-button-next:hover { background: url(static/images/arrow_right_hollow.svg) no-repeat center; background-size: 20px } .in_zs_list .swiper-button-disabled { opacity: .2; cursor: not-allowed } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) { .report-button-prev, .report-button-next { display: none } } @media screen and (max-width:1080px) {} @media screen and (max-width:959px) {} @media screen and (max-width:767px) { .report-pagination { margin: 24px auto 0 } } @media screen and (max-width:560px) { .report-pagination { margin: 14px auto 0 } .report-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 3px } } /* 内页 TECHNOLOGY */ .in_technology_tit { margin-bottom: 46px; text-align: center } /* .in_technology_tit h2{margin-bottom:16px; font-size:22px; color:#363636; font-weight:bold} .in_technology_tit h6{font-size:16px; color:#444; line-height:20px} */ .in_technology_tit .in_tit_l h2 { margin-bottom: 20px; color: #444 } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) { .in_technology_tit { margin-bottom: 30px } } @media screen and (max-width:959px) { .in_technology_tit .in_tit_l h2 { margin-bottom: 14px } } @media screen and (max-width:767px) {} @media screen and (max-width:560px) {} /* TECHNOLOGY 分类导航 */ .in_th_nav { margin: 0 auto 60px; text-align: center; overflow: hidden } .in_th_nav dl { display: -webkit-flex; display: flex; justify-content: center; flex-wrap: nowrap } .in_th_nav dt { margin: 0 10px; background: var(--i_color); display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; justify-content: center } .in_th_nav dt a { display: block; width: 280px; font-size: 18px; color: #FFF; line-height: 50px; font-weight: 600 } .in_th_nav dt:hover { background: var(--i_color3); } @media screen and (max-width:1440px) { .in_th_nav dt a { font-size: 17px; width: 270px; line-height: 46px } } @media screen and (max-width:1366px) { .in_th_nav { margin-bottom: 46px; } .in_th_nav dt a { font-size: 16px } } @media screen and (max-width:1200px) { .in_th_nav dt a { font-size: 15px; width: 250px; line-height: 44px } } @media screen and (max-width:959px) { .in_th_nav { margin: 0 auto 50px } .in_th_nav dt a { font-size: 14px; width: 220px; line-height: 40px } } @media screen and (max-width:767px) { .in_th_nav dt { width: 30%; padding: 10px 0; margin: 0 1% } .in_th_nav dt a { padding: 0 10px; font-size: 13px; line-height: 18px; width: auto } } @media screen and (max-width:560px) { .in_th_nav { margin: 0 auto 36px } .in_th_nav dt { padding: 6px 0 } .in_th_nav dt a { font-size: 12px; line-height: 14px } } /* 第一段 */ .in_th1 {} .in_th_tit { margin-bottom: 40px; text-align: center; position: relative } .in_th_tit h2 { font-size: 24px; color: #333; font-weight: 900; text-transform: uppercase } .in_th1_img { float: left; width: 48% } .in_th1_img img { display: block; margin: 0 auto 20px; max-width: 100%; max-height: 400px; object-fit: contain } .in_th1_cont { float: right; width: 49% } .in_th1_cont dt { margin-bottom: 16px } .in_th_txt dt { overflow: hidden } .in_th_txt h2 { margin-bottom: 10px; font-size: 18px; color: var(--i_color); font-weight: 900 } /* 第二段 */ .in_th2 { background: url(static/images/in_th2_bg.jpg) no-repeat center; background-size: cover; overflow: hidden } .in_th2_cont { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } .in_th2_cont dt { width: 48%; margin-bottom: 16px } .in_th2_img { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; overflow: hidden } .in_th2_img dt { width: 31.33%; margin: 38px 3% 10px 0; position: relative; overflow: hidden } .in_th2_img dt:before { content: ""; display: block; padding-bottom: 61% } .in_th2_img dt:nth-child(3n) { margin-bottom: 6px; margin-right: 0 } .in_th2_img dt img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain } /* 第三段 */ .in_th3 {} .in_th3_cont { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } .in_th3_cont dt { margin-bottom: 26px; width: 31% } .in_th3_cont dt.hideen { display: none } .in_th3_cont .ico {} .in_th3_cont .ico img { width: 76px; height: 76px; object-fit: contain } .in_th3_cont .fr { width: calc(100% - 90px) } .in_th3_cont dt h2 { color: var(--i_color2) } .in_th3_text { text-align: center; font-size: 18px; color: #333; font-weight: 900 } @media screen and (max-width:1600px) { .in_th_tit h2 { font-size: 24px } } @media screen and (max-width:1366px) { .in_th_tit i { font-size: 42px } .in_th_tit h2 { font-size: 22px } .in_th_txt h2 { font-weight: 600 } .in_th_txt h6 { font-size: 13px } .in_th2_img { margin-top: 20px } .in_th3_text { padding-bottom: 20px; font-size: 17px } } @media screen and (max-width:1200px) { .in_th_tit { margin-bottom: 30px } .in_th_tit i { font-size: 36px; line-height: 50px } .in_th_tit h2 { font-size: 20px } .in_th_txt h2 { font-size: 16px } .in_th3_text { font-size: 16px } } @media screen and (max-width:1080px) { .in_th3_cont dt { width: 48% } .in_th3_text { font-size: 15px } } @media screen and (max-width:959px) { .in_th_tit i { font-size: 32px; line-height: 44px } .in_th_tit h2 { font-size: 18px } .in_th1_img, .in_th1_cont { float: none; width: 100% } .in_th1_img img { margin: 0 auto 20px } .in_th1_cont { margin-top: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } .in_th_txt dt { width: 48% } .in_th3_text { margin-top: 10px } } @media screen and (max-width:767px) { .in_th_tit i { font-size: 30px; line-height: 40px } .in_th_tit h2 { font-size: 20px } .in_th_txt dt { width: 100% !important } .in_th2_img dt { width: 100%; margin: 0 0 30px 0 } .in_th3_cont .ico img { width: 70px; height: 70px } .in_th3_text { font-size: 14px; margin-top: 0px } } @media screen and (max-width:560px) { .in_th_tit { margin-bottom: 24px } .in_th_tit i { display: none } .in_th_tit h2 { font-size: 16px } .in_th_txt h2 { font-size: 15px } .in_th_txt h6 { font-size: 12px; line-height: 20px } .in_th3_cont dt { margin-bottom: 16px } .in_th3_text { font-size: 13px } } /* 隐私政策 */ .privacy_cont {} .privacy_cont .tit { margin-bottom: 30px } .privacy_cont .tit h1 { font-size: 24px; text-align: center; font-weight: bold } .privacy_cont article, .privacy_cont article * { font-size: 14px; color: #666; line-height: 24px } /* 表单提交感谢页 */ .thanks { margin: 80px auto 300px; text-align: center; overflow: hidden } .thanks h1 { margin-bottom: 20px; font-size: 30px; color: #222; font-weight: bold } .thanks a { display: inline-block; padding: 0 40px; background: var(--i_color); line-height: 38px; font-size: 15px; color: #FFF } @media screen and (max-width:1200px) { .thanks { margin-top: 60px } .thanks h1 { font-size: 26px } } @media screen and (max-width:767px) { .thanks { margin: 40px auto 70px } .thanks h1 { font-size: 22px } } @media screen and (max-width:560px) { .thanks h1 { 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 h2 { 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 h2 { font-size: 180px } } @media screen and (max-width:767px) { .in404_text h2 { font-size: 140px } .in404_text h6 { font-size: 16px } .in404_text a { font-size: 14px } } @media screen and (max-width:560px) { .in404_text h2 { font-size: 70px } .in404_text h6 { margin: 10px auto 18px; font-size: 14px; line-height: 20px } .in404_text a { font-size: 13px } } .in_search_num { text-align: center; } .input_hideen{display: none !important;} /* viewer.js查看器 自定义样式 */ .viewer-footer { position: initial !important; width: 0; bottom: initial !important; transform: none !important; overflow: initial !important; } .viewer-toolbar>ul { width: 100%; height: 74px } .viewer-toolbar li { display: none } .viewer-toolbar .viewer-prev, .viewer-toolbar .viewer-next { display: block !important; position: absolute; top: 50%; transform: translate(0, -50%); width: 60px; height: 60px; float: none !important; } .viewer-toolbar>ul>li:focus { position: absolute !important; box-shadow: none !important } .viewer-toolbar .viewer-prev { left: 20px !important } .viewer-toolbar .viewer-next { right: 20px !important } .viewer-toolbar .viewer-prev::before, .viewer-toolbar .viewer-next::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; margin: 0 !important } .viewer-toolbar .viewer-prev::before { background: url(static/images/public/arrow_left_hollow_bai2.svg) no-repeat center !important; background-size: contain !important } .viewer-toolbar .viewer-next::before { background: url(static/images/public/arrow_right_hollow_bai2.svg) no-repeat center !important; background-size: contain !important } .viewer-toolbar .viewer-prev:hover, .viewer-toolbar .viewer-next:hover { background-color: var(--i_color3); } @media screen and (max-width:767px) { .viewer-toolbar .viewer-prev, .viewer-toolbar .viewer-next { width: 40px; height: 40px } .viewer-toolbar .viewer-prev::before, .viewer-toolbar .viewer-next::before { width: 14px; height: 14px } }