/* Theme Name: zhongying Theme URI: Description: Version: Author: zhao Author URI: */ @charset "utf-8"; /* 初始化 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img{margin:0; padding:0} body, button, input, select, textarea{font:normal 13px Arial, system-ui, -apple-system, Microsoft Yahei, tahoma, sans-serif} button, input, textarea, select{font-size:inherit; font-weight:inherit; border:0; outline:0} 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} /* 全局表单文字 */ 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} table,th,td{ border-collapse:collapse; border:1px solid rgba(0,0,0,0.1); padding:10px; } @font-face { font-family: Barlow; src: url("static/css/Barlow-Regular.otf"); } @font-face { font-family: Barlow_bold; src: url("static/css/Barlow-Extra-Bold.ttf"); } *{ font-family: Arial; } .fl{float:left} .fr{float:right} .container{overflow:hidden} .pr{position:relative} .clear{clear:both} .wrap{width:74%; max-width:1500px; margin:0 auto} .wrap_top{width:74%; margin:0 auto} .wrap_84{width: 84%;margin: 0 auto;} .wrap2 {width: 74%;margin: 0 auto;} html { scroll-behavior: smooth; } @media screen and (max-width:1620px){ .wrap{width:86%} } @media screen and (max-width:1500px){ .wrap{width:1280px} .wrap2 {width: 92%;} } @media screen and (max-width:1366px){ .wrap{width:92%} .wrap_top{width:84%; margin:0 auto} .wrap2 {width: 94%;} } @media screen and (max-width:1200px){ .wrap{width:94%} .wrap_84{width: 94%;} } html{font-size: 100px;} :root { --i_color: #EEBC22; /* 全局颜色 */ --i_color2:#242424; /* 全局副颜色 */ --header_height: 96px; /* 头部高度 */ --top_line: 44px; /* 头部蓝色装饰条 */ --border_color: rgba(0, 0, 0, .1); /* 默认边框颜色 */ --f_menu_height: 50px /* 移动端底部固定菜单高度 */ } @media screen and (max-width:1600px) { :root {--header_height: 90px} } @media screen and (max-width:1440px) { :root {--header_height: 84px} } @media screen and (max-width:1366px) { :root {--top_line: 36px} } @media screen and (max-width:1200px) {} @media screen and (max-width:959px) { :root {--header_height: 74px} } @media screen and (max-width:767px) { :root {--header_height: 66px;--border_color: rgba(0, 0, 0, .06)} } @media screen and (max-width:560px) { :root {--header_height: 60px} } header {width: 100%;height: calc(var(--header_height) + var(--top_line));position: relative;z-index: 2014} /* 顶部 */ .top_line {height: var(--top_line);background: var(--i_color2);position: relative;z-index: 2013} .top_list {float: right} .top_dl {float: left;margin-right: 14px;padding-right: 14px;position: relative} .top_dl:after { content: ""; position: absolute; top: 50%; transform: translate(0, -50%); right: 0; width: 1px; height: 16px; background: rgb(255 255 255 / 30%) } .top_dl a {display: block;font-size: 16px;color: #FFF;line-height: var(--top_line)} /* 语言按钮 */ .top_language {float: left;height: var(--top_line);padding-right: 11px;position: relative;cursor: pointer} .top_language:after { content: ""; position: absolute; top: 50%; transform: translate(0, -50%); right: 0; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #FFF } .top_language.on:after {border-top: none;border-bottom: 6px solid #FFF} .top_language>i { width: 20px; height: 20px; background: url(static/imgs/word.png) no-repeat center; background-size: contain; cursor: pointer } .top_language>p {font-size: 0px;line-height: var(--top_line);color: #FFF;font-weight: 300} .top_language>i, .top_language p {display: inline-block;vertical-align: middle} /* 语言列表 */ .top_language_list { display: none; position: absolute; top: var(--top_line); left: 0; background: var(--i_color2); z-index: 22 } .top_language_list.on {display: block !important} .top_language_list li {border-bottom: 1px solid var(--border_color)} .top_language_list a>span { display: block; padding: 0 14px; min-width: 100px; overflow: hidden } .top_language_list img, .top_language_list .trp-ls-language-name {display: inline-block;vertical-align: middle} .top_language_list .trp-ls-language-name { margin-left: 8px; font-size: 13px; color: #FFF; line-height: 32px } .top_language_list li:hover {background: rgb(255 255 255 / 15%)} /* 社媒图标 */ .top_ico_list { float: left; height: var(--top_line); display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: center; overflow: hidden } .top_ico_list dt {margin-left: 30px;position: relative} .top_ico_list dt:first-child::before { content: ""; position: absolute; top: 50%; transform: translate(0, -50%); left: -15px; width: 1px; height: 16px; background: rgb(255 255 255 / 30%) } .top_ico_list dt img {height: 20px} @media screen and (max-width:1440px) { .top_dl a {font-size: 15px} .top_language {padding-right: 18px} .top_language>p {font-size: 12px} .top_ico_list dt img {height: 18px} .top_language>i {width: 18px;height: 18px;} } @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) { .top_dl a {font-size: 14px} .top_language>i {width: 22px;height: 22px} .top_ico_list dt img {height: 16px} .top_language>i {width: 16px;height: 16px;} } @media screen and (max-width:959px) {} @media screen and (max-width:767px) { .top_dl a {font-size: 13px} } @media screen and (max-width:560px) { .top_dl {padding-right: 10px;margin-right: 10px} .top_dl a {font-size: 12px} .top_ico_list dt {margin-left: 20px} .top_ico_list dt:before {left: -10px} } .header_cont {position: relative;top: 0;left: 0;width: 100%;height: var(--header_height);background: #FFF;z-index: 2012} .header_cont>.wrap2 {height: var(--header_height)} @media screen and (max-width:959px) { .header_cont>.wrap2 {width: 100%} } /* logo */ .logo {float: left;height: var(--header_height);display: -webkit-flex;display: flex;align-items: center} .logo a {} .logo img {display: block;height: 75px} @media screen and (max-width:1600px) { .logo img {height: 52px} } @media screen and (max-width:1440px) { .logo img {height: 50px} } @media screen and (max-width:1280px) { .logo img {height: 48px} } @media screen and (max-width:1200px) { .logo {height: calc(var(--header_height) / 2)} .logo img {height: 0.45rem} } @media screen and (max-width:959px) { .logo {margin-left: 3%;height: var(--header_height)} } /* PC端导航样式 */ .cd-primary-nav {height: 100%; position: absolute;bottom: 50%;transform: translate(0, 50%);right: 7%;z-index: 1} @media only screen and (min-width:960px) { .i_nav {height: 100%; display: flex;flex-wrap: nowrap} .i_nav>li {float: left;text-align: center;position: relative;display: flex;display: -webkit-flex;align-items: center;} .i_nav>li:not(:first-child) {margin-left: 55px} .i_nav>li>a { display: block; font-size: 18px; color: #0C0C0C; line-height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase } .i_nav>.current-menu-item>a, .i_nav>.current-category-ancestor>a, .i_nav>.current-post-ancestor>a, .i_nav>li:hover>a {color: var(--i_color) !important} .i_nav>.current-menu-item:before, .i_nav>.current-category-ancestor:before, .i_nav>.current-post-ancestor:before, .i_nav>li:hover:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0px; background: var(--i_color) } /* 二级下拉 */ .i_nav>li>.sub-menu { display: none; position: absolute; left: 0; min-width: 100%; background: #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, .2); z-index: 2 } .i_nav>li>.sub-menu li { position: relative; width: 100%; border-bottom: 1px solid var(--border_color); text-align: left } .i_nav>li>.sub-menu li:before { content: ""; position: absolute; top: 50%; transform: translate(0, -50%); left: 0; width: 2px; height: 0; background: var(--i_color) } .i_nav>li>.sub-menu li:last-child {border-bottom: none} .i_nav>li>.sub-menu li a { display: block; padding: 0 20px; font-size: 14px; color: #555; line-height: 42px; font-weight: 300; white-space: nowrap } .i_nav .sub-menu a {text-transform: capitalize} .i_nav>li>.sub-menu>li:hover:before {height: 20px} .i_nav>li>.sub-menu>li:hover>a {color: var(--i_color)} .i_nav>li:hover>.sub-menu {display: block} .i_nav li:hover .sub-menu:before {background: rgba(0, 0, 0, .6)} .i_nav .sub-menu:before, .i_nav .sub-menu li, .i_nav>li>.sub-menu li:before { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } } @media screen and (max-width:1760px) { .cd-primary-nav {right: 5%} .i_nav>li>a {font-size: 17px} } @media screen and (max-width:1600px) { .cd-primary-nav {right: 4%} .i_nav>li:not(:first-child) {margin-left: 30px} .i_nav>li>a {font-size: 16px} } @media screen and (max-width:1440px) { .i_nav>li:not(:first-child) {margin-left: 26px} .i_nav>li>a {font-size: 15px} } @media screen and (max-width:1366px) { .i_nav>li:not(:first-child) {margin-left: 24px} } @media screen and (max-width:1280px) { .i_nav>li:not(:first-child) {margin-left: 22px} .i_nav>li>a {font-size: 14px} } @media screen and (max-width:1200px) { .cd-primary-nav {right: 0;width: 100%;bottom: 0;transform: none} .i_nav {justify-content: space-between} .i_nav>li:not(:first-child) {margin-left: 6px} .i_nav>li>a {font-size: 13px;line-height: calc(var(--header_height) / 2)} } @media screen and (max-width:1080px) {} /* 移动端导航按钮 */ .nav-trigger {display: none} @media only screen and (max-width:959px) { .cd-primary-nav .nav-trigger {display: table !important;width: var(--header_height);height: 100%;text-transform: uppercase;color: #25283D;font-weight: bold;right: 0;box-sizing: border-box} .cd-primary-nav .nav-trigger span {display: table-cell;vertical-align: middle} .cd-primary-nav .nav-trigger em, .nav-trigger em::after,.nav-trigger em::before {display: block;position: relative;height: 2px;width: 22px;background-color: #333;-webkit-backface-visibility: hidden;backface-visibility: hidden} .cd-primary-nav .nav-trigger em {margin: 0 auto;-webkit-transition: background-color .2s;transition: background-color .2s} .cd-primary-nav .nav-trigger em::before, .nav-trigger em::after {position: absolute;content: '';left: 0;-webkit-transition: -webkit-transform .2s;transition: -webkit-transform .2s;transition: transform .2s;transition: transform .2s, -webkit-transform .2s} .cd-primary-nav .nav-trigger em::before {-webkit-transform: translateY(-6px);-ms-transform: translateY(-6px);transform: translateY(-6px)} .cd-primary-nav .nav-trigger em::after {-webkit-transform: translateY(6px);-ms-transform: translateY(6px);transform: translateY(6px)} @media only screen and (min-width:1024px) { .nav-trigger {display: none} } .nav-open .nav-trigger em {background-color: rgba(255, 255, 255, 0)} .nav-open .nav-trigger em::before {-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg)} .nav-open .nav-trigger em::after {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg)} } @media screen and (max-width:959px) { .cd-primary-nav {float: right;position: initial;left: initial;width: initial;right: 0;transform: none} } @media screen and (max-width:767px) {} @media screen and (max-width:560px) {} /* 移动端导航样式 */ @media only screen and (max-width:959px) { .cd-primary-nav {height: 100%} .cd-primary-nav #cd-navigation {max-height: 0;overflow: hidden} .nav-open #cd-navigation {max-height: calc(100vh - var(--header_height)) !important;overflow-y: auto} #cd-navigation {-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} /*滚动条*/ #cd-navigation::-webkit-scrollbar {width: 2px;height: 8px} #cd-navigation::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: var(--i_color)} #cd-navigation::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 0;background: #F1F1F1} #cd-navigation {position: absolute;top: var(--header_height);left: 0;width: 100%;background: rgba(19, 72, 154, .9);box-shadow: 0 5px 10px rgba(0, 0, 0, .1)} #cd-navigation>li {margin: 0 0;border-bottom: 1px solid rgba(255, 255, 255, .2);position: relative} .i_nav>.menu-item-has-children {padding-right: 0} #cd-navigation>li>a { display: block; max-height: 0; padding: 0 20px; font-size: 14px; color: #FFF; line-height: 40px; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; transition: max-height 300ms ease } #cd-navigation>.menu-item-has-children>a:after { content: ""; position: absolute; top: 50%; transform: translate(0, -50%); right: 20px; width: 16px; height: 16px; background: url(static/imgs/arrow_down_hollow_bai.svg) no-repeat center; background-size: contain } .nav-open #cd-navigation>li>a {max-height: 46px} #cd-navigation .sub-menu {display: none} #cd-navigation .sub-menu a {display: block;padding: 0 40px;font-size: 12px;color: #FFF;line-height: 36px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis} #cd-navigation .sub-menu .menu-item-has-children>a:after { content: ""; position: absolute; top: 50%; transform: translate(0, -50%); right: 20px; width: 16px; height: 16px; background: url(static/imgs/arrow_down_hollow_bai.svg) no-repeat center; background-size: contain } #cd-navigation .sub-menu .sub-menu a {padding: 0 60px} } .top_r {float: right;height: var(--header_height);display: -webkit-flex;display: flex;align-items: center;flex-wrap: wrap;z-index: 2} /* 搜索 */ .top_search_ico {} .top_search_ico i { display: block; width: 22px; height: 22px; background: url(static/imgs/search_2_hei.svg) no-repeat center; background-size: contain; cursor: pointer } .top_search {--search_height: 44px} .top_search { position: absolute; top: var(--header_height); left: 0; width: 100%; height: 0; background: rgba(0, 0, 0, .4); overflow: hidden; z-index: -1 } .top_search.on {display: block !important;height: 74px} .top_search form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36%; font-size: 0; overflow: hidden } .top_search .top_search_ipt, .top_search .top_search_btn {display: inline-block;vertical-align: middle} .top_search .top_search_ipt { width: calc(100% - var(--search_height)); height: var(--search_height); line-height: var(--search_height); box-sizing: border-box; padding-left: 16px; font-size: 16px; color: #555 } .top_search .top_search_btn { width: var(--search_height); height: var(--search_height); background: var(--i_color) url(static/imgs/search_2_bai.svg) no-repeat center; background-size: 20px; cursor: pointer } .top_search { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease } @media screen and (max-width:1366px) { .top_search_ico i {width: 20px;height: 20px} } @media screen and (max-width:1200px) { .top_r {height: calc(var(--header_height) / 2)} .top_search_ico i {width: 18px;height: 18px} } @media screen and (max-width:959px) { .top_r {float: right;height: var(--header_height);margin-right: 10px;position: initial} .top_search {top: var(--header_height);transform: none} .top_search.on {height: 60px} .top_search form {width: 94%} } @media screen and (max-width:767px) {} @media screen and (max-width:560px) { .top_search_ico i {width: 18px;height: 18px} } /* 导航下拉 */ @media only screen and (min-width:960px) { .xiala{ width: 100%; background-color: rgba(0, 0, 0, .9); box-sizing: border-box; padding: 75px 0 100px 0; position: fixed; left: 0; top: calc(var(--header_height) + var(--top_line)); z-index: 5000; /* transform: scaleZ(0); */ visibility: hidden; display: none; } .xiala_active{ /* transform: scaleZ(1) !important; */ display: block !important; visibility: visible !important; } .xiala_div{ display: flex; display: -webkit-flex; } .xiala_left{ width: 71%; } .xiala_left h1{ font-size: 30px; font-weight: bold; color: white; } .xiala_left_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; padding-top: 60px; } #products .xiala_left_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; padding-top: 40px; } .xiala_left_ul>li{ width: 46%; margin-right: 4%; box-sizing: border-box; margin-bottom: 20px; position: relative; } .xiala_left_ul>li>a{ display: block; font-size: 16px; color: white; box-sizing: border-box; padding-bottom: 20px; position: relative; padding-right: 20px; text-transform: uppercase; transition: all 0.5s ease; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; border-bottom: 1px solid #8b8987; } .xiala_left_ul>li>a::after{ content: ''; position: absolute; bottom: 0px; left: 0; width: 0%; height: 1px; background-color: white; transition: all 1s ease; } .xiala_left_ul>li:hover>a::after{ width: 100%; } .xiala_left_ul>li::after{ content: '|'; position: absolute; top: -4px; right: 0; color: white; font-size: 18px; transform: rotate(25deg); transition: all 0.5s linear; } .xiala_left_ul>li::before{ content: '|'; position: absolute; top: -4px; right: 8px; color: white; font-size: 18px; transform: rotate(25deg); transition: all 0.7s linear; } .xiala_left_ul>li:hover::after{top:20px;right:4px;transform:rotate(-40deg);} .xiala_left_ul>li:hover::before{top:20px;right:12px;transform:rotate(-40deg);} .xiala_left_ul>li:hover>a{ color: var(--i_color); } .xiala_right{ width: 29%; } .xiala_right_img{ width: 100%; position: relative; overflow: hidden; } .xiala_right_img::after{ content: ''; display: block; padding-bottom: 62%; } .xiala_right_img img{ width: 100%; height: 100%; transform: translate(-50%,-50%); top: 50%; left: 50%; object-fit: cover; position: absolute; } .xiala_active_class>a{ color: var(--i_color) !important; } .xiala_active_class>a::after{ width: 100% !important; } .xiala_active_class::after{top:20px !important;right:4px !important;transform:rotate(-40deg) !important;} .xiala_active_class::before{top:20px !important;right:12px !important;transform:rotate(-40deg) !important;} /* 产品下拉 */ #products{ box-sizing: border-box; padding: 70px 0 40px 0; } #tab_tit6>li{ width: 29%; } #tab_tit6>li>ul{ box-sizing: border-box; padding-top: 20px; } #tab_tit6>li>ul>li{ position: relative; overflow: hidden; margin-bottom: 15px; } #tab_tit6>li>ul>li::after{ content: ''; position: absolute; top: 50%; left: -20px; transform: translate(0%,-50%); width: 14px; height: 12px; background: url('static/imgs/two.png') center no-repeat; background-size: 100% 100%; transition: all 0.5s ease; } #tab_tit6>li>ul>li>a{ display: block; font-size: 16px; color: white; box-sizing: border-box; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; transition: all 0.5s ease; } #tab_tit6>li>ul>li:hover>a{ color: var(--i_color); padding-left: 22px; } #tab_tit6>li>ul>li:hover::after{ left: 0; } #tab_cont6 a{ position: relative; } #tab_cont6 h2{ font-size: 24px; color: white; font-weight: bold; position: absolute; bottom: 0; right: 0; box-sizing: border-box; padding: 0 15px 20px 0; } .xiala_right{ box-sizing: border-box; padding-top: 10px; } .products_active_xia a{ color: var(--i_color) !important; padding-left: 22px !important; } .products_active_xia::after{ left: 0 !important; } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ .xiala_left h1 {font-size: 28px;} #tab_cont6 h2{font-size: 22px;padding: 0 10px 20px 0;} } @media screen and (max-width:1440px){ .xiala_left_ul>li>a {font-size: 15px;} .xiala_left_ul {padding-top: 50px;} .xiala_left h1 {font-size: 26px;} .xiala {padding: 65px 0 80px 0;} #products{padding: 65px 0 20px 0;} #tab_cont6 h2{font-size: 20px;} #tab_tit6>li>ul>li>a{font-size: 15px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .cd-primary-nav {height: unset;} .xiala_left_ul>li>a {font-size: 14px;} .xiala_left_ul {padding-top: 40px;} .xiala_left h1 {font-size: 24px;} .xiala {padding: 45px 0 40px 0;} #products{padding: 45px 0 20px 0;} #tab_cont6 h2{font-size: 18px;} #tab_tit6>li>ul>li>a{font-size: 14px;} } } @media screen and (max-width:959px){ .xiala{display: none;} } /* banner */ .banner{width:100%; overflow:hidden; position:relative} .banner .swiper-slide{height:0; overflow:hidden; padding-bottom:85vh; position:relative} .banner .swiper-slide>img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover} .banner .swiper-slide video{position:absolute; left:0; top:0; width:100%; height:100%!important; object-fit:cover; z-index:2} .banner .swiper-button-prev, .banner .swiper-button-next{ position:absolute; top:50%; transform:translate(0,-50%); width:60px; height:60px; z-index:999; outline:none; cursor:pointer; -moz-user-select:none; /*火狐*/ -webkit-user-select:none; /*webkit浏览器*/ -ms-user-select:none; /*IE10*/ -khtml-user-select:none; /*早期浏览器*/ user-select:none; -webkit-border-radius:200px; -moz-border-radius:200px; border-radius:200px; -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 .swiper-button-prev{left:-60px; background:rgba(0,0,0,.6) url(static/imgs/arrow_left_kx_bai.svg) no-repeat center; background-size:26px} .banner .swiper-button-next{right:-60px; background:rgba(0,0,0,.6) url(static/imgs/arrow_right_kx_bai.svg) no-repeat center; background-size:26px} .banner:hover .swiper-button-prev{left:4%} .banner:hover .swiper-button-next{right:4%} .banner .swiper-button-prev:hover, .banner .swiper-button-next:hover{background-color:var(--i_color)} .banner .pagination-all{ position:absolute; bottom:0px; left:50%; transform:translate(-50%,0); cursor:pointer; z-index:10; } .banner .swiper-pagination { position: relative; display: inline-block; text-align: left; display: flex; display: -webkit-flex; align-items: flex-end; } .banner .swiper-pagination-bullet { width: 20px; height: 60px; border-radius: 0; text-align: center; background-color: transparent; opacity: 1; margin: 0 8px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; position: relative; color: rgba(255, 255, 255, 0.5); box-sizing: border-box; padding-top: 20px; } .banner .swiper-pagination-bullet::after{ content: ''; width: 1px; height: 42%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); background: rgba(255, 255, 255, 0.5); } .banner .swiper-pagination-bullet-active { color: white !important; padding-top: 0px !important; } .banner .swiper-pagination-bullet-active::after { background: white !important; height: 65% !important; } @media screen and (max-width:1440px){ .banner .swiper-pagination-bullet {margin: 0 15px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ .banner .swiper-pagination-bullet {margin: 0 10px;} .banner .swiper-button-prev, .banner .swiper-button-next{display:none!important} } @media screen and (max-width:767px){ .banner .swiper-slide{padding-bottom:100%} .banner .swiper-pagination-bullet {margin: 0 5px;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* banner 上的文字 */ .home_btn{ display: flex; display: -webkit-flex; align-items: center; justify-content: center; background-color: var(--i_color); line-height: 45px; width: 220px; transition: all 1s ease; position: relative; overflow: hidden; } .home_btn p{ font-size: 0.2rem; color: white; box-sizing: border-box; margin-right: 10px; text-transform: uppercase; z-index: 2; } .home_btn i{ width: 24px; height: 11px; background: url('static/imgs/right.png') center no-repeat; background-size: 100% 100%; z-index: 2; } /* .home_btn:hover { background-color: #ff9900; box-shadow: 0 20px 38px rgb(0 0 0 / 16%); -ms-transform: translateY(-3px); transform: translateY(-3px); -webkit-transform: translateY(-3px); } */ .home_btn:before { webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: 1; } .home_btn:hover:before { top: -50%; } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .home_btn p {font-size: 0.18rem;} .home_btn {width: 200px;} } @media screen and (max-width:959px){ .home_btn {line-height: 40px;width: 180px;} } @media screen and (max-width:767px){ .home_btn {line-height: 35px;width: 140px;} .home_btn i {width: 17px;height: 9px;} } @media screen and (max-width:560px){ .home_btn {line-height: 30px;width: 120px;} } @media screen and (max-width:425px){ } /* banner 上的文字 */ .banner_text1{ position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .banner_text1 h3{ font-size: 0.44rem; color: #fff; font-weight: bold; text-align: center; } .banner_text1 h4{ font-size: 0.8rem; color: #fff; font-weight: bold; text-align: center; margin-top: 0.2rem; } @media screen and (max-width:1440px){ .banner_text1 h3{ font-size: 0.4rem; } .banner_text1 h4{ font-size: 0.7rem; } } @media screen and (max-width:1200px){ .banner_text1 h3{ font-size: 0.35rem; } .banner_text1 h4{ font-size: 0.65rem; } } @media screen and (max-width:959px){ .banner_text1 h3{ font-size: 0.3rem; } .banner_text1 h4{ font-size: 0.6rem; } } @media screen and (max-width:767px){ .banner_text1 h3{ font-size: 0.25rem; } .banner_text1 h4{ font-size: 0.5rem; } } @media screen and (max-width:560px){ .banner_text1 h3{ font-size: 0.22rem; } .banner_text1 h4{ font-size: 0.4rem; } } @media screen and (max-width:425px){ .banner_text1 h3{ font-size: 0.18rem; } .banner_text1 h4{ font-size: 0.3rem; } } /* ----------------------------------main----------------------- */ .home_product{ width: 100%; margin: 30px 0; display: flex; display: -webkit-flex; justify-content: space-between; } .home_product li{ width: 49.64%; } .home_product li:hover img{ width: 120%; height: 120%; } .home_product_img{ position: relative; width: 100%; overflow: hidden; } .home_product_img::after{ content: ''; display: block; padding-bottom: 50.11%; } .home_product a{ position: relative; } .home_product li img{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); object-fit: cover; transition: all 1s linear; } .home_product_text{ position: absolute; left: 11%; bottom: 10%; width: 80%; } .home_product_text h1{ font-size: 0.4rem; color: white; font-weight: bold; position: relative; box-sizing: border-box; padding-bottom: 27px; } .home_product_text h1::after{ content: ''; position: absolute; bottom: 0px; left: 0; width: 107px; height: 4px; background-color: var(--i_color); } .home_product_text h2{ padding-top: 22px; font-size: 16px; line-height: 20px; color: white; display: none; animation: s 0.3s; } .home_product_text h2 p{ color: #fff; } .home_product .current h2{ display: block; } @keyframes s { from { opacity: 0; transform: scaleY(0); visibility: hidden; } to { opacity: 1; transform: scaleY(1); visibility: visible; } } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ .home_product_text h1 {font-size: 0.35rem;padding-bottom: 20px;} } @media screen and (max-width:1440px){ .home_product_text h2 {padding-top: 15px;font-size: 14px;line-height: 18px;} .home_product_text h1 {font-size: 0.32rem;padding-bottom: 15px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .home_product_text h1 {font-size: 0.3rem;} .home_product_text h1::after {width: 60px;height: 2px;} } @media screen and (max-width:959px){ .home_product_text {width: 80%;} .home_product_text h1 {font-size: 0.28rem;padding-bottom: 10px;} .home_product_text h2 {padding-top: 10px;font-size: 13px;line-height: 16px;} } @media screen and (max-width:767px){ .home_product_text h1 {font-size: 0.2rem} } @media screen and (max-width:560px){ .home_product_text h2 { display: none !important; } .home_product_text h1 {font-size: 0.16rem} } @media screen and (max-width:425px){ .home_product_text h1 {font-size: 0.14rem} } /* 首页产品轮播 */ .home_product_swiper{ margin: 60px 0; display: none !important; } .home_product_swiper li a{ display: block; width: 100%; } /* 产品分类1 */ .wrap_79{ width: 79%; margin: 0 auto; } .i_partner_box{} .i_partner{position:relative} .i_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .i_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1;box-sizing: border-box;padding: 10px 0;} .i_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; overflow: hidden; } .i_partner_list .img{width:100%; box-sizing:border-box; border:1px solid rgba(0,0,0,.1);border-top: 0px; position:relative; overflow:hidden} .i_partner_list .img:before{content:""; display:block; padding-bottom:100%} .i_partner_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .i_partner_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} /* 指示器 */ .pt-pagination{display:none; text-align:center; margin:20px auto 0} .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#BBB; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .i_partner .pt-button-prev, .i_partner .pt-button-next{position:absolute; top:50%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .i_partner .pt-button-prev:before, .i_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .i_partner .pt-button-prev{left:-40px} .i_partner .pt-button-prev:before{content:"<"} .i_partner .pt-button-next{right:-40px} .i_partner .pt-button-next:before{content:">"} .i_partner .swiper-button-disabled { cursor: not-allowed; background-color: #DDD!important; } @media screen and (max-width:1440px){ .wrap_79{width: 84%;} } @media screen and (max-width:1366px){ .wrap_79{width: 88%;} } @media screen and (max-width:1200px){ .i_partner .pt-button-prev, .i_partner .pt-button-next{display:none} .pt-pagination{display:block} .wrap_79{width: 94%;} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* 文字内容 */ .home_product_swiper .home_partner_text{ border:1px solid rgba(0,0,0,.1); box-sizing: border-box; padding: 0.4rem 0.2rem 0.1rem 0.2rem; } .home_product_swiper h1{ font-size: 0.2rem; line-height: 0.25rem; height: 0.5rem; color: var(--i_color2); font-weight: bold; text-align: center; overflow:auto; box-sizing: border-box; transition: all 0.7s ease; margin-bottom: 0.1rem; } /*滚动条*/ .home_product_swiper h1::-webkit-scrollbar{width:1px; height:8px} .home_product_swiper h1::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); background:var(--i_color)} .home_product_swiper h1::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); border-radius:0; background:#F1F1F1} .home_product_swiper h2{ font-size: 16px; color: #313133; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 36px; box-sizing: border-box; padding: 0 7%; } .home_product_swiper li i{ display: block; width: 53px; height: 53px; background: url('static/imgs/red_right.png') center no-repeat; background-size: 100% 100%; position: absolute; bottom: 0; right: -60px; transition: all 0.5s ease; } .home_product_swiper .swiper-slide:hover i{ right: 0px; } .home_product_swiper .swiper-slide:hover h1{ color: var(--i_color); } .home_product_swiper .swiper-slide:hover{ box-shadow: 0 0 7px rgba(0, 0, 0, .15); } .home_product_swiper .swiper-slide:hover img{ width: 105%; height: 105%; } .home_product_btn{ margin: 60px 0; } .home_product_btn a{ margin: 0 auto; } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ .home_product_swiper h2 {font-size: 15px;} } @media screen and (max-width:1440px){ .home_product_swiper {margin: 50px 0;} .home_product_btn {margin: 50px 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .home_product_swiper {margin-top: 40px;} .home_product_btn {margin: 40px 0;} } @media screen and (max-width:959px){ .home_product_swiper h2 {font-size: 14px;height: 32px;padding: 0 5%;} .home_product_btn {margin: 30px 0;} .home_product_swiper {margin: 30px 0;} } @media screen and (max-width:767px){ .home_product_swiper h1 {font-size: 0.16rem;} .home_product_swiper {margin: 20px 0;} .home_product_btn {margin: 20px 0;} } @media screen and (max-width:560px){ .home_product_swiper h2 {font-size: 13px;height: 30px;} } @media screen and (max-width:425px){ } /* 产品分类2 */ .k_partner_box{} .k_partner{position:relative} .k_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .k_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1;box-sizing: border-box;padding: 10px 0;} .k_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; overflow: hidden; } .k_partner_list .img{width:100%; box-sizing:border-box; border:1px solid rgba(0,0,0,.1);border-top: 0px; position:relative; overflow:hidden} .k_partner_list .img:before{content:""; display:block; padding-bottom:100%} .k_partner_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .k_partner_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} /* 指示器 */ .pt-pagination{display:none; text-align:center; margin:20px auto 0} .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#BBB; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .k_partner .pt-button-prev, .k_partner .pt-button-next{position:absolute; top:50%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .k_partner .pt-button-prev:before, .k_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .k_partner .pt-button-prev{left:-40px} .k_partner .pt-button-prev:before{content:"<"} .k_partner .pt-button-next{right:-40px} .k_partner .pt-button-next:before{content:">"} .k_partner .swiper-button-disabled { cursor: not-allowed; background-color: #DDD!important; } @media screen and (max-width:1440px){ .wrap_79{width: 84%;} } @media screen and (max-width:1200px){ .k_partner .pt-button-prev, .k_partner .pt-button-next{display:none} .pt-pagination{display:block} .wrap_79{width: 94%;} } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* 首页contact */ .home_contact{ width: 100%; background: url('https://lingjuimg.com/wp-content/uploads/tiandaofangwu/2025/03/home_contact.webp') center no-repeat; background-size: cover; box-sizing: border-box; padding: 85px 0 105px 0; position: relative; background-attachment: fixed; } .home_contact h1{ font-size: 0.48rem; color: white; font-weight: bold; text-transform: uppercase; text-align: center; } .home_contact h2{ font-size: 18px; color: white; text-align: center; box-sizing: border-box; padding: 35px 0 110px 0; } .home_contact_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .wrap_66{ width: 66%; margin: 0 auto; } .home_contact_ul li{ display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 25%; } .home_contact_ul img{ width: 77px; transition: all 0.5s ease; } .home_contact_ul li:hover img{ transform: rotateY(180deg); } .home_contact_ul h3{ font-size: 18px; color: #ffffff; line-height: 24px; box-sizing: border-box; padding: 25px 13% 55px 13%; text-align: center; width: 100%; } .home_contact_ul div{ display: flex; display: -webkit-flex; } .home_contact_ul span,.home_contact_ul p{ display: block; font-size: 0.6rem; color: white; font-weight: bold; } @media screen and (max-width:1880px){ .wrap_66{width: 70%;} } @media screen and (max-width:1600px){ .wrap_66{width: 72%;} .home_contact_ul span,.home_contact_ul p {font-size: 0.58rem;} .home_contact h1 {font-size: 0.44rem;} } @media screen and (max-width:1440px){ .wrap_66{width: 74%;} .home_contact_ul span,.home_contact_ul p {font-size: 0.52rem;} .home_contact h2 {font-size: 16px;padding: 20px 0 80px 0;} .home_contact {padding: 70px 0 90px 0;} .home_contact_ul img {width: 60px;} .home_contact_ul h3 {font-size: 16px;line-height: 22px;padding: 20px 8% 50px 8%;} .home_contact h1 {font-size: 0.42rem;} } @media screen and (max-width:1366px){ .wrap_66{width: 80%;} .home_contact_ul span,.home_contact_ul p {font-size: 0.5rem;} } @media screen and (max-width:1200px){ .wrap_66{width: 84%;} .home_contact_ul span,.home_contact_ul p {font-size: 0.48rem;} .home_contact h1 {font-size: 0.4rem;} .home_contact h2 {padding: 20px 0 60px 0;} } @media screen and (max-width:959px){ .wrap_66{width: 94%;} .home_contact_ul span,.home_contact_ul p {font-size: 0.4rem;} .home_contact h1 {font-size: 0.38rem;} .home_contact_ul h3 {font-size: 14px;line-height: 22px;padding: 20px 5% 40px 5%;} .home_contact h2 {padding: 20px 0 40px 0;font-size: 14px;} .home_contact {padding: 50px 0 70px 0;} .home_contact_ul img {width: 55px;} } @media screen and (max-width:767px){ .home_contact_ul h3 {font-size: 12px;line-height: 18px;padding: 20px 2% 40px 2%;} .home_contact {padding: 30px 0 50px 0;} } @media screen and (max-width:560px){ .home_contact_ul li {width: 50%;margin-bottom: 20px;} .home_contact_ul h3 {font-size: 14px;line-height: 18px;padding: 20px 5% 40px 5%;} .home_contact {padding: 30px 0 40px 0;} } @media screen and (max-width:425px){ } /* 首页 about */ .home_about{ width: 100%; background: url('static/imgs/home_about.jpg') center no-repeat; background-size:cover; box-sizing: border-box; padding: 100px 0 90px 0; } .home_about_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .home_about_ul li{ width: 50%; transition: all 0.3s ease; } .home_about_left h1{ color: var(--i_color); font-size: 0.56rem; font-weight: bold; text-transform: uppercase; } .home_about_left span{ color: var(--i_color2); font-size: 0.56rem; font-weight: bold; text-transform: uppercase; } .home_about_left p{ font-size: 18px; line-height: 28px; color: var(--i_color2); box-sizing: border-box; padding: 45px 6% 50px 0; } .home_about_btn{ display: flex; display: -webkit-flex; align-items: center; justify-content: center; width: 58px; background-color: var(--i_color); transition: all 1s ease; position: relative; overflow: hidden; } .home_about_btn h2{ display: block; box-sizing: border-box; line-height: 50px; text-align: center; font-size: 25px; color: white; font-weight: bold; z-index: 2; } .home_about_btn:before { webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: 1; } .home_about_btn:hover:before { top: -50%; } .home_about_right{ position: relative; } .home_about_right::after{ content: ''; position: absolute; width: 220px; height: 220px; background-color: var(--i_color); top: -55px; right: -20px; clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 25%, 75% 25%, 75% 100%, 36% 100%, 0 100%, 100% 100%, 100% 0%); } .home_about_right img{ width: calc(100% - 35px); z-index: 1; } /* .home_about_ul li:nth-child(2):hover{ width: 48%; } */ /* .home_about_right{ overflow: hidden; } .home_about_right::before { content: ''; position: absolute; width: 30%; height: 100%; z-index: 1; background-color: rgba(225, 225, 225, 0.3); transform: translateX(-370px) skewX(30deg); transition: 0.5s ease-in-out; } .home_about_right:hover::before { transform: translateX(970px) skewX(30deg); } */ @media screen and (max-width:1880px){ .home_about_left p {font-size: 16px;line-height: 24px;padding: 35px 6% 40px 0;} .home_about_left h1,.home_about_left h1 span {font-size: 0.52rem;} } @media screen and (max-width:1600px){ .home_about_left p {font-size: 15px;line-height: 22px;padding: 25px 3% 20px 0;} .home_about_left h1,.home_about_left h1 span {font-size: 0.5rem;} } @media screen and (max-width:1440px){ .home_about_left p {font-size: 14px;line-height: 20px;padding: 20px 3% 20px 0;} .home_about_left h1,.home_about_left h1 span {font-size: 0.45rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .home_about_right::after {width: 200px;height: 200px;top: -50px;right: -15px;} .home_about_left h1,.home_about_left h1 span {font-size: 0.4rem;} .home_about {padding: 100px 0 50px 0;} .home_about_left p {font-size: 13px;line-height: 17px;padding: 10px 3% 20px 0;} .home_about_btn {width: 48px;} .home_about_btn h2 {line-height: 40px;font-size: 22px;} } @media screen and (max-width:959px){ .home_about_ul li{width: 100%;} .home_about_ul {flex-direction: column-reverse;} .home_about_left{margin-top: 20px;} .home_about_left p {font-size: 14px;} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .home_about_right::after {width: 150px;height: 150px;top: -38px;right: -2px;} } @media screen and (max-width:425px){ } /* 工艺流程 */ .home_about_title{ font-size: 0.26rem; color: var(--i_color2); line-height: 34px; font-weight: bold; position: relative; box-sizing: border-box; padding-left: 17px; margin-top: 75px; margin-bottom: 25px; } .home_about_title::after{ content: ''; position: absolute; top: 50%; left: 0; transform: translate(0%,-50%); width: 7px; height: 100%; background-color: var(--i_color); } .o_partner_box{} .o_partner{position:relative} .o_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .o_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1;box-sizing: border-box;padding: 10px 0;} .o_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; overflow: hidden; } .o_partner_list .img{width:100%; box-sizing:border-box; border:1px solid rgba(0,0,0,.2);border-top: 0px; position:relative; overflow:hidden} .o_partner_list .img:before{content:""; display:block; padding-bottom:68%} .o_partner_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .o_partner_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} .o_partner_list .img img:hover{ width: 108%; height: 108%; } /* 指示器 */ .pt-pagination{display:none; text-align:center; margin:20px auto 0} .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#BBB; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .o_partner .pt-button-prev, .o_partner .pt-button-next{position:absolute; top:-7%; transform:translate(0,-50%); width:15px; height:50px; z-index:999; cursor:pointer; outline:none} .o_partner .pt-button-prev:before, .o_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:var(--i_color2); font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .o_partner .pt-button-prev{right:25px} .o_partner .pt-button-prev:before{content:"<"} .o_partner .pt-button-next{right:0px} .o_partner .pt-button-next:before{content:">"} .o_partner .pt-button-prev:hover::before,.o_partner .pt-button-next:hover::before{ color: var(--i_color); } .o_partner .swiper-button-disabled { cursor: not-allowed; } @media screen and (max-width:1440px){ .wrap_79{width: 84%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .o_partner .pt-button-prev, .o_partner .pt-button-next{display:none} .pt-pagination{display:block} .wrap_79{width: 94%;} } @media screen and (max-width:959px){ .home_about_title {margin-top: 50px;margin-bottom: 20px;} } @media screen and (max-width:767px){ .home_about_title {margin-top: 30px;margin-bottom: 20px;} } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* 首页 project */ .home_project_title{ font-size: 0.5rem; font-weight: bold; color: var(--i_color2); padding-bottom: 15px; position: relative; text-align: center; text-transform: uppercase; } .home_project_title::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 135px; height: 4px; background-color: var(--i_color); } .home_project{ box-sizing: border-box; padding: 70px 0 120px 0; } .home_project_area{ margin-top: 60px; width: 100%; position: relative; } .home_project_imgs{ width: 100%; position: relative; overflow: hidden; } .home_project_imgs::after{ content: ''; display: block; padding-bottom: 46%; } .home_project_imgs img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .home_project_ul li{ width: 30%; box-sizing: border-box; padding: 0 50px; transition: all 0.7s ease; position: relative; overflow: hidden; } .home_project_ul li::after{ content: ''; position: absolute; top: 47.5%; left: 0px; transform: translate(0,-50%); width: 2px; height: 10%; background-color: var(--i_color); transition: all 1s ease; z-index:1; } .home_project_ul li::before{ content: ''; position: absolute; top: 50%; left: 0px; transform: translate(0,-50%); width: 1px; height: 100%; background-color: white; transition: all 1s ease; z-index: 0; } .home_project_ul li:nth-child(1){ background-color: rgba(0, 0, 0, .4); border-left: 0px; } .home_project_ul li:nth-child(1)::after{ left: 1px; } .home_project_ul li:nth-child(2){ background-color: rgba(0, 0, 0, .2); } .home_project_ul li:nth-child(3){ background-color: rgba(0, 0, 0, .0); } .home_project_active{ width: 40% !important; } .home_project_ul li:hover::after{ width: 1px; } .home_project_ul{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; display: -webkit-flex; } .home_project_ul a{ display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; height: 100%; } .home_project_ul h1{ font-size: 24px; line-height: 30px; color: white; padding-bottom: 30px; } .home_project_ul p{ font-size: 18px; line-height: 24px; color: white; } .home_project_ul p{ display: none; } .home_project_active p{ display: block !important; } .home_project_active::after{ height: 120% !important; } .home_project_ul i { display: block; width: 0.53rem; height: 0.53rem; background: url(static/imgs/red_right.png) center no-repeat; background-size: 100% 100%; position: absolute; bottom: 0; right: -0.6rem; transition: all 0.5s ease; } .home_project_ul li:hover i{ right: 0; } .home_project_imgs img:nth-child(2){ display: none; } .home_project_imgs img:nth-child(3){ display: none; } @media screen and (max-width:1880px){ .home_project_title {font-size: 0.48rem;} } @media screen and (max-width:1600px){ .home_project_title {font-size: 0.46rem;} .home_project_ul h1 {font-size: 22px;line-height: 28px;padding-bottom: 25px;} .home_project_ul li {padding: 0 40px;} .home_project_ul p {font-size: 17px;line-height: 22px;} } @media screen and (max-width:1440px){ .home_project_title {font-size: 0.42rem;} .home_project_title::after {width: 110px;height: 3px;} .home_project {padding: 60px 0 100px 0;} .home_project_ul h1 {font-size: 20px;line-height: 26px;padding-bottom: 20px;} .home_project_ul li {padding: 0 30px;} .home_project_ul p {font-size: 16px;line-height: 20px;} } @media screen and (max-width:1366px){ .home_project_title {font-size: 0.4rem;} } @media screen and (max-width:1200px){ .home_project_title {font-size: 0.38rem;} .home_project_title {padding-bottom: 10px;} .home_project_title::after {width: 100px;} .home_project {padding: 50px 0 80px 0;} .home_project_area {margin-top: 50px;} .home_project_ul li {padding: 0 25px;} .home_project_ul h1 {font-size: 18px;line-height: 24px;padding-bottom: 15px;} .home_project_ul p {font-size: 15px;line-height: 18px;} } @media screen and (max-width:959px){ .home_project_title {font-size: 0.35rem;} .home_project_title::after {width: 80px;} .home_project {padding: 40px 0 60px 0;} .home_project_area {margin-top: 40px;} .home_project_ul h1 {font-size: 16px;line-height: 20px;padding-bottom: 10px;} .home_project_ul p {font-size: 14px;line-height: 16px;} .home_project_ul li {padding: 0 15px;} .home_project_imgs::after {padding-bottom: 54%;} } @media screen and (max-width:767px){ .home_project_title {font-size: 0.3rem;} .home_project_title::after {width: 60px;height: 2px;} .home_project {padding: 30px 0 50px 0;} .home_project_area {margin-top: 30px;} .home_project_ul li {padding: 0 10px;} .home_project_imgs::after {padding-bottom: 60%;} .home_project_ul p {font-size: 13px;line-height: 15px;} .home_project{width: 100%;} } @media screen and (max-width:560px){ .home_project {padding: 20px 0 40px 0;} .home_project_area {margin-top: 20px;} .home_project_imgs::after {padding-bottom: 80%;} .home_project_ul h1 {font-size: 15px;line-height: 18px;} } @media screen and (max-width:425px){ } /* -----------------------------footer-------------------- */ .footer{ width: 100%; background: url('https://lingjuimg.com/wp-content/uploads/tiandaofangwu/2025/03/footer.webp') center no-repeat; background-size: cover; box-sizing: border-box; padding-top: 90px; position: relative; } .footer_left{ width: 37%; } .footer_left h1{ font-size: 24px; line-height: 28px; color: white; box-sizing: border-box; padding-right: 50%; } #wpforms-21{--input_font_size:16px; --input_height:42px} #wpforms-21{width:100%; margin:0 auto; padding:0} #wpforms-form-21{ width:100%; overflow:hidden; display: flex; } #wpforms-21 input, #wpforms-21 button{margin:0; padding:0; border:none; background:none} #wpforms-21 .wpforms-field{padding:0; margin:0} #wpforms-21 .wpforms-error-container{line-height:16px} #wpforms-21 .wpforms-field-container{width:50%; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} #wpforms-21 .wpforms-submit-container{padding:0!important; width:88px;margin-top: 0 !important; height:var(--input_height); background:var(--i_color); position:relative;} #wpforms-21 .wpforms-field-label{display:none!important} #wpforms-21 .wpforms-field{width:100%; background:transparent; overflow:hidden} #wpforms-21 .wpforms-field:nth-child(1){margin-right:0px} #wpforms-21 .wpforms-field:nth-child(1), #wpforms-21 .wpforms-field:nth-child(2){width:100%} #wpforms-21 input{height:var(--input_height)} #wpforms-21 textarea{min-height:100px} #wpforms-21 input, #wpforms-21 textarea{width:100%; max-width:100%!important; font-size:var(--input_font_size); color:#838784; box-sizing:border-box; border:1px solid white;border-right: 0px; line-height:var(--input_height); padding:0 10px} #wpforms-21 input::-webkit-input-placeholder{color:#838784; font-size:var(--input_font_size)} #wpforms-21 input::-moz-placeholder{color:#838784; font-size:var(--input_font_size)} #wpforms-21 input::-moz-placeholder{color:#838784; font-size:var(--input_font_size)} #wpforms-21 input::-ms-input-placeholder{color:#838784; font-size:var(--input_font_size)} #wpforms-21 textarea::-webkit-input-placeholder{color:#838784; font-size:var(--input_font_size)} #wpforms-21 textarea::-moz-placeholder{color:#838784; font-size:var(--input_font_size)} #wpforms-21 textarea::-moz-placeholder{color:#838784; font-size:var(--input_font_size)} #wpforms-21 textarea::-ms-input-placeholder{color:#838784; font-size:var(--input_font_size)} #wpforms-21 #wpforms-21-field_1-error, #wpforms-21 #wpforms-21-field_2-error, #wpforms-21 #wpforms-21-field_3-error, #wpforms-21 #wpforms-21-field_4-error{position:absolute; font-size:14px} #wpforms-21 .wpforms-submit-container button{position: relative; overflow: hidden; width:100%; height:var(--input_height); font-size:0px; color:#FFF; line-height:var(--input_height); cursor:pointer; text-transform:uppercase; position:relative; z-index:2} #wpforms-21 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} #wpforms-form-21{display: flex;display: -webkit-flex;padding: 40px 0;} #wpforms-21 .wpforms-submit-container button::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 38px; background: url('static/imgs/footer_btn.png') center no-repeat; background-size: 100% 100%; z-index: 3; } #wpforms-21 .wpforms-submit-container button::before{ webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: 1; } #wpforms-21 .wpforms-submit-container button:hover:before { top: -50%; } .footer_div{ display: flex; display: -webkit-flex; } .footer_left_ul{ display: flex; display: -webkit-flex; padding-bottom: 65px; } .footer_left_ul li{ margin-right: 30px; } .footer_left_ul img{ width: 30px; transition: all 0.7s ease; } .footer h2{ font-size: 24px; color: white; font-weight: bold; text-transform: uppercase; } .footer_center_ul{ padding: 35px 0; display: flex; display: -webkit-flex; flex-direction: column; } .footer_center_ul li{ margin-bottom: 15px; } .footer_center_ul a{ font-size: 16px; color: white; text-transform: uppercase; transition: all 0.7s ease; } .footer_center{ width: 20%; } .footer_cenR{ width: 25%; } .footer_cenR_ul{ display: flex; display: -webkit-flex; flex-direction: column; padding-top: 35px; } .footer_cenR_ul li{ display: flex; } .footer_cenR_ul img{ width: 20px; transition: all 0.7s ease; } .footer_cenR_ul a{ font-size: 16px; color: white; padding-left: 10px; width: calc(100% - 20px); box-sizing: border-box; transition: all 0.7s ease; } .footer_cenR_ul a{ display: flex; display: -webkit-flex; align-items: flex-start; } .footer_cenR_ul li{ padding-bottom: 30px; } .footer_right{ width: 18%; display: flex; display: -webkit-flex; flex-direction: column; justify-content:center; align-items: flex-start; } .footer_right p{ font-size: 16px; line-height: 24px; color: white; padding: 25px 0 50px 0; } .footer_max{ width: 100%; } .footer_max h3{ box-sizing: border-box; padding: 0.25rem 0; width: 100%; text-align: center; color: white; border-top: 1px solid white; font-size: 16px; } .footer_max a{ color: white; font-size: 16px; transition: all 0.7s ease; } .footer_max a:hover{ color: var(--i_color); } .footer_center_ul li:hover a{ color: var(--i_color); } .footer_cenR_ul li:nth-child(1) p:hover,.footer_cenR_ul li:nth-child(2) p:hover{ color: var(--i_color); } .footer_cenR_ul img: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); } .footer_left_ul img: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); } .footer_right img{ transition: all 0.7s ease; height: 0.54rem; } .footer_right img:hover{ transform: scale(0.9); } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .footer_left {width: 32%;} .footer_cenR {width: 30%;} .footer_left h1 {font-size: 22px;line-height: 26px;padding-right: 30%;} #wpforms-21 .wpforms-field-container {width: 60%;} .footer h2 {font-size: 22px;} .footer_center_ul a {font-size: 15px;} .footer_cenR_ul p {font-size: 15px;} .footer_right p {font-size: 15px;line-height: 22px;} .footer_max h3 {font-size: 15px;} .footer_max a {font-size: 15px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .footer {padding-top: 80px;} } @media screen and (max-width:959px){ .footer_div {flex-wrap: wrap;} .footer_div>div{width: 50%;} .footer_center_ul {flex-wrap: wrap;flex-direction: row;} .footer_center_ul li {width: 50%;} .footer_right {justify-content: flex-start;} .footer {padding-top: 50px;} .footer_left_ul {padding-bottom: 50px;} } @media screen and (max-width:767px){ .footer_left h1 {font-size: 20px;line-height: 24px;padding-right: 27%;} .footer h2 {font-size: 20px;} .footer_cenR_ul p {font-size: 14px;padding-right: 20%;} .footer_center_ul a {font-size: 14px;} .footer_right p {font-size: 14px;line-height: 20px;} .footer_max h3 {font-size: 14px;} .footer_max a {font-size: 14px;} .footer {padding-top: 40px;margin-bottom: 0.5rem;} .footer_left_ul {padding-bottom: 40px;} .footer_right p {padding: 25px 0 25px 0;} #wpforms-21 .wpforms-submit-container {width: 50px;} #wpforms-21 .wpforms-submit-container button::after {width: 28px;height: 25px;} } @media screen and (max-width:560px){ .footer_div>div{width: 100%;} #wpforms-21 .wpforms-field-container {width: calc(100% - 70px);} .footer_left h1 {padding-right: 0%;} .footer_cenR_ul p {padding-right: 0%;} .footer_max h3 {font-size: 12px;} .footer_max a {font-size: 12px;} } @media screen and (max-width:425px){ } /* --------------------------------about-------------------------- */ .about_banner{ width: 100%; position: relative; } .about_banner_img{ position: relative; width: 100%; overflow: hidden; } .about_banner_img img{ width: 100vw; object-fit: cover; -webkit-transform: scale(1.35); transform: scale(1.35); -webkit-transition: transform 8s cubic-bezier(0.1,0.2,.7,1); transition: transform 8s cubic-bezier(0.1,0.2,.7,1); } @media screen and (max-width: 959px){ .about_banner_img:before { content: ""; display: block; padding-bottom: 32%; } .about_banner_img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) !important; width: 100%; height: 100%; object-fit: cover; } } @media screen and (max-width: 767px){ .about_banner_img:before { padding-bottom: 34%; } } @media screen and (max-width: 560px){ .about_banner_img:before { padding-bottom: 36%; } } /* about-banner 上文字 */ .about_banner_text{ position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .about_banner_text h1{ font-size: 0.56rem; line-height: 56px; color: white; font-weight: bold; text-align: center; text-transform: uppercase; } /* 当前位置 */ .in_position{ padding:14px 0; background:rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; width: 100%; } .in_position a{transition: all 0.5s ease; display:block; float:left; font-size:14px; color:#ffffff; position:relative; line-height:20px; text-transform:uppercase} .in_position a:first-child{padding-left:24px; background:url(static/imgs/home_b.svg) no-repeat left center; background-size:16px} .in_position a:not(:last-child):after{content:">"; margin:0 4px; color:#ffffff} .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} } /* 公司介绍 */ .about_company{ width: 100%; position: relative; margin-top: 110px; margin-bottom: 130px; } .about_company_ul{ display: flex; display: -webkit-flex; } .about_company_left{ width: 43%; } .about_company_left::after { content: ''; width: 37%; height: 90%; position: absolute; bottom: -50px; left: 0; background-color: #fcf0ef; z-index: -1; } .about_company_img{ position: relative; overflow: hidden; } .about_company_img::after{ content: ''; display: block; padding-bottom: 69%; } .about_company_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; width: 100%; object-fit: cover; } .about_company_img::before { content: ''; position: absolute; width: 30%; height: 100%; z-index: 1; background-color: rgba(225, 225, 225, 0.3); transform: translateX(-370px) skewX(30deg); transition: 0.5s ease-in-out; } .about_company_img:hover::before { transform: translateX(970px) skewX(30deg); } .about_company_right{ width: 67%; box-sizing: border-box; padding-left: 5.3%; } .about_company_right h1{ font-size: 0.42rem; font-weight: bold; color: var(--i_color2); box-sizing: border-box; padding-bottom: 20px; position: relative; text-transform: uppercase; } .about_company_right h1::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 130px; height: 4px; background-color: var(--i_color); } .about_company_right h2{ font-size: 24px; color: var(--i_color); font-weight: bold; box-sizing: border-box; padding: 25px 0; text-transform: uppercase; } .about_company_right p{ font-size: 16px; line-height: 24px; color: var(--i_color2); margin-bottom: 30px; } .about_company_P{ box-sizing: border-box; padding-right: 35px; } @media screen and (max-width:1880px){ .about_company_left::after {height: 85%;bottom: 0px;} .about_company_right h1 {font-size: 0.4rem;} .about_banner_text h1 {font-size: 0.54rem;line-height: 54px;} } @media screen and (max-width:1600px){ .index_topic {height: 230px !important;} .about_company_right p {font-size: 15px;line-height: 22px;margin-bottom: 20px;} .about_company_right h1 {font-size: 0.38rem;} .about_company_right h2 {font-size: 22px;padding: 22px 0;} .about_banner_text h1 {font-size: 0.52rem;line-height: 52px} } @media screen and (max-width:1440px){ .about_company_right h1 {font-size: 0.36rem;} .about_company {margin-top: 100px;margin-bottom: 120px;} .about_banner_text h1 {font-size: 0.5rem;line-height: 50px} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .about_company_right h1 {font-size: 0.34rem;} .about_company_right h2 {font-size: 20px;padding: 15px 0;} .index_topic {height: 168px !important;} .about_company_right p {font-size: 14px;line-height: 20px;margin-bottom: 12px;} .about_company {margin-top: 80px;margin-bottom: 100px;} .about_banner_text h1 {font-size: 0.45rem;line-height: 45px} } @media screen and (max-width:959px){ .about_company_right h1 {font-size: 0.26rem;padding-bottom: 10px;} .about_company_right h2 {font-size: 18px;padding: 10px 0;} .about_company_right p {font-size: 13px;line-height: 18px;margin-bottom: 10px;} .index_topic {height: 148px !important;} .about_company {margin-top: 60px;margin-bottom: 80px;} .about_banner_text h1 {font-size: 0.4rem;line-height: 40px} } @media screen and (max-width:767px){ .about_company_ul{flex-wrap: wrap;} .about_company_ul li{width: 100%;} .about_company_left::after {width: 100%;} .about_company_right{padding-top: 20px;padding-bottom: 20px;} .about_company {margin-top: 40px;margin-bottom: 60px;} .about_banner_text h1 {font-size: 0.38rem;line-height: 38px} } @media screen and (max-width:560px){ .about_company_right h1 {font-size: 20px;} .about_company {margin-top: 40px;margin-bottom: 40px;} .about_banner_text h1 {line-height: 30px;} } @media screen and (max-width:425px){ .about_banner_text h1 {line-height: 25px;} } /* 四个优势 */ .about_adavange{ display: flex; display: -webkit-flex; margin-bottom: 50px; } .about_adavange li{ width: 25%; display: flex; display: -webkit-flex; justify-content: center; align-items: center; position: relative; flex-direction: column; flex-wrap: wrap; } .about_adavange img{ height: 80px; transition: all 0.7s ease; } .about_adavange h1{ font-size: 24px; color: var(--i_color2); font-weight: bold; padding: 30px 0 20px 0; text-align: center; transition: all 0.5s ease; } .about_adavange h2{ font-size: 16px; color: #727272; line-height: 24px; box-sizing: border-box; text-align: center; box-sizing: border-box; padding: 0 10.5% 50px 10.5%; } .about_adavange h3{ font-size: 130px; font-weight: bold; color: #edf2f7; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; } .about_adavange li:nth-child(3) h3,.about_adavange li:nth-child(4) h3{ top: 45%; } .about_adavange li:hover img{ transform: rotate(45deg) } .about_adavange li:hover h1{ color: var(--i_color); } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ .about_adavange h2 {font-size: 15px;line-height: 22px;} } @media screen and (max-width:1440px){ .about_adavange h2 {font-size: 14px;line-height: 20px;} .about_adavange h2 {padding: 0 5.5% 50px 5.5%;} .about_adavange img {height: 75px;} .about_adavange li:nth-child(3) h3, .about_adavange li:nth-child(4) h3 {top: 50%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .about_adavange h2 {font-size: 13px;line-height: 20px;} .about_adavange {align-items: flex-start;flex-wrap: wrap;} .about_adavange li:nth-child(1) h3, .about_adavange li:nth-child(2) h3 {top: 55%;} .about_adavange {margin-bottom: 40px;} } @media screen and (max-width:959px){ .about_adavange li {width: 50%;} } @media screen and (max-width:767px){ .about_adavange h1 {font-size: 22px;} .about_adavange img {height: 70px;} .about_adavange {margin-bottom: 20px;} } @media screen and (max-width:560px){ .about_adavange {margin-bottom: 0px;} } @media screen and (max-width:425px){ } /* 价值观 */ .about_value{ width: 100%; display: flex; display: -webkit-flex; } .about_value li{ position: relative; overflow: hidden; } .about_value_left{ width: 50%; } .about_value_center{ width: 25%; } .about_value_right{ width: 25%; } .about_value_img{ position: relative; overflow: hidden; } .about_value_img::after{ content: ''; display: block; padding-bottom: 47.5%; } .about_value_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .about_value_img2{ position: relative; overflow: hidden; } .about_value_img2::after{ content: ''; display: block; padding-bottom: 95%; } .about_value_img2 img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .about_value_text{ width: 80%; background-color: white; border-radius: 15px; position: absolute; bottom: 5%; left: 50%; transform: translate(-50%,0); transition: all 1s ease; } .about_value_text h1{ line-height: 55px; font-size: 24px; font-weight: bold; color: var(--i_color2); text-align: center; } .about_value_center:hover .about_value_text,.about_value_right:hover .about_value_text{ bottom: -20%; } .about_value_area{ position: absolute; top: -100%; left: 0; width: 100%; height: 100%; z-index: 2; background-color: #790011; box-sizing: border-box; padding: 17% 10% 0 10%; transition: all 0.5s ease; } .about_value_area img{ height: 111px; } .about_value_txt{ display: flex; display: -webkit-flex; justify-content: space-between; align-items: center; } .about_value_area h2{ font-size: 26px; font-weight: bold; color: white; box-sizing: border-box; padding: 13% 0 7.5% 0; } .about_value_area h3{ font-size: 16px; line-height: 23px; color: white; } .about_value_area h4{ font-size: 2rem; color: rgba(0, 0, 0, .2); font-weight: bold; line-height: 83px; } .about_value_center:hover .about_value_area,.about_value_right:hover .about_value_area{ top: 0%; } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ .about_value_area img { height: 90px; } .about_value_area h3 { font-size: 14px; line-height: 20px; } } @media screen and (max-width:1440px){ .about_value_img::after {padding-bottom: 50%;} .about_value_img2::after {padding-bottom: 100%;} .about_value_text h1 {line-height: 45px;font-size: 22px;} .about_value_area h4 {font-size: 1.6rem;} .about_value_area h4 {line-height: 70px;} .about_value_area img {height: 80px;} .about_value_area h2 {font-size: 24px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .about_value_text h1 {line-height: 35px;font-size: 20px;} .about_value_text {width: 90%;border-radius: 12px;} .about_value_area img {height: 70px;} .about_value_area h4 {font-size: 1.3rem;} .about_value_area {padding: 8% 5% 0 5%;} .about_value_area h2 {padding: 10% 0 7.5% 0;} .about_value_area{display: flex;display: -webkit-flex;flex-direction: column;justify-content: center;} } @media screen and (max-width:959px){ .about_value_img::after {padding-bottom: 60%;} .about_value_img2::after {padding-bottom: 120%;} .about_value_area h4 {font-size: 1rem;line-height: 50px;} .about_value_area img {height: 60px;} .about_value_area h2 {font-size: 22px;} } @media screen and (max-width:767px){ .about_value_left {width: 100%;} .about_value_center {width: 50%;} .about_value_right {width: 50%;} .about_value_img::after {padding-bottom: 40%;} .about_value_img2::after {padding-bottom: 80%;} .about_value {flex-wrap: wrap;} .about_value_text h1 {line-height: 30px;font-size: 18px;} .about_value_area h2 {font-size: 20px;} .about_value_area h2 {padding: 5% 0 5% 0;} } @media screen and (max-width:560px){ .about_value_text h1 {line-height: 25px;font-size: 16px;} .about_value_text {border-radius: 10px;} .about_value_area h2 {font-size: 18px;} .about_value_area h3 {font-size: 12px;line-height: 17px;} .about_value_area img {height: 50px;} .about_value_area {padding: 0% 5% 0 5%;} } @media screen and (max-width:425px){ } /* 视频弹窗 */ .yuan_yuan{ display: block; width: 33px; height: 39px; background: url('static/imgs/red_i.png') center no-repeat; background-size: 100% 100%; animation: fingerHandle 4s ease infinite both } .yuan_i{ display: block; position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: 135px; height: 135px; cursor: pointer; border-radius: 50%; border: 2px solid white; display: flex; display: -webkit-flex; justify-content: center; align-items: center; } .yuan_p{ width: 80%; height: 80%; background-color: white; border-radius: 50%; display: flex; display: -webkit-flex; justify-content: center; align-items: center; animation: fingerHandle 4s ease infinite both } @keyframes fingerHandle { 0% { transform: none; } 70% { transform: scale3d(.9, .9, .9); } 100% { transform: none; } } .i_nav_v{ position: relative; } .i_nav_v::before { content: ''; width: 100%; height: 2px; background-color: var(--i_color); position: absolute; bottom: 0%; left: 50%; transform: translate(-50%,0); } .video_btn{display:block; width:.86rem; height:.86rem; margin:.3rem auto 0; border:4px solid #FFF; position:relative; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; cursor:pointer; z-index:2} .video_btn:before{content:""; position:absolute; top:50%; left:55%; transform:translate(-50%,-50%); width:0; height:0; border-top:.18rem solid transparent; border-bottom:.18rem solid transparent; border-left:.24rem solid #FFF} .video_area{position: relative; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9999;display:none;position:fixed; width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.4);} .videos{ border:1px solid #080808;position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9999; width:80%; background:#000} .vclose{position:absolute; right:11%; top:17%; border-radius:100%; cursor:pointer;width: 40px;height: 40px;transition: all 0.5s ease;} .vclose:hover{ transform: rotate(180deg); } .home_viedo video{ width: 100%; } .home_videos{ position: relative; height: 100%; } .home_videos::after{ display: block; content: ''; padding-bottom: 40.5%; } .home_videos video{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; object-fit: cover; height: 68%; } @media screen and (max-width:1600px){ .home_videos video {width: 1000px;height: 427px;} } @media screen and (max-width:1440px){ .yuan_i{width: 80px;height: 80px;top: 50%;} } @media screen and (max-width:1366px){ .home_videos video {width: 800px;height: 344px;} } @media screen and (max-width:1200px){ .home_videos video {width: 730px;height: 316px;} .vclose {right: 9%;top: 23%;} .yuan_i{width: 80px;height: 80px;top: 50%;} .yuan_yuan {width: 23px;height: 29px;} } @media screen and (max-width:959px){ .home_videos video {width: 700px;height: 300px;} .vclose {right: 1%;top: 26%;} } @media screen and (max-width:767px){ .home_videos video {width: 500px;height: 216px;} .vclose {right: 1%;top: 32%;} .yuan_i{width: 50px;height: 50px;top: 50%;} .yuan_yuan {width: 13px;height: 19px;} } @media screen and (max-width:560px){ .home_videos video {width: 400px;height: 172px;} } @media screen and (max-width:425px){ .home_videos video {width: 300px;height: 127px;} .vclose {right: 1%;top: 37%;} } /* 历史进程 */ .about_history{ width: 100%; background: url('static/imgs/about_history.jpg') center no-repeat; background-size: cover; padding-top: 90px; } .about_history_area{ padding: 60px 0 120px 0; } @media screen and (max-width:1440px){ .about_history {padding-top: 80px;} .about_history_area {padding: 40px 0 100px 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .about_history {padding-top: 60px;} .about_history_area {padding: 20px 0 80px 0;} } @media screen and (max-width:959px){ .about_history {padding-top: 40px;} .about_history_area {padding: 10px 0 40px 0;} } @media screen and (max-width:767px){ .about_history_area {padding: 0px 0 20px 0;} } @media screen and (max-width:560px){ .about_history_area {padding: 0px 0 0px 0;} } /* COMPANY DEVELOPMENT PROCESS */ .in_history_list{margin:0 auto; position:relative; overflow:hidden} .in_history_list:before{content:""; position:absolute; top:52px; left:50%; transform:translate(-50%,0); width:76%; height:1px; background:#d4d4d4} .in_history_nav{width:100%; margin:0 auto; cursor:pointer; position:relative; overflow:hidden} .in_history_nav .swiper-wrapper{position:relative; width:100%; height:100%; z-index:1; display:flex} .in_history_nav .swiper-slide{text-align:center; box-sizing:border-box; padding:0 0px; flex-shrink:0; position:relative} /* 骞翠唤 */ .in_history_nav .num_box{margin-bottom:10px; position:relative} .in_history_nav .num_box h6{text-align:center; font-size:0px; color:#BBB; line-height:30px} .in_history_nav .swiper-slide-active h6{color:#1E1E1E; font-weight:bold} /* 鍦� */ .in_history_nav .yuan{display:block; margin:0 auto; width:24px; height:24px; position:relative; z-index:2} .in_history_nav .yuan:before{opacity:0; content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; background:var(--i_color); -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -webkit-animation:dot 1.6s infinite ease; animation:dot 1.6s infinite ease; z-index:-2} .in_history_nav .yuan:after{content:""; position:absolute; top:5px; left:50%; transform:translate(-50%,0); width:14px; height:14px; background:#FFF; box-sizing:border-box; border:1px solid #d4d4d4; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; z-index:-1} .in_history_nav .swiper-slide-active .yuan:after{border-color:var(--i_color)} .in_history_nav .swiper-slide-active .yuan:before, .in_history_nav .swiper-slide:hover .yuan:before{opacity:.3} .in_history_nav .yuan: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} @keyframes dot { 0% { width: 14px; height: 14px; } 50% { width: 24px; height: 24px; } 100% { width: 14px; height: 14px; } } .in_history_nav .swiper-slide:hover .yuan::after{ background-color: var(--i_color); border: 1px solid var(--i_color); } .in_history_nav .swiper-slide img{ transition: all 0.5s ease; } .in_history_nav .swiper-slide:hover img{ width: 105%; height: 105%; } .in_history_nav .text{display:block; margin-top:50px; position:relative} .in_history_nav .swiper-slide-active .text:before{background:#000} .in_history_nav .text h2{font-size:36px;margin-bottom: 30px; color:var(--i_color2); font-weight:bold} .in_history_nav .text p{margin-top:35px; font-size:16px; color:#727272; line-height:24px;text-align: left;box-sizing: border-box;padding-left: 20px;position: relative;} .in_history_nav .text p::after{ content: ''; position: absolute; top: 6px; left: 5px; width: 7px; height: 7px; background-color: #727272; border-radius: 50%; } .about_history_img{ position: relative; overflow: hidden; } .about_history_img::after{ content: ''; display: block; padding-bottom: 51%; } .about_history_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } /* 宸﹀彸绠ご */ .in_history_list .history-button-prev, .in_history_list .history-button-next{ position:absolute; top:15px; width:66px; height:66px; 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-border-radius:200px; -moz-border-radius:200px; border-radius:200px; -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; } .in_history_list .history-button-prev{left:0;border: 1px solid #9e9e9e; background:white url(static/imgs/arrow_left_hollow_bai2.svg) no-repeat center; background-size:20px} .in_history_list .history-button-next{right:0;border: 1px solid #9e9e9e; background:white url(static/imgs/arrow_right_hollow_bai2.svg) no-repeat center; background-size:20px} .in_history_list .swiper-button-disabled{cursor:not-allowed} .swiper-slide-active .yuan::after{ background-color: var(--i_color); } /* .in_history_list .history-button-next:hover{ background-color: var(--i_color); } */ @media screen and (max-width:1440px){ .in_history_list .history-button-prev, .in_history_list .history-button-next {width: 60px;height: 60px;top: 17px;} .in_history_nav .text h2 {font-size: 34px;} .in_history_nav .text {margin-top: 40px;} .in_history_nav .text p {margin-top: 30px;font-size: 15px;line-height: 22px;} .in_history_nav .text h2 {font-size: 30px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .in_history_nav .text h2 {font-size: 28px;} .in_history_nav .text {margin-top: 30px;} .in_history_nav .text p {margin-top: 20px;font-size: 14px;line-height: 20px;} .in_history_nav .text h2 {font-size: 20px;} .in_history_list:before {width: 68%;} .in_history_list .history-button-prev, .in_history_list .history-button-next {width: 50px;height: 50px;top: 25px;} } @media screen and (max-width:959px){ .in_history_nav .text h2 {font-size: 26px;} .in_history_nav .text h2 {margin-bottom: 20px;} .in_history_nav .text p {margin-top: 15px;font-size: 13px;line-height: 18px;} .in_history_list .history-button-prev, .in_history_list .history-button-next {width: 40px;height: 40px;top: 30px;} .in_history_list .history-button-prev {background-size: 14px;} .in_history_list .history-button-next {background-size: 14px;} } @media screen and (max-width:767px){ .in_history_nav .text h2 {font-size: 24px;} .in_history_list:before { width: 50%; } .in_history_nav .text h2 { margin-bottom: 15px; } } @media screen and (max-width:560px){ } /* 客户服务 */ .about_service{ --servive_width:95px; } .about_service{ box-sizing: border-box; width: 100%; background: url('static/imgs/about_service.jpg') center no-repeat; background-size: cover; padding: 100px 0 120px 0; } .about_service_div{ display: flex; display: -webkit-flex; } .about_service_left{ width: 48%; } .about_service_left h1{ font-size: 0.48rem; font-weight: bold; color: var(--i_color2); box-sizing: border-box; padding-bottom: 20px; text-transform: uppercase; position: relative; } .about_service_left h1::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 135px; height: 4px; background-color: var(--i_color); } .about_service_left h2{ font-size: 18px; color: #737373; box-sizing: border-box; padding: 25px 0 35px 0; } .about_service_left div{ overflow: hidden; position: relative; width: 100%; } .about_service_left div::after{ content: ''; display: block; padding-bottom: 37.5%; } .about_service_left img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: all 3s ease; } .about_service_right{ width: 52%; box-sizing: border-box; padding-left: 6%; margin-top: 40px; } .about_service_right li{ display: flex; display: -webkit-flex; margin-bottom: 50px; transition: all 0.5s ease; } .about_service_top{ width: var(--servive_width); height: var(--servive_width); display: flex; display: -webkit-flex; justify-content: center; align-items: center; box-shadow: 0 0 7px rgba(0, 0, 0, .2); border-radius: 8px; position: relative; z-index: 1; transition: all 0.5s ease; } .about_service_bom{ width: calc(100% - var(--servive_width)); box-sizing: border-box; padding-left: 8.5%; } .about_service_top img{ width: 52px; } .about_service_bom h3{ font-size: 24px; color: var(--i_color2); font-weight: bold; } .about_service_bom h4{ font-size: 16px; line-height: 24px; color: #727272; padding-top: 10px; } .about_service_right li:hover .about_service_top{ box-shadow: none; } .about_service_right li:hover img{ filter: brightness(200); -webkit-filter: brightness(200); } .about_service_right li .about_service_top::after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--i_color); transform: scale(0.5); opacity: 0; border-radius: 5px; transition: all 500ms ease 100ms; z-index: -1; } .about_service_right li:hover .about_service_top::after{ transform: scale(1); opacity: 1; border-radius: 8px; } .about_service_right li:hover h3{ color: var(--i_color); } .about_service_left img:hover{ width: 110%; height: 110%; } @media screen and (max-width:1880px){ .about_service_left h1 {font-size: 0.46rem;} .about_service_left h2 {font-size: 17px;} } @media screen and (max-width:1600px){ .about_service_bom h3 {font-size: 21px;} .about_service_bom h4 {font-size: 15px;line-height: 20px;} .about_service {--servive_width: 80px;} .about_service_top img {width: 45px;} .about_service_right {margin-top: 20px;} } @media screen and (max-width:1440px){ .about_service_left h1 {font-size: 0.44rem;} .about_service_bom {padding-left: 6.5%;} .about_service_right {padding-left: 4%;} .about_service_right {margin-top: 10px;} .about_service_bom h3 {font-size: 20px;} .about_service_left h2 {font-size: 14px; padding: 20px 0 30px 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .about_service_left h1 {font-size: 0.4rem;} .about_service_right li {margin-bottom: 30px;} .about_service_bom h3 {font-size: 18px;} .about_service_bom h4 {font-size: 14px;line-height: 18px;} .about_service {padding: 80px 0 100px 0;} } @media screen and (max-width:959px){ .about_service_left h1 {font-size: 0.32rem;} .about_service {--servive_width: 60px;} .about_service_top img {width: 33px;} .about_service_bom h4 {font-size: 12px;line-height: 15px;} .about_service_bom h3 {font-size: 14px;} .about_service_left h1::after {width: 100px;} .about_service {padding: 60px 0 80px 0;} } @media screen and (max-width:767px){ .about_service_left {width: 100%;} .about_service_right {width: 100%;padding-left: 0%;margin-top: 20px;} .about_service_div {flex-wrap: wrap;} .about_service_bom h3 {font-size: 18px;} .about_service_bom h4 {font-size: 14px;line-height: 18px;} .about_service_bom {padding-left: 3.5%;} .about_service_left h2 {font-size: 15px;padding: 20px 0 20px 0;} .about_service_left h1::after {width: 80px;} .about_service {padding: 40px 0 60px 0;} } @media screen and (max-width:560px){ .about_service_bom h4 {font-size: 13px;line-height: 16px;} .about_service_left h1 {padding-bottom: 10px;} .about_service_bom h3 {font-size: 16px;} .about_service_left h1::after {width: 70px;height: 2px;} .about_service {padding: 40px 0 40px 0;} } @media screen and (max-width:425px){ } /* ----------------------------------contact-------------------------- */ .contact{ width: 100%; background: url('static/imgs/contact.jpg') center no-repeat; background-size: cover; position: relative; } .contact_us{ box-sizing: border-box; padding: 165px 0; } .contact .in_position{ top: 0; left: 0; bottom:unset; } .contact_us h1{ font-size: 0.4rem; color: var(--i_color); font-weight: bold; text-transform: uppercase; } .contact_us h2{ font-size: 18px; color: var(--i_color2); box-sizing: border-box; padding: 30px 60% 45px 0; } .contact_us_article{ width: 47.6%; } /* contact 表单 */ #wpforms-32{--input_font_size:14px; --input_height:42px} #wpforms-32{width:100%; margin:0 auto; padding:0} #wpforms-form-32{width:100%; overflow:hidden} #wpforms-32 input, #wpforms-32 button{margin:0; padding:0; border:none; background:none} #wpforms-32 .wpforms-field{padding:0; margin:0} #wpforms-32 .wpforms-error-container{line-height:16px} #wpforms-32 .wpforms-field-container{width:100%; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} #wpforms-32 .wpforms-submit-container{padding:0!important; width:170px; height:var(--input_height); background:var(--i_color); position:relative;} #wpforms-32 .wpforms-field-label{font-size: 0px;} #wpforms-32 .wpforms-field{width:100%; margin-bottom:10px; padding-bottom:20px; background:transparent; overflow:hidden} #wpforms-32 .wpforms-field:nth-child(1),#wpforms-32 .wpforms-field:nth-child(3){margin-right:20px} #wpforms-32 .wpforms-field:nth-child(1), #wpforms-32 .wpforms-field:nth-child(2),#wpforms-32 .wpforms-field:nth-child(3),#wpforms-32 .wpforms-field:nth-child(4){width:calc(50% - 10px)} #wpforms-32 input{height:var(--input_height)} #wpforms-32 textarea{min-height:100px} #wpforms-32 input, #wpforms-32 textarea{width:100%; max-width:100%!important; font-size:var(--input_font_size); color:#555; box-sizing:border-box; background-color: white; line-height:var(--input_height); padding:0 10px} #wpforms-32 input::-webkit-input-placeholder{color:#7c7c7c; font-size:var(--input_font_size)} #wpforms-32 input::-moz-placeholder{color:#7c7c7c; font-size:var(--input_font_size)} #wpforms-32 input::-moz-placeholder{color:#7c7c7c; font-size:var(--input_font_size)} #wpforms-32 input::-ms-input-placeholder{color:#7c7c7c; font-size:var(--input_font_size)} #wpforms-32 textarea::-webkit-input-placeholder{color:#7c7c7c; font-size:var(--input_font_size)} #wpforms-32 textarea::-moz-placeholder{color:#7c7c7c; font-size:var(--input_font_size)} #wpforms-32 textarea::-moz-placeholder{color:#7c7c7c; font-size:var(--input_font_size)} #wpforms-32 textarea::-ms-input-placeholder{color:#7c7c7c; font-size:var(--input_font_size)} #wpforms-32 #wpforms-32-field_1-error, #wpforms-32 #wpforms-32-field_2-error, #wpforms-32 #wpforms-32-field_3-error, #wpforms-32 #wpforms-32-field_4-error{position:absolute; font-size:14px} #wpforms-32 .wpforms-submit-container button{overflow: hidden;font-weight: bold; width:100%; height:var(--input_height); font-size:16px; color:#FFF; line-height:var(--input_height); cursor:pointer; text-transform:uppercase; position:relative; z-index:2} #wpforms-32 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} #wpforms-32 .wpforms-field-container>div {position: relative;} #wpforms-32 .wpforms-required-label { color: red; font-size: 14px!important; text-align: right; position: absolute; left: 2px; top: 36%; transform: translate(0,-50%); } #wpforms-32-field_5-container .wpforms-required-label{top: 20%;} #wpforms-32 .wpforms-submit-container button::before{ webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: -1; } #wpforms-32 .wpforms-submit-container button:hover::before{ top: -50%; } @media screen and (max-width:1440px){ .contact_us_article {width: 50.6%;} .contact_us h2 {padding: 20px 50% 40px 0;} .contact_us {padding: 140px 0 120px 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .contact_us_article {width: 60.6%;} } @media screen and (max-width:959px){ .contact_us_article {width: 70.6%;} .contact_us h2 {padding: 20px 30% 40px 0;} .contact_us h1 {font-size: 0.38rem;} .contact_us {padding: 120px 0 100px 0;} } @media screen and (max-width:767px){ .contact_us_article {width: 90.6%;} .contact_us h2 {padding: 20px 10% 40px 0;} .contact_us h2 {font-size: 16px;} .contact_us {padding: 100px 0 80px 0;} } @media screen and (max-width:560px){ .contact_us_article {width: 100%;} .contact_us h2 {padding: 10px 0% 20px 0;} .contact_us h2 {font-size: 14px;} .contact_us {padding: 80px 0 50px 0;} .contact_us h1 {font-size:26px;} } /* --------------------------------project ----------------------*/ .project_header_area{ width: 100%; border-bottom: 1px solid #c9c9c9; margin-bottom: 70px; } .project_header{ display: flex; display: -webkit-flex; justify-content: center; flex-wrap: wrap; margin-top: 25px; } .project_header li{ margin-right: 100px; position: relative; } .project_header a{ display: block; font-size: 18px; color: #595959; transition: all 0.5s ease; box-sizing: border-box; padding: 25px 0 18px 0; } .project_header li:hover a{ color: var(--i_color); } .dian{ width: 12px; height: 12px; position: relative; background-color: var(--i_color); display: block; border-radius: 50%; opacity: 0; margin: 0 auto; margin-bottom: -6px; } .project_header li:hover .dian{ opacity: 1; } .dian::before{ content: ''; opacity: 0.3; width: 12px; height: 12px; background-color: var(--i_color); -webkit-animation:dots 1.6s infinite ease; animation:dots 1.6s infinite ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; } @keyframes dots { 0% { width: 14px; height: 14px; } 50% { width: 24px; height: 24px; } 100% { width: 14px; height: 14px; } } .active_project i{ opacity: 1; } .active_project a{ color: var(--i_color); } .project_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .project_ul li{ width: 31.8%; overflow: hidden; box-sizing: border-box; margin-right: 1.3%; margin-bottom: 55px; } .project_ul_img{ position: relative; overflow: hidden; } .project_ul_img::after{ content: ''; display: block; padding-bottom: 61.2%; } .project_ul_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .project_ul_text { position: relative; box-sizing: border-box; margin-top: -35px; z-index: 2; background-color: white; width: 70%; transition: all 0.5s ease; } .project_ul_text::after{ content: ''; position: absolute; top: 50%; right: 120%; transform: translate(0%,-50%); width: 47px; height: 47px; background: url('static/imgs/fen.png') center no-repeat; background-size: 100% 100%; transition: all 1s ease; z-index: -1; } .project_ul_text h1{ width: 100%; color: #4c4b4b; font-size: 16px; line-height: 74px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; transition: all 0.5s ease; padding-left: 20px; } .project_ul li:hover .project_ul_text{ width: 100%; } .project_ul li:hover h1{ width: 86%; } .project_ul li:hover{ box-shadow: 0 0 8px rgba(0,0,0,0.2); } .project_ul li:hover .project_ul_text::after{ right: 3%; } .project_ul li:hover img{ width: 110%; height: 110%; } @media screen and (max-width:1880px){ .project_ul li {margin-bottom: 45px;} } @media screen and (max-width:1600px){ .project_ul li {margin-bottom: 35px;} .project_header a {font-size: 16px;} .project_ul_text h1 {font-size: 15px;line-height: 60px;} } @media screen and (max-width:1440px){ .project_header a {font-size: 14px;padding: 15px 0;} .project_ul_text::after {width: 35px;height: 35px;} .project_ul_text h1 {font-size: 14px;line-height: 55px;} .project_header_area {margin-bottom: 50px;} .project_header li {margin-right: 80px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .project_header_area {margin-bottom: 40px;} .dian {width: 10px;height: 10px;} .dian::before {width: 10px;height: 10px;} .project_header li {margin-right: 60px;} .project_ul_text h1 {font-size: 13px;line-height: 50px;} .in_page a {width: 35px;line-height: 35px;} } @media screen and (max-width:959px){ .project_header_area {margin-bottom: 20px;} .project_header a {font-size: 12px;padding: 10px 0;} .project_header li {margin-right: 40px;} .project_ul_text h1 {padding-left: 10px;} .project_ul_text h1 {font-size: 12px;line-height: 45px;} .project_ul li {margin-bottom: 25px;} } @media screen and (max-width:767px){ .project_ul li {width: 48.8%;margin-right: 1.2%;margin-bottom: 20px;} .project_header li {margin-right: 20px;} } @media screen and (max-width:560px){ .project_header li {margin-right: 10px;} } @media screen and (max-width:425px){ } /* 页数 */ .in_page_box{text-align:center; margin-bottom:90px; overflow:hidden} .in_page{display:inline-block} .in_page a{float:left;transition: all 0.5s ease; display:block; margin:0 4px; width: 40px;; line-height:40px; font-size:12px; color:#959595; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; border:1px solid #959595} .in_page a:hover, .in_page .current{border-color:var(--i_color)!important; background:var(--i_color); color:#FFF!important} @media screen and (max-width:1440px){ .in_page_box{margin-bottom:80px;} } @media screen and (max-width:1200px){ .in_page_box{margin-bottom:60px;} } @media screen and (max-width:959px){ .in_page_box{margin-bottom:40px;} .in_page a {width: 30px;line-height: 30px;} } @media screen and (max-width:767px){ .in_page_box{margin-bottom:20px;} } /* ---------------------------------------------project 详情页--------------------- */ /*图片查看区 */ .in_factory_cont{--sm_pic_width:14%} .in_factory_cont{background:#FFF; position:relative; overflow:hidden} .in_factory_cont:before{content:""; display:block; padding-bottom:45%} /* 缂╃暐鍥� */ .in_factory_list_box{position:absolute; top:0; right:0; width:var(--sm_pic_width); height:100%; box-sizing:border-box; padding:40px 0} .in_factory_list{ height: 100%; overflow: hidden; padding-left: 7px; box-sizing: border-box; } .in_factory_list .swiper-slide{cursor:pointer} .in_factory_list .img{width:100%; height:100%; box-sizing:border-box; border:2px solid var(--border_color); position:relative; overflow:hidden;border-radius: 5px;} .in_factory_list .img img{width:100%; height:100%; object-fit:cover;filter: brightness(0.5);-webkit-filter: brightness(0.5);} .in_factory_list .swiper-slide-thumb-active .img{border:3px solid #9d0016;border-radius: 5px;} .in_factory_list .swiper-slide-thumb-active img{filter: brightness(1);-webkit-filter: brightness(1);} .in_factory_list .swiper-slide-thumb-active{position: relative;} .in_factory_list .swiper-slide-thumb-active::after{ content: ''; position: absolute; top: 50%; left: -7px; transform: translate(0%,-50%); width: 8px; height: 18px; clip-path: polygon(100% 0, 0 55%, 100% 100%); background-color: #9d0016; } .infactory-button-prev, .infactory-button-next{ opacity:.7; position:absolute; left:50%; transform:translate(-50%,0); width:60px; height:30px; background:#000; 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; } .infactory-button-prev{top:4px; background:url("static/imgs/arrow_up_hollow_hei.svg") no-repeat center; background-size:contain} .infactory-button-next{bottom:4px; background:url("static/imgs/arrow_down_hollow_hei.svg") no-repeat center; background-size:contain} .infactory-button-prev.swiper-button-disabled, .infactory-button-next.swiper-button-disabled{cursor:not-allowed; opacity:.1} /* 澶у浘 */ .in_factory_show_box{position:absolute; top:0; left:0; width:calc(100% - var(--sm_pic_width) - 20px); height:100%; box-sizing:border-box; padding:0 0; margin:0 auto} .in_factory_show{width:100%; height:100%; box-sizing:border-box; border:1px solid var(--border_color); position:relative; overflow:hidden;border-radius: 10px;} .in_factory_show .swiper-wrapper{display:flex; position:relative; width:100%; height:100%; z-index:1} .in_factory_show .swiper-slide{ height:100%; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .in_factory_show .img{width:100%; height:100%; position:relative; overflow:hidden;border-radius: 0px;} .in_factory_show .img img{width:100%; height:100%; object-fit:cover} .infactory-pagination{display:none; margin:16px auto 0} .infactory-pagination .swiper-pagination-bullet{width:8px; height:8px; display:inline-block; margin:0 4px; background:#E5E5E5; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .infactory-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} @media screen and (max-width:1440px){ h1.products_name{font-size:20px} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ h1.products_name{margin:30px 0 20px; font-size:18px} } @media screen and (max-width:959px){ .in_factory_cont:before{display:none} .in_factory_show_box{position:initial; width:100%} .in_factory_show .img{width:100%; position:relative; overflow:hidden} .in_factory_show .img:before{content:""; display:block; padding-bottom:61%} .in_factory_show .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)} .in_factory_list_box{margin-top:10px; padding:0 0; position:relative; width:100%; height:initial} .in_factory_list{width:calc(100% - 60px); margin:0 auto} .in_factory_list_box .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .in_factory_list_box .swiper-slide{height:100%; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer} .in_factory_list .img{height:auto} .in_factory_list .img:before{content:""; display:block; padding-bottom:61%} .in_factory_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover} .infactory-button-prev, .infactory-button-next{top:50%; transform:translate(0,-50%); width:30px; height:100%} .infactory-button-prev{left:0; background:url("static/imgs/arrow_left_hollow_hei.svg") no-repeat center; background-size:18px} .infactory-button-next{left:initial; right:0; background:url("static/imgs/arrow_right_hollow_hei.svg") no-repeat center; background-size:18px} .in_factory_list .swiper-slide-thumb-active::after { content: ''; position: absolute; top: -7px; left: 50%; transform: translate(-50%,0%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 18px; height: 8px; } } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ h1.products_name{font-size:17px} } /* 图片查看区自定义修改 */ .in_factory_cont{ box-sizing: border-box; } .wrap_73{ width: 73%; margin: 0 auto; } .projecy_single_cont{ box-sizing: border-box; padding: 20px; box-shadow: 0 0 5px rgba(0,0,0,0.1); border-radius: 5px; } .projecy_single h2{ padding-bottom: 40px; font-size: 25px; color: #414141; text-align: center; } @media screen and (max-width:1880px){ .projecy_single h2 {padding-bottom: 30px;font-size: 24px;} } @media screen and (max-width:1600px){ .projecy_single h2 {font-size: 23px;} } @media screen and (max-width:1440px){ .projecy_single h2 {font-size: 22px;} .wrap_73{width: 80%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .projecy_single h2 {padding-bottom: 20px;font-size: 21px;} .wrap_73{width: 84%;} } @media screen and (max-width:959px){ .projecy_single h2 {font-size: 20px;} .wrap_73{width: 88%;} } @media screen and (max-width:767px){ .projecy_single h2 {font-size: 18px;} .wrap_73{width: 94%;} } @media screen and (max-width:560px){ .projecy_single h2 {font-size: 16px;} } @media screen and (max-width:425px){ } /* 编辑框 */ .projecy_single_area{ padding-bottom: 80px; } .projecy_single_txt{ box-sizing: border-box; padding: 50px 0 70px 0; } .projecy_single_btn{ width: 190px; box-sizing: border-box; border: 2px solid var(--i_color); display: flex; display: -webkit-flex; justify-content: center; align-items: center; position: relative; overflow: hidden; webkit-transition-duration: 800ms; transition-duration: 800ms; margin-bottom: 70px; } .projecy_single_btn a{ font-size: 16px; color: var(--i_color); line-height: 38px; box-sizing: border-box; padding-right: 8px; text-transform: uppercase; webkit-transition-duration: 800ms; transition-duration: 800ms; } .projecy_single_btn i{ width: 20px; height: 10px; background: url('static/imgs/red_right.png') center no-repeat; background-size: 100% 100%; } .projecy_single_btn:hover:before { top: -50%; } .projecy_single_btn:before { webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: -1; } .projecy_single_btn:hover{ border: 2px solid white; } .projecy_single_btn:hover a{ color: white; } .projecy_single_btn:hover i{ filter: brightness(200); } /* 上一篇 下一篇 */ .ar_fot { overflow: hidden; } .ar_fot ul { overflow: hidden; display: flex; display: -webkit-flex; flex-direction: row; align-items: flex-end; } .ar_fot li { width: 50%; overflow: hidden; display: flex; display: -webkit-flex; margin-bottom: 20px; align-items: center; } .ar_fot li b { display: block; text-align: right; font-size: 18px; color: var(--i_color2); } .ar_fot_div{ box-sizing: border-box; padding-right: 20px; width: calc(100% - 47px); } .ar_fot ul i{ display: block; width: 47px; height: 47px; background: url('static/imgs/fen.png') center no-repeat; background-size: 100% 100%; } .ar_fot li:first-child i{ transform: rotate(180deg); } .ar_fot li a,.ar_fot li span { display: block; font-size: 18px; width: 100%; text-align: right; } .ar_fot li a { color: var(--i_color2); overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .ar_fot li span { color: #999; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .ar_fot li a:hover { color: var(--i_color) } .ar_fot li:nth-child(1) .ar_fot_div{ padding: 0 0 0 20px; } .ar_fot li:nth-child(1) .ar_fot_div b,.ar_fot li:nth-child(1) .ar_fot_div a,.ar_fot li:nth-child(1) .ar_fot_div span{ text-align: left; } .ar_fot li:nth-child(2){ flex-direction: row-reverse; } .ar_fot li:nth-child(1) span,.ar_fot li:nth-child(1) a{ padding-right: 1%; } .ar_fot li:nth-child(2) span,.ar_fot li:nth-child(2) a{ padding-left: 1%; } @media screen and (max-width:1440px){ .projecy_single_area {padding-bottom: 60px;} .ar_fot li a, .ar_fot li span {font-size: 17px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .projecy_single_area {padding-bottom: 40px;} .ar_fot li a, .ar_fot li span {font-size: 16px;} .projecy_single_btn {width: 150px;margin-bottom: 50px;} .projecy_single_btn a {font-size: 15px;line-height: 32px;} } @media screen and (max-width:959px){ .projecy_single_area {padding-bottom: 20px;} .ar_fot li a, .ar_fot li span {font-size: 15px;} .ar_fot ul i {width: 40px;height: 40px;} .projecy_single_btn {margin-bottom: 40px;} .ar_fot ul { flex-wrap: wrap; } .ar_fot li {width: 100%;} } @media screen and (max-width:767px){ .projecy_single_area {padding-bottom: 10px;} .ar_fot li a, .ar_fot li span {font-size: 14px;} .ar_fot ul i {width: 35px;height: 35px;} .ar_fot li b {font-size: 16px;} } @media screen and (max-width:560px){ .projecy_single_area {padding-bottom: 0px;} .ar_fot li a, .ar_fot li span {font-size: 12px;} } /* -------------------------products------------------- */ .products{ display: flex; display: -webkit-flex; box-sizing: border-box; } .products_left{ width: 30.72%; box-sizing: border-box; background-color: #f6f6f6; padding: 90px 1.3% 100px 11%; } .products_left h1{ width: 100%; background-color: var(--i_color); line-height: 60px; color: white; font-size: 23px; font-weight: bold; text-transform: uppercase; box-sizing: border-box; padding-left: 8.7%; } /* 侧边栏 */ .products_left_ul>li{ background-color: white; border-bottom: 1px solid #dbdbdb; position: relative; padding: 13px 0; display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; } .products_left_ul>li>a{ display: block; font-size: 16px; color: var(--i_color2); box-sizing: border-box; padding:0 8.7%; transition: all 0.5s ease; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .products_left_ul>li>i{ } .products_left_ul>li>i::after{ content: '+'; position: absolute; padding-left: 5px; float: right; font-size: 22px; color: #5d5d5d; font-style: normal; padding: 10px 15px; position: absolute; right: 0; top: 0; cursor: pointer; } .products_left_ul ul{ display: none; } .products_left_ul ul>li{ display: flex; display: -webkit-flex; flex-direction: column; box-sizing: border-box; position: relative; } .products_left_ul ul>li>a{ font-size: 15px; color: #686868; display: block; padding-left: 12.7%; line-height: 45px; border-top: 1px solid #dbdbdb; transition: all 0.5s ease; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .products_left_ul ul>li:nth-child(1){ padding-top: 13px; } .products_i::after{ box-sizing: border-box; content: '-' !important; padding-left: 5px !important; float: right !important; font-size: 36px !important; font-style: normal !important; padding: 8px 15px; position: absolute; right: 0; top: -12px !important; cursor: pointer; } .products_li{ padding: 13px 0 0 0 !important; transition: all 0.5s ease; } .products_left_ul li{ transition: all 0.5s ease; } .products_left_ul li:hover>a{ color: var(--i_color); } .products_left_ul>li i:hover::after{ color: var(--i_color); } .products_left_ul li::before{ content: ''; width: 2px; height: 0%; background-color: var(--i_color); position: absolute; top: 0; left: 0; transition: all 0.5s ease; } .products_left_ul>li:hover::before{ height: 45px; } .products_left_ul>li:hover>a{ padding-left: 10%; } .products_left_ul>li:hover>i::after{ color: var(--i_color); } .products_active>a{ color: var(--i_color) !important; } .products_active::before{ height: 45px !important; } .select_active2 a{ color: var(--i_color) !important; } /* 产品列表 */ .products_list{ width: 69.28%; box-sizing: border-box; padding: 90px 11% 10px 2.62%; } .products_list_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .products_list_ul a{ display: block; } .products_list_ul li{ width: 30.6%; box-sizing: border-box; padding-top: 50px; position: relative; overflow: hidden; border: 1px solid #e8e8e8; margin-bottom: 60px; margin-right: 2.5%; } .products_list_div{ box-sizing: border-box; padding: 0 7%; } .products_list_div h1{ font-size: 0.2rem; line-height: 0.25rem; height: 0.5rem; font-weight: bold; color: var(--i_color2); overflow:auto; box-sizing: border-box; text-align: center; transition: all 0.5s ease; margin-bottom: 0.05rem; } /*滚动条*/ .products_list_div h1::-webkit-scrollbar{width:1px; height:8px} .products_list_div h1::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); background:var(--i_color)} .products_list_div h1::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); border-radius:0; background:#F1F1F1} .products_list_div h2{ font-size: 15px; color: var(--i_color2); line-height: 19px; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 37px; box-sizing: border-box; } .products_list_img{ position: relative; overflow: hidden; } .products_list_img::after{ content: ''; display: block; padding-bottom: 100%; } .products_list_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; transition: all 0.7s ease; } .products_list_ul i{ display: block; width: 0.53rem; height: 0.53rem; background: url('static/imgs/red_right.png') center no-repeat; background-size: 100% 100%; position: absolute; bottom: 0; right: -0.6rem; transition: all 0.5s ease; } .products_list_ul li:hover i{ right: 0px; } .products_list_ul li:hover h1{ color: var(--i_color); } .products_list_ul li:hover img{ width: 110%; height: 110%; } .products_list_ul li:hover{ box-shadow: 0 0 7px rgba(0,0,0,0.15); } @media screen and (max-width:1880px){ .products_left {padding: 90px 1.3% 100px 10%;} .products_list {padding: 90px 10% 10px 2.62%;} } @media screen and (max-width:1600px){ .products_left {padding: 90px 1.3% 100px 8%;} .products_list {padding: 90px 8% 10px 2.62%;} .products_left h1 {font-size: 22px;} .products_list_ul li {padding-top: 40px;margin-bottom: 50px;} } @media screen and (max-width:1440px){ .products_left {padding: 80px 1.3% 80px 5%;} .products_list {padding: 80px 5% 0px 2.62%;} .products_left h1 {font-size: 20px;} .products_list_ul li {padding-top: 30px;margin-bottom: 40px;} } @media screen and (max-width:1366px){ .products_left {padding: 80px 1.3% 80px 4%;} .products_list {padding: 80px 4% 0px 2.62%;} } @media screen and (max-width:1200px){ .products_left {padding: 60px 1% 60px 1%;} .products_list {padding: 60px 2% 0px 2%;} .products_left h1 {font-size: 18px;} .products_list_div h1 {font-size: 0.16rem;} .products_list_ul li {padding-top: 20px;margin-bottom: 20px;} .products_list_div h2 {font-size: 13px;line-height: 16px;height: 33px;} .products_left_ul>li>a {font-size: 15px;} .products_left_ul ul>li>a{font-size: 14px;} .products_list_div {padding: 0 5%;} } @media screen and (max-width:959px){ .products_left {padding: 40px 1% 40px 1%;} .products_list {padding: 40px 2% 0px 2%;} .products_list_ul li {width: 45.6%;} .products_left h1 {line-height: 50px;font-size: 16px;} .products_left_ul>li>a {font-size: 14px;} .products_left_ul ul>li>a{font-size: 13px;} .products_list_div {padding: 0 2%;} } @media screen and (max-width:767px){ .products_left {width: 100%;} .products_list {width: 100%;} .products {flex-wrap: wrap;} .products_left_ul>li>a {padding: 0 3.7%;} .products_left_ul ul>li>a {padding-left: 5.7%;} .products_left_ul>li:hover>a {padding-left: 4%;} .products_left h1 {padding-left: 3.7%;} .products_list_ul li {margin-right: 0%;} .products_list_ul li:nth-child(even){margin-left: auto;} .products_list_ul li {width: 48.6%;} .products_list_div {padding: 0 5%;} } /* -----------------------产品详情-------------- */ .single_grid{ width: 100%; background: url('static/imgs/single_grid.jpg') center no-repeat; background-size: cover; box-sizing: border-box; padding: 125px 0 100px 0; position: relative; } .single_grid .in_position{ top: 0; left: 0; bottom:unset; } .single_grid_area { display: flex; display: -webkit-flex; } .single_grid_left{ width: 46.875%; box-sizing: border-box; padding: 30px 6% 0 10%; } .single_grid_right{ width: 53.125%; box-sizing: border-box; padding-right: 11%; } /* 产品图集 */ .u_partner_box{} .u_partner{position:relative} .u_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .u_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .u_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .u_partner_list .img{width:100%; box-sizing:border-box; border:1px solid rgba(0,0,0,.2); position:relative; overflow:hidden} .u_partner_list .img:before{content:""; display:block; padding-bottom:100%} .u_partner_list .img img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .u_partner_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} /* 指示器 */ .single_grid_left .pt-pagination{display:block; text-align:center; margin:35px auto 0} .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#BBB; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .u_partner .pt-button-prev, .u_partner .pt-button-next{position:absolute; top:50%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .u_partner .pt-button-prev:before, .u_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .u_partner .pt-button-prev{left:1px} .u_partner .pt-button-prev:before{content:"<"} .u_partner .pt-button-next{right:1px} .u_partner .pt-button-next:before{content:">"} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .u_partner .pt-button-prev, .u_partner .pt-button-next{display:none} .pt-pagination{display:block} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* 产品描述 */ .single_grid_right h1{ font-size: 28px; color: var(--i_color2); position: relative; box-sizing: border-box; padding-bottom: 25px; } .single_grid_right h1::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #c5c5c5; } .single_grid_text1{ margin: 25px 0; } .single_grid_text1 h2{ font-size: 18px; color: var(--i_color2); } .single_grid_text2{ margin-bottom: 25px; } .single_grid_text2 span,.single_grid_text2 p{ font-size: 16px; line-height: 23px; color: var(--i_color2); } .single_grid_text2 span{ color: var(--i_color) !important; font-weight: bold; display: inline; } .single_gridRight_ul{ } .single_gridRight_ul li{ display: flex; display: -webkit-flex; margin-bottom: 5px; } .single_gridRight_ul h3{ width: 49%; margin-right: 1%; font-size: 16px; font-weight: bold; background-color: white; box-sizing: border-box; line-height: 40px; padding-left: 10px; } .single_gridRight_ul h4{ width: 49%; margin-right: 1%; font-size: 16px; background-color: white; box-sizing: border-box; line-height: 40px; padding-left: 10px; } .single_gridRight_btn{ margin-top: 35px; display: flex; display: -webkit-flex; } .single_gridRight_btn h5{ font-size: 18px; color: white; line-height: 48px; margin-left: 10px; z-index: 2; } .single_wx i{ display: block; width: 25px; height: 23px; background: url('static/imgs/wx.png') center no-repeat; z-index: 2; } .single_load i{ display: block; width: 22px; height: 22px; background: url('static/imgs/load.png') center no-repeat; z-index: 2; } .single_gridRight_btn a{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; background-color: var(--i_color); width: 280px; overflow: hidden; position: relative; } .single_load{ margin-left: 20px; } .single_gridRight_btn a:hover:before { top: -50%; } .single_gridRight_btn a:before { webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: 1; } @media screen and (max-width:1880px){ .single_grid_right {padding-right: 10%;} .single_grid_left{padding: 30px 6% 0 10%;} } @media screen and (max-width:1600px){ .single_grid_right {padding-right: 8%;} .single_grid_right h1 {font-size: 26px;} } @media screen and (max-width:1440px){ .single_grid_right {padding-right: 6%;} .single_grid_right h1 {font-size: 22px;padding-bottom: 20px} .single_grid_text1 h2 {font-size: 17px;} .single_grid_text1 {margin: 20px 0;} .single_grid_text2 {margin-bottom: 20px;} .single_gridRight_btn a {width: 250px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .single_grid_right {padding-right: 4%;} .single_grid_left{padding: 20px 6% 0 10%;} .single_grid_right h1 {font-size: 20px;} .single_grid_text1 h2 {font-size: 16px;} .single_gridRight_btn h5 {font-size: 16px;} .single_grid {padding: 100px 0 80px 0;} } @media screen and (max-width:959px){ .single_grid_right {padding:0 2%;} .single_grid_right h1 {font-size: 16px;padding-bottom: 15px} .single_grid_text1 h2 {font-size: 14px;} .single_grid_text1 {margin: 15px 0;} .single_grid_text2 {margin-bottom: 15px;} .single_grid_left {width: 100%;} .single_grid_right {width: 100%;} .single_grid_area {flex-wrap: wrap;} .single_grid_left {padding: 40px 5%;} .single_grid {padding: 80px 0 60px 0;} } @media screen and (max-width:767px){ .single_grid_right h1 {font-size: 16px;padding-bottom: 10px} .single_grid_text1 {margin: 10px 0;} .single_grid_text2 {margin-bottom: 10px;} .single_grid {padding: 60px 0 40px 0;} .single_gridRight_ul h3 {font-size: 14px;} .single_gridRight_ul h4 {font-size: 14px;} .single_gridRight_btn h5 {font-size: 15px;} } @media screen and (max-width:560px){ .single_grid_right h1 {font-size: 15px;} .single_gridRight_btn {flex-direction: column;align-items: center;} .single_load {margin-left: 0px;margin-top: 20px;} .single_grid_text2 span,.single_grid_text2 p{font-size: 14px;} .single_gridRight_ul h3 {font-size: 12px;} .single_gridRight_ul h4 {font-size: 12px;} } /* 3切换 */ .single_grid_switch{ box-sizing: border-box; padding: 77px 0 168px 0; } .single_switch_ul{ display: flex; display: -webkit-flex; width: 100%; border-bottom: 1px solid #d1d1d1; } .single_switch_ul li{ font-size: 20px; line-height: 56px; color: var(--i_color2); box-sizing: border-box; padding: 0 40px; margin: 0 40px 0 0; cursor: pointer; position: relative; border-radius: 10px 0 0 0; min-width: 260px; text-align: center; } #tab_tit2 .current{ background-color: var(--i_color); color: white; } #tab_tit2 .current::after{ content: ''; position: absolute; top: 4px; left: -19px; width: 20px; height: 93%; background-color: var(--i_color); clip-path: polygon(100% 0, 0 100%, 100% 100%); } /* 切换内容 */ .single_switch_area{ box-sizing: border-box; padding-top: 60px; } .single_switch_areas{ min-width: 100%; overflow: auto; } .faqs{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .faqs li{ width: 49%; margin-bottom: 35px; transition: all 0.5s ease; box-sizing: border-box; border: 1px solid #d1d1d1; } .faqs li:nth-child(odd){ margin-right: 1%; } .faqs li:nth-child(even){ margin-left: 1%; } .faqs_top{ background-color: #efefef; box-sizing: border-box; padding: 18px 4.5%; display: flex; display: -webkit-flex; align-items: center; transition: all 0.5s ease; } .faqs_top i{ display: block; width: 25px; height: 23px; background: url('static/imgs/faqs.png') center no-repeat; } .faqs_top h1{ font-size: 18px; font-weight: bold; color: var(--i_color2); box-sizing: border-box; padding-left: 10px; transition: all 0.5s ease; } .faqs_bto{ box-sizing: border-box; padding: 25px 4.5%; border-top: 0px; } .faqs_bto p{ font-size: 16px; color: #787878; line-height: 24px; } .faqs li:hover .faqs_top{ background-color: var(--i_color); } .faqs li:hover h1{ color: white; } .faqs li:hover i{ filter: brightness(200); } .faqs li:hover{ box-shadow: 0 0 7px rgba(0,0,0,0.15); } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ .faqs_top h1 {font-size: 17px;} .faqs_bto p {font-size: 15px;line-height: 22px;} } @media screen and (max-width:1440px){ .faqs_top h1 {font-size: 16px;} .faqs_bto p {font-size: 14px;line-height: 20px;} .single_switch_ul li {font-size: 18px;line-height: 40px;min-width: 200px;} #tab_tit2 .current::after {height: 90%;} .single_switch_area {padding-top: 50px;} .faqs_top {padding: 14px 4.5%;} .faqs li {margin-bottom: 30px;} .single_grid_switch {padding: 60px 0 150px 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .single_switch_area {padding-top: 40px;} .faqs_bto {padding: 20px 4.5%;} .single_grid_switch {padding: 50px 0 120px 0;} } @media screen and (max-width:959px){ .single_grid_switch {padding: 40px 0 100px 0;} } @media screen and (max-width:767px){ .faqs li {width: 100%;margin: 0px !important;margin-bottom: 20px !important;} .single_switch_ul li {padding: 0 20px;margin: 0 20px 0 0;} .single_switch_ul li {min-width: 170px;} .single_grid_switch {padding: 40px 0 80px 0;} } @media screen and (max-width:560px){ .single_switch_area {padding-top: 20px;} .single_switch_ul li {padding: 0 0px;margin: 0 20px 0 0;} .single_switch_ul li {min-width: 150px;} #tab_tit2 .current::after {left: -18px;} .single_grid_switch {padding: 40px 0 40px 0;} } @media screen and (max-width:425px){ .single_switch_ul li {min-width: 130px;} } /* @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } */ /* 热销产品 */ .single_grid_hot{ width: 100%; background: url('static/imgs/hot.jpg') center no-repeat; background-size: cover; box-sizing: border-box; padding: 70px 0 110px 0; } /* 热销产品 */ .s_partner_box{padding-top: 60px;} .s_partner{position:relative} .s_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .s_partner_list .swiper-wrapper{padding: 10px 0; display:flex; position:relative; width:100%; z-index:1} .s_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; flex-direction: column; background-color: white; overflow: hidden; } .s_partner_list .img{width:100%; box-sizing:border-box; position:relative; overflow:hidden;border: 1px solid #dcdcdc;border-top: 0px;} .s_partner_list .img:before{content:""; display:block; padding-bottom:100%} .s_partner_list .img img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover; } .s_partner_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} /* 指示器 */ .pt-pagination{display:none; text-align:center; margin:20px auto 0} .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#BBB; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .s_partner .pt-button-prev, .s_partner .pt-button-next{position:absolute; top:50%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .s_partner .pt-button-prev:before, .s_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .s_partner .pt-button-prev{left:1px} .s_partner .pt-button-prev:before{content:"<"} .s_partner .pt-button-next{right:1px} .s_partner .pt-button-next:before{content:">"} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .s_partner .pt-button-prev, .s_partner .pt-button-next{display:none} .pt-pagination{display:block} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* 自定义 */ .single_hot_text{ box-sizing: border-box; padding:50px 7% 0 7%; border: 1px solid #dcdcdc; border-bottom: 0px; } .single_hot_text h1{ font-size: 22px; color: var(--i_color2); overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; text-align: center; font-weight: bold; } .single_hot_text h2{ font-size: 16px; line-height: 20px; color: #313133; box-sizing: border-box; margin-top: 25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 35px; text-align: center; } .s_partner_list i { display: block; width: 0.53rem; height: 0.53rem; background: url(static/imgs/red_right.png) center no-repeat; background-size: 100% 100%; position: absolute; bottom: 0; right: -0.6rem; transition: all 0.5s ease; } .s_partner_list .swiper-slide:hover i { right: 0px; } .s_partner_list .swiper-slide:hover{ box-shadow: 0 0 7px rgba(0,0,0,0.15); } .s_partner_list .swiper-slide:hover h1{ color: var(--i_color); } .s_partner_list .swiper-slide:hover img{ width: 110%; height: 110%; } @media screen and (max-width:1880px){ .single_hot_text {padding: 40px 7% 0 7%;} } @media screen and (max-width:1600px){ .single_hot_text h1 {font-size: 21px;} .single_hot_text {padding: 40px 5% 0 5%;} } @media screen and (max-width:1440px){ .single_hot_text h1 {font-size: 20px;} .single_hot_text {padding: 30px 5% 0 5%;} .single_hot_text h2 {margin-top: 20px;} .single_hot_text h2 {font-size: 14px;line-height: 17px;} .s_partner_box {padding-top: 50px;} .single_grid_hot {padding: 60px 0 100px 0;} } @media screen and (max-width:1366px){ .single_hot_text h1 {font-size: 19px;} } @media screen and (max-width:1200px){ .single_hot_text h1 {font-size: 18px;} .single_hot_text h2 {margin-top: 15px;} .single_grid_hot {padding: 40px 0 80px 0;} } @media screen and (max-width:959px){ .single_hot_text h1 {font-size: 16px;} .s_partner_box {padding-top: 40px;} .single_grid_hot {padding: 40px 0 60px 0;} } @media screen and (max-width:767px){ .single_hot_text h2 {margin-top: 10px;} .s_partner_box {padding-top: 20px;} .single_grid_hot {padding: 40px 0 40px 0;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ .single_hot_text h2 {font-size: 12px;line-height: 16px;} .single_hot_text {padding: 20px 5% 0 5%;} } /* -------------------------download 页面----------------------- */ .download{ --i_width:50px; --div_width:190px; } .download{ box-sizing: border-box; padding-bottom: 65px; } .download li{ box-sizing: border-box; padding: 10px 3%; border-bottom: 1px solid #e5e5e5; margin-bottom: 10px; } .download a{ display: flex; display: -webkit-flex; align-items: center; } .download i{ display: block; width: var(--i_width); height: var(--i_width); border-radius: 50%; background-color: var(--i_color); position: relative; border: 1px solid var(--i_color); transition: all 0.5s ease; } .download i::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 28px; height: 28px; filter: brightness(200); -webkit-filter: brightness(200); background: url('static/imgs/down1.png') center no-repeat; background-size: 100% 100%; } .download h1{ font-size: 17px; color: var(--i_color2); margin-left: 20px; transition: all 0.5s ease; width: calc(100% - var(--i_width) - var(--div_width) - 28px); overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .download_div{ display: flex; display: -webkit-flex; align-items: center; justify-content: center; border: 1px solid var(--i_color2); border-radius: 12px; box-sizing: border-box; padding: 8px 1%; width: var(--div_width); margin-left: auto; transition: all 0.5s ease; } .download_div h2{ font-size: 16px; color: var(--i_color2); transition: all 0.5s ease; text-align: center; } .download_div span{ display: block; width: 15px; height: 15px; background: url('static/imgs/load2.png') center no-repeat; margin-left: 10px; transition: all 0.5s ease; background-size: 100% 100%; } .download li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.2); border-bottom: 1px solid transparent; border-radius: 10px; } .download li:hover i{ background-color: white; } .download li:hover i::after{ filter: brightness(1); -webkit-filter: brightness(1); } .download li:hover h1{ color: var(--i_color); } .download li:hover div{ border: 1px solid var(--i_color); background-color: var(--i_color); } .download li:hover h2{ color: white; } .download li:hover span{ filter: brightness(100); -webkit-filter: brightness(100); } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .download h1 {font-size: 16px;} .download_div h2 {font-size: 15px} .download{--div_width:170px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .download h1 {font-size: 15px;} .download_div h2 {font-size: 14px;} .download{--div_width:160px;} .download {padding-bottom: 60px;} } @media screen and (max-width:959px){ .download{--i_width:40px;} .download i::after {width: 20px;height: 20px;} .download_div h2 {font-size: 12px;} .download{--div_width:150px;} .download h1 {margin-left: 10px;} .download h1 {font-size: 12px;} .download_div {padding: 8px 1%;} .download_div span {width: 12px;height: 12px;} .download {padding-bottom: 50px;} } @media screen and (max-width:767px){ .download h1 {font-size: 14px;} .download {padding-bottom: 40px;} } @media screen and (max-width:560px){ .download {padding-bottom: 20px;} } @media screen and (max-width:425px){ .download_div{display: none;} .download h1 {width: calc(100% - var(--i_width));} .download li {padding: 5px 3%} .products_list {padding: 20px 2% 0px 2%;} } /* -------------------------------news----------------------------- */ .news_contact{ width: 100%; background: url('static/imgs/news_contact.jpg') center no-repeat; background-size: cover; box-sizing: border-box; padding: 75px 10% 80px 10%; margin-top: 40px; } .news_contact h6{ font-size: 28px; font-weight: bold; color: white; text-align: center; line-height: 40px; text-transform: uppercase; margin-bottom: 40px; } .news_contact a{ display: flex; text-transform: uppercase; width: 160px; line-height: 40px; background-color: var(--i_color); margin: 0 auto; position: relative; overflow: hidden; z-index: 2; } .news_contact b{ width: 100%; font-size: 18px; color: white; z-index: 2; text-align: center; } .news_contact a:hover:before { top: -50%; } .news_contact a:before { webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: 1; } @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .news_contact h6 {font-size: 25px;line-height: 34px;margin-bottom: 30px;} .news_contact {padding: 50px 5% 70px 5%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ .news_contact h6 {font-size: 20px;line-height: 30px;margin-bottom: 19px;} .news_contact a {width: 140px;line-height: 35px;} .news_contact b {font-size: 16px;} .news_contact {padding: 40px 5% 50px 5%;} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* 下拉框 */ .news_select{ position: relative; width: 170px; cursor: pointer; } .news_select::after{ content: ''; position: absolute; top: 50%; right: 20px; transform: translate(0,-50%); width: 15px; height: 9px; background: url('static/imgs/xia.png') center no-repeat; background-size: 100% 100%; /* 给自定义的图标实现点击下来功能 */ pointer-events: none; } .news_select select{ width: 100%; height: 44px; line-height: 44px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, .2); font-size: 20px; color: #959595; border-radius: 20px; box-sizing: border-box; padding: 0 20px; /* 清除select的边框样式 */ border: none; /* 清除select聚焦时候的边框颜色 */ outline: none; /* 隐藏select的下拉图标 */ appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* 自定义下拉框 */ .selectBox span{ display: block; width: 170px; line-height: 44px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, .2); font-size: 20px; color: #959595; border-radius: 20px; box-sizing: border-box; padding: 0 20px; position: relative; cursor: pointer; margin-left: auto; } .selectBox span::after{ content: ''; position: absolute; top: 50%; right: 20px; transform: translate(0,-50%); width: 15px; height: 9px; background: url('static/imgs/xia.png') center no-repeat; background-size: 100% 100%; } .selectBox{ position: relative; } .selectBox ul{ width: 170px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, .2); margin-top: 5px; border-radius: 20px; margin-left: auto; position: absolute; top: 46px; right: 0; z-index: 180000; } .selectBox ul li{ line-height: 44px; padding: 0 20px; box-sizing: border-box; font-size: 20px; color: #959595; cursor: pointer; } .main{max-width:1200px; margin:0 auto; padding:40px 0;} .title{font-size:24px; margin-bottom: 1em; text-align: center;} .img-count,.img-count img{position:relative;} .img-count-in{ position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;height:100%; height:100%;} .w-newsList1{position: relative;} .w-newsList1 a{ display: block; text-decoration: none; color: #333;} .w-newsList1 .news-item{ position:relative;} .w-newsList1 .news-imgbox{ width:58%;} .w-newsList1 .news-imgbox img{ transition:transform 3.5s; -webkit-transition:transform 3.5s;transform:scale(1.1); -webkit-transform:scale(1.1);} .w-newsList1 .swiper-slide.swiper-slide-active .news-imgbox img{ transform:scale(1); -webkit-transform:scale(1);} .w-newsList1 .aspectRatio{padding-bottom:376px;} .w-newsList1 .news-text{ position: absolute; right:0; width:44.5%; top: 50%;top:10%\9; top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); background: #fff; padding: 40px 2% 40px 4%; overflow:hidden;} :root .w-newsList1 .news-text{ top:50%;box-shadow: 0 0 10px rgba(0,0,0,.2);} .w-newsList1 .date{} .w-newsList1 .date .year{ font-size:36px; font-weight: bold; color: var(--i_color2);} .w-newsList1 .date .day_month{font-size:18px; color: #9b9b9b;} .w-newsList1 .news-h{ font-size:22px; font-weight: bold;color: var(--i_color);box-sizing: border-box;padding: 20px 0; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .w-newsList1 .news-sum{ line-height: 22px; font-size: 16px; overflow: hidden; color:#626262; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 44px; } .w-newsList1 .more{margin-top:20px; width: 30px; height: 12px; float: right; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAABIUlEQVQ4jb3VMUscQRQH8J+yNgaLFAoPJSBnKaTRUhDBRoiVpBG09mMIljY2geuCIH4GG7FKE7BRSxGPyCtstLJQxGYPTr1D3LvNHxb2McP7McPO7FCz2dRPMhNExDec4gormXnbbf5wX9rrjOEr5nAcEeO1gpl5gQ08Y7YXOsgVysyDLuhEbWAP9E9ETNUGdqBreEQDJ220wBfMYKhK84joNXSFHWx3oIsFzjBdBftkGjgaxsN/wNoZLfAdkypu6QdZxV75foPlAk+4rtqxfdO8TUT8xG5ZXmIpM1u1fKURsY5DjJTYYma2qOFYRMQm9sve51jIzH/t8YGCEbGF3x3YUr7Z84GBETGPX2X5t8Te/TGKQYG4K58z/MjM+26TXgDh8VYjv3NjTgAAAABJRU5ErkJggg==") center no-repeat;} .w-newsList1 .adSN_page{ position: absolute; z-index: 9; left:49% !important; bottom:53% !important; margin-bottom: -123px; top: auto; transform: none; -webkit-transform: none; width:35% !important; padding-left: 4%; } .w-newsList1 .adSN_page span{ display: inline-block; *display:inline; *zoom:1; margin:0 6px;} .w-newsList1 .swiper-num{ position: absolute; z-index: 9; right: 33px; top:58%; margin-top: -130px; color: #bdbdbd;font-size: 18px;} .w-newsList1 .swiper-num .active{ font-size:30px; font-weight: bold;color: #bdbdbd;} .w-newsList1 .swiper-pagination-bullet-active{background-color: var(--i_color);} @media screen and (max-width:1880px){ .w-newsList1 .news-h {font-size: 21px;} .w-newsList1 .date .year {font-size: 34px;} } @media screen and (max-width:1600px){ .w-newsList1 .date .year {font-size: 32px;} .w-newsList1 .news-h {font-size: 20px;} } @media screen and (max-width:1440px){ .w-newsList1 .date .year {font-size: 30px;} .w-newsList1 .news-h {font-size: 18px;} .w-newsList1 .news-h {padding: 15px 0;} .w-newsList1 .news-sum {line-height: 20px;font-size: 15px;} .w-newsList1 .news-text {width: 50%;} .w-newsList1 .news-imgbox {width: 64%;} .selectBox ul li {line-height: 40px;padding: 0 15px;font-size: 18px;} .selectBox span { width: 160px; line-height: 40px; font-size: 18px; border-radius: 18px; padding: 0 15px; } .selectBox ul {width: 160px;border-radius: 18px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .w-newsList1 .news-text {width: 60%;} .w-newsList1 .news-imgbox {width: 80%;} .w-newsList1 .date .year {font-size: 28px;} } @media screen and (max-width:959px){ .w-newsList1 .news-imgbox {width: 100%;} .w-newsList1 .news-text {width: 80%;} .w-newsList1 .date .year {font-size: 26px;} .w-newsList1 .swiper-num .active {font-size: 28px;} } @media screen and (max-width:767px){ .w-newsList1 .news-imgbox{width:100%;} .w-newsList1 .aspectRatio{padding-bottom: 39.25%;} .w-newsList1 .news-text{ position: relative; width:92%; top:0; transform: none; -webkit-transform: none; padding:1.2rem 4% 1.5rem;} :root .w-newsList1 .news-text{ top:0;} .w-newsList1 .adSN_page{ left:0 !important; bottom:2em !important; margin-bottom: 0;} .w-newsList1 .swiper-num{ bottom: 167px; top: auto; margin-top: 0;} .img-count, .img-count img{width: 100% !important;} } /* news产品列表 */ .news_ul{ box-sizing: border-box; padding: 55px 0 60px 0; } .news_ul li{ border: 1px solid #eeeeee; transition: all 0.5s ease; margin-bottom: 30px; } .news_ul a{ display: flex; display: -webkit-flex; align-items: center; } .news_ul_img{ width: 24%; position: relative; overflow: hidden; } .news_ul_img::after{ content: ''; display: block; padding-bottom: 76%; } .news_ul_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .news_ul_area{ width: 61%; box-sizing: border-box; padding-left:5.5%; } .news_ul_area h1{ font-size: 22px; font-weight: bold; color: var(--i_color2); transition: all 0.5s ease; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .news_ul_area h2{ font-size: 16px; color: #626262; line-height: 23px; box-sizing: border-box; margin: 25px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 46px; } .news_ul_area h3{ width: 150px; line-height: 36px; text-align: left; color: var(--i_color2); font-size: 17px; } .news_ul_data{ width: 15%; } .news_ul_data h4{ font-size:27px; color: var(--i_color2); text-align: center; transition: all 0.5s ease; } .news_ul_data h5{ font-size: 16px; color: #9b9b9b; text-align: center; transition: all 0.5s ease; } .news_ul li:hover h1,.news_ul li:hover h4,.news_ul li:hover h5{ color: var(--i_color); } .news_ul li:hover h3{ background-color: var(--i_color); color: white; text-align: center; } .news_ul li:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.1); } .news_ul li:hover img{ width: 110%; height: 110%; } @media screen and (max-width:1880px){ .news_ul_area h2 {margin: 15px 0;} } @media screen and (max-width:1600px){ .news_ul_data h4 {font-size: 26px;} .news_ul_area h3 {line-height: 30px;} } @media screen and (max-width:1440px){ .news_ul_area h1 {font-size: 20px;} .news_ul_area h2 {font-size: 15px;line-height: 22px;margin: 10px 0;} .news_ul_area h1 {font-size: 18px;} .news_ul_area h2 {font-size: 14px;line-height: 20px;height: 37px;} .news_ul_area h3 {font-size: 16px;} .news_ul_area {padding-left: 3.5%;} .news_ul_data h4 {font-size: 24px;} .news_ul_data h5 {font-size: 14px;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .news_ul_img::after {padding-bottom: 90%;} .news_ul li {margin-bottom: 20px;} .news_ul {padding: 50px 0 40px 0;} } @media screen and (max-width:959px){ .news_ul_img::after {padding-bottom: 110%;} .news_ul_data h4 {font-size: 22px;} .news_ul {padding: 40px 0 20px 0;} } @media screen and (max-width:767px){ .news_ul_img::after {padding-bottom: 100%;} .news_ul_area h1 {font-size: 16px;} .news_ul_area h2 {font-size: 12px;line-height: 17px;height: 31px;} .news_ul_area h3 {line-height: 24px;font-size: 14px;} .news_ul_data h4 {font-size: 20px;} .news_ul {padding: 20px 0 10px 0;} } @media screen and (max-width:560px){ .news_ul_img::after {padding-bottom: 130%;} .news_ul {padding:10px 0 10px 0;} .main { padding: 20px 0; } } @media screen and (max-width:425px){ .news_ul_data h4 {font-size: 18px;} .news_ul_area h2 {margin: 5px 0;} } /* @media screen and (max-width:1880px){ } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } */ /* 新闻详情页 */ .in_news_art{box-sizing:border-box; padding:0 10%; margin:70px auto 100px} .in_news_art_tit{margin-bottom:30px; text-align:center} .in_news_art_tit h2{font-size:30px; color:#222; line-height:36px; font-weight:bold} .in_news_art_tit p{margin-top:20px; font-size:15px; color:#777; background:#EEE; line-height:28px} .in_news_art article, .in_news_art article *{text-align:left; font-family:Arial, system-ui, -apple-system, Microsoft Yahei, tahoma, sans-serif!important; font-size:18px; color:#666; line-height:34px} .in_news_art article img{display:block; margin:20px auto; max-width:100%!important; height:initial!important} @media screen and (max-width:1440px){ .in_news_art{margin:50px auto 100px} } @media screen and (max-width:1366px){ .in_news_art{padding:0 5%; margin:40px auto 90px} .in_news_art_tit h2{font-size:26px} .in_news_art article, .in_news_art article *{font-size:16px; line-height:30px} } @media screen and (max-width:1200px){ .in_news_art{margin:30px auto 80px} .in_news_art_tit h2{font-size:24px; line-height:30px} .in_news_art article, .in_news_art article *{font-size:15px; line-height:28px} } @media screen and (max-width:959px){ .in_news_art{padding:0 0} .in_news_art_tit h2{font-size:20px} .in_news_art article, .in_news_art article *{font-size:15px; line-height:30px} } @media screen and (max-width:767px){ .in_news_art_tit{margin-bottom:20px} .in_news_art_tit h2{font-size:18px; line-height:26px} .in_news_art_tit p{margin-top:16px} } @media screen and (max-width:560px){ .in_news_art{margin:20px auto 70px} .in_news_art_tit h2{font-size:16px; line-height:24px} } /* 隐私政策 */ .privacy{margin-bottom: 100px;padding-top: 70px;} #header{background-color: rgb(0 0 0 / 57%) !important;} .privacy_cont{} .privacy_cont .tit{margin-bottom:30px} .privacy_cont .tit h2{font-size:24px; text-align:center; font-weight:bold} .privacy_cont article, .privacy_cont article *{font-size:14px; color:#666; line-height:24px} .foot {top: 130px;} .privacy ol {padding: 0px;} @media screen and (max-width:1200px){ .privacy{margin-bottom: 50px;} } @media screen and (max-width:959px){ .privacy{margin-bottom: 30px;} } /* 感谢页面 */ .thanks{padding-top: 150px; margin:0px auto 100px; text-align:center; overflow:hidden} .thanks h2{margin-bottom:20px; font-size:30px; color:#222; font-weight:bold} .thanks a{z-index: 2; display: flex; position: relative;overflow: hidden; display:inline-block; background:var(--i_color); transition: all 1s ease;} .thanks h1{ line-height:38px; font-size:15px; color:#FFF;padding:0 40px;z-index: 3;display: block;position: relative; } .thanks a:hover:before { top: -50%; } .thanks a:before { webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: 1; } @media screen and (max-width:1200px){ .thanks{padding-top: 100px;} .thanks h2{font-size:26px} } @media screen and (max-width:767px){ .thanks{padding-top: 80px;margin:0px auto 70px} .thanks h2{font-size:22px} } @media screen and (max-width:560px){ .thanks h2{font-size:18px} } /* 搜索页面 */ .search_list { box-sizing: border-box; } .search_list li{ width: 22%; } .search{ display: flex; display: -webkit-flex; box-sizing: border-box; flex-direction: column; margin-top: 20px; } @media screen and (max-width:959px){ .search_list li {width: 30%;} } @media screen and (max-width:767px){ .search_list li {width: 48%;} } /* 搜索页 */ .in_search_tit{margin-bottom:70px; text-align:center;} .in_search_tit h2{font-size:34px; color:var(--i_color); font-weight:bold; text-transform:uppercase;padding-top: 20px;} .in_search_tit p{margin:16px 0; font-size:24px; color:#757575} .in_search{width:510px; margin:0 auto; border:1px solid var(--border_color); overflow:hidden} .in_search .search_ipt{float:left; box-sizing:border-box; padding-left:10px; width:calc(100% - 110px); font-size:15px; color:#333; line-height:46px} .in_search .search_btn{float:right; width:110px; height:46px; line-height:46px; background:var(--i_color); font-size:18px; color:#FFF;cursor: pointer;} .in_search_list li{width:22.75%; margin-bottom:40px} .in_search_list li:nth-child(3n){margin-right:3%} .in_search_list li:nth-child(4n){margin-right:0!important} @media screen and (max-width:1440px){ .in_search_tit{} .in_search_tit h2{font-size:32px} .in_search_tit p{font-size:22px} } @media screen and (max-width:1366px){ .in_search_tit h2{font-size:28px} .in_search_tit p{font-size:20px} .in_search .search_btn{font-size:16px} } @media screen and (max-width:1200px){ .in_search_tit{margin-bottom:60px} .in_search_tit h2{font-size:26px} .in_search_tit p{margin:10px auto 16px; font-size:18px} } @media screen and (max-width:959px){ .in_search_list li{margin-bottom:30px} .in_search_tit h2{font-size:24px} .in_search_tit p{font-size:17px} } @media screen and (max-width:767px){ .in_search_tit{margin-bottom:40px} .in_search{width:90%} .in_search_tit h2{font-size:22px} .in_search_tit p{font-size:16px} .in_search_list li{width:48%; margin:0 4% 20px 0} .in_search_list li:nth-child(2n){margin-right:0!important} } @media screen and (max-width:560px){ .in_search_tit{margin-bottom:34px} .in_search{width:94%} .in_search_tit h2{font-size:20px} .in_search_tit p{font-size:14px} .in_search .search_ipt{line-height:38px} .in_search .search_btn{height:38px; line-height:38px} } /* ---------------------- Aside Form ---------------------- */ .aside_form{position: fixed;right: 0;bottom: 0;width: 360px;box-shadow: -6px -4px 10px rgb(0 0 0 / 10%);overflow: hidden;z-index: 999999999;} .aside_form_tit{padding: 12px 50px; text-align: center; background: var(--i_color); cursor: pointer;position: relative;} .aside_form_tit p{color: #fff;font-size: 0.18rem;} .aside_form_tit iconify-icon{opacity: 0; position:absolute; top:50%; transform:translate(0,-50%);right: -20px;font-size: 24px;color: #fff;} .aside_form_tit.on iconify-icon{opacity: 1; right: 10px; -webkit-transition:all .6s .5s; transition:all .6s .5s;} .aside_form_cont{display: none; padding: 24px; background: #FFF;} .aside_form_cont.on{} #wpforms-29{--input_font_size:0.16rem; --input_height:0.35rem} #wpforms-29{width:100%; margin:0 auto; padding:0} #wpforms-form-29{width:100%; overflow:hidden} #wpforms-29 input, #wpforms-29 button{margin:0; padding:0; border:none; background:none} #wpforms-29 .wpforms-field{padding:0; margin:0} #wpforms-29 .wpforms-error-container{line-height:0.16rem} #wpforms-29 .wpforms-field-container{width:100%; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} #wpforms-29 .wpforms-submit-container{padding:0!important; width:1.5rem; height:var(--input_height); background:var(--i_color);border-radius: 0.05rem; position:relative;margin:0 auto;transition: all 0.3s ease;} #wpforms-29 .wpforms-hidden{ display: none; } #wpforms-29 .wpforms-field{ position: relative; } #wpforms-29 .wpforms-field-label{ font-size: 0; line-height: 0; height: 0; margin: 0 !important; } #wpforms-29 .wpforms-field-label span{ position: absolute; top: 15px; left: 3px; font-size: 0.14rem; color: red; } #wpforms-29 .wpforms-error{ margin-top: 0.01rem; font-size: 0.12rem !important; } #wpforms-29 .wpforms-field{width:100%; padding-bottom:0.15rem; background:transparent; overflow:hidden} #wpforms-29 input{height:var(--input_height)} #wpforms-29 textarea{min-height:0.8rem} #wpforms-29 input, #wpforms-29 textarea{ width:100%;border: 0; max-width:100%!important; font-size:var(--input_font_size); background-color: white; color:#222; box-sizing:border-box; ; padding:0 10px; box-shadow: 0 0 0 0 !important; border: 1px solid rgba(0, 0, 0, 0.2); } #wpforms-29 input::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-29 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-29 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-29 input::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-29 textarea::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-29 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-29 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-29 textarea::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-29 #wpforms-29-field_1-error, #wpforms-29 #wpforms-29-field_2-error, #wpforms-29 #wpforms-29-field_3-error, #wpforms-29 #wpforms-29-field_4-error{position:absolute; font-size:14px} #wpforms-29 .wpforms-submit-container button{overflow: hidden;border-radius: 0.2rem; width:100%; height:var(--input_height); font-size:0.14rem; color:#fff; line-height:var(--input_height); cursor: pointer; text-transform:capitalize; position:relative; z-index:2} #wpforms-29 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} #wpforms-29 .wpforms-submit-container:hover{ background-color: var(--i_color2); } @media screen and (max-width:560px) { .aside_form{width: 100%;} } /* aside */ .aside_right { position: fixed; right: 30px; bottom: 16%; z-index: 999999 } .aside_right ul {} .aside_right li { margin: .1rem 0; -webkit-border-radius: 50%; border-radius: 50%; position: relative; overflow: hidden; cursor: pointer } .aside_right li>a { display: block; width: .5rem; height: .5rem; background: rgba(128, 128, 128, .5); display: flex; justify-content: center; align-items: center; z-index: 3; transition: all .3s ease; } .aside_right li:nth-child(1)>a { background: #389b0f } .aside_right li:nth-child(2)>a { background: var(--i_color2); } .aside_right li img { display: block; margin: 0 auto; width: .22rem; height: .22rem; object-fit: contain } .aside_right li:hover>a { background-color: 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_close { position: absolute; top: .3rem; right: .3rem; display: block; width: .3rem; height: .3rem; background: url(static/imgs/close_1_hei.svg) no-repeat center; background-size: 30px; cursor: pointer } .aside_close:hover { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .aside_close { -webkit-transition: all 0.5s ease; transition: all 0.5s ease } #aside_mask_bg { display: none; position: fixed; top: 50%; transform: translate(0, -50%); left: 0%; width: 100%; height: 100%; background: rgb(0 0 0 / 70%); 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: .4rem } #aside_sc_from .tit h1 { text-align: center; font-size: .26rem; color: var(--i_color); font-weight: bold; line-height: .3rem } #wpforms-26 { --input_font_color: rgb(0 0 0 / 50%); --input_font_size: 14px; --input_height: 42px } #wpforms-26 { width: 100%; margin: 0 auto; padding: 0 } #wpforms-form-26 { width: 100%; overflow: hidden } #wpforms-26 input, #wpforms-26 button { margin: 0; padding: 0; border: none; background: none } #wpforms-26 .wpforms-field { padding: 0; margin: 0 } #wpforms-26 .wpforms-error-container { line-height: 16px } #wpforms-26 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; overflow: hidden } #wpforms-26 .wpforms-submit-container { padding: 0 !important; margin: 0 auto; width: 170px; height: 38px; background: var(--i_color); box-sizing: border-box; border: 2px solid var(--i_color); position: relative } #wpforms-26 .wpforms-field-label { font-size: 0 } #wpforms-26 .wpforms-required-label { position: absolute; top: 16px; left: 5px; font-size: 16px; color: #F00 } #wpforms-26 .wpforms-field { width: 100%; margin-bottom: 0; padding-bottom: 18px; background: transparent; position: relative; overflow: hidden } #wpforms-26 input { height: var(--input_height) } #wpforms-26 textarea { min-height: 100px } #wpforms-26 input, #wpforms-26 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%); line-height: var(--input_height); padding: 0 16px } #wpforms-26 input::-webkit-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-26 input::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-26 input::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-26 input::-ms-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-26 textarea::-webkit-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-26 textarea::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-26 textarea::-moz-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-26 textarea::-ms-input-placeholder { color: var(--input_font_color); font-size: var(--input_font_size) } #wpforms-26 #wpforms-26-field_1-error, #wpforms-26 #wpforms-26-field_2-error, #wpforms-26 #wpforms-26-field_3-error, #wpforms-26 #wpforms-26-field_5-error { position: absolute; font-size: 13px } #wpforms-26 .wpforms-submit-container button { width: 100%; height: 34px; font-size: 14px; color: #FFF; line-height: 34px; cursor: pointer; text-transform: uppercase; position: relative; z-index: 2 } #wpforms-26 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } #wpforms-26 .wpforms-submit-container:after { display: none; content: ""; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100% } #wpforms-26 .wpforms-submit-container:hover:after { display: block } #wpforms-26 .wpforms-submit-container:hover { background: #FFF } #wpforms-26 .wpforms-submit-container:hover button { color: var(--i_color) } @media screen and (max-width:1366px) { .aside_right li>a { width: 0.4rem; height: 0.4rem; } } @media screen and (max-width:1024px) { #aside_sc_from { width: 94%; } } @media screen and (max-width:959px) { .aside_right { right: 22px; bottom: 160px; } } @media screen and (max-width:767px) { #aside_sc_from { padding: 20px 20px 30px } #aside_sc_from .tit { margin-bottom: 0.3rem; } #wpforms-26 .wpforms-submit-container { height: 34px; } #wpforms-26 .wpforms-submit-container button { height: 30px; line-height: 30px; font-size: 14px; } } @media screen and (max-width:560px) { #aside_sc_from .tit h1 { font-size: 0.24rem; } } /* 产品详情 表单 */ #aside_mask_bg1{display:none; position:fixed; top:0%; left:0%; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:9999999999998} #aside_sc_from1{display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; padding:30px 30px 40px; background:#FFF; z-index:9999999999999; overflow:auto} #aside_sc_from1 .tit{margin-bottom:40px} #aside_sc_from1 .tit h1{font-size:26px; color:#333; font-weight:bold; line-height:30px} #wpforms-788{--input_font_size:16px; --input_height:42px} #wpforms-788{width:100%; margin:0 auto; padding:0} #wpforms-form-130{width:100%; overflow:hidden} #wpforms-788 input, #wpforms-788 button{margin:0; padding:0; border:none; background:none} #wpforms-788 .wpforms-field{padding:0; margin:0} #wpforms-788 .wpforms-error-container{line-height:16px} #wpforms-788 .wpforms-field-container{width:100%; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} #wpforms-788 .wpforms-submit-container{padding:0!important; width:170px; height:var(--input_height); background:var(--i_color); position:relative;margin-left: auto;} #wpforms-788 .wpforms-field-label{display:none!important} #wpforms-788 .wpforms-field{width:100%; margin-bottom:10px; padding-bottom:20px; background:transparent; overflow:hidden} #wpforms-788 .wpforms-field:nth-child(1){margin-right:20px} #wpforms-788 .wpforms-field:nth-child(1), #wpforms-788 .wpforms-field:nth-child(2){width:calc(50% - 10px)} #wpforms-788 input{height:var(--input_height)} #wpforms-788 textarea{min-height:100px} #wpforms-788 input, #wpforms-788 textarea{width:100%; max-width:100%!important; font-size:var(--input_font_size); color:#555; box-sizing:border-box; border:1px solid rgba(0,0,0,.3); line-height:var(--input_height); padding:0 10px} #wpforms-788 input::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-788 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-788 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-788 input::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-788 textarea::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-788 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-788 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-788 textarea::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-788 #wpforms-788-field_1-error, #wpforms-788 #wpforms-788-field_2-error, #wpforms-788 #wpforms-788-field_3-error, #wpforms-788 #wpforms-788-field_4-error{position:absolute; font-size:14px} #wpforms-788 .wpforms-submit-container button{overflow: hidden; width:100%; height:var(--input_height); font-size:16px; color:#FFF; line-height:var(--input_height); cursor:pointer; text-transform:uppercase; position:relative; z-index:2} #wpforms-788 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} .close{position:absolute; top:20px; right:30px; display:block; width:50px; height:50px; background:url(static/imgs/close_1_hei.svg) no-repeat center; background-size:contain} .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} #wpforms-788 .wpforms-submit-container button::before{ webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: 110%; left: 50%; background-color: var(--i_color2); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: -1; } #wpforms-788 .wpforms-submit-container button:hover::before{ top: -50%; } @media screen and (max-width:959px){ #aside_sc_from1 {width: 80%;} } @media screen and (max-width:560px){ #aside_sc_from1 {width: 87%;} } /* 404 */ .in404{position:absolute; top:0; left:0; width:100%; height:100%; background:#FFF} .in404_text{position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:80%; text-align:center} .in404_text h1{font-size:220px; color:#BBB} .in404_text h6{margin:10px auto 30px; font-size:18px; color:#999} .in404_text a{display:inline-block; padding:0 40px; line-height:32px; font-size:15px; color:#999; border:2px solid #DDD; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px} @media screen and (max-width:959px){ .in404_text h1{font-size:180px} } @media screen and (max-width:767px){ .in404_text h1{font-size:140px} .in404_text h6{font-size:16px} .in404_text a{font-size:14px} } @media screen and (max-width:560px){ .in404_text h1{font-size:70px} .in404_text h6{margin:10px auto 18px; font-size:14px; line-height:20px} .in404_text a{font-size:13px} } main{ overflow: hidden; } .form_hide{ display: none !important; } .footer_center_ul .current-menu-item a,.footer_center_ul .current-post-ancestor a{ color: var(--i_color) !important; }