/* CSS Reset */
html {
-webkit-text-size-adjust: none;
}
body {
color: #1a1a1a;
overflow-x: hidden;
margin: 0;
padding: 0;
}
header, nav, section, article, aside, footer {
display: block;
}
input, select, textarea {
border-radius: 0;
outline: none;
font-family: PingFang SC, 'Microsoft YaHei', Arial, sans-serif;
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="text"], input[type="password"] {
-webkit-appearance: none;
}
a, *::before, *::after {
font-size: 14px;
text-decoration: none;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
text-decoration: none;
}
a * {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
.fullscreen, .fullscreen body {
width: 100%;
height: 100%;
overflow: hidden
}
.alltra {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.pcshow {
display: block;
}
.mbshow {
display: none !important;
}
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.img {
position: relative;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-color: #ccc;
}
.pic {
position: relative;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.img img, .pic img {
max-width: 100%;
max-height: 100%;
margin: auto;
padding: 0;
border: 0;
width: 100%;
height: 380px;
border: none;
object-fit: cover;
}
.img-center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: block;
/* width: auto !important;
height: auto !important;*/
z-index: 1;
max-width: 100%;
max-height: 100%;
}
.img-block {
display: block;
width: 100%;
height: auto;
}
.img-inline {
display: inline-block;
width: auto;
height: auto;
}
.content {
margin: auto;
position: relative;
overflow: hidden;
}
.clamp1 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.clamp2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.clamp3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
::-webkit-scrollbar {
height: 4px;
width: 3px;
background: #cfd6db;
}
::-webkit-scrollbar-button {
height: 0;
width: 5px;
background: #cc1f1f;
}
::-webkit-scrollbar-thumb {
background-color: #cc1f1f;
box-shadow: inset 1px 1px 0 #cc1f1f, inset 0 -1px 0 #cc1f1f;
}
.vnr-main h1, .vnr-main h2, .vnr-main h3, .vnr-main h4, .vnr-main h5, .vnr-main h6, .vnr-main ul {
margin: 0;
padding: 0;
font-weight: normal;
list-style: none;
}
.fwbold {
font-weight: bold;
}
:root {
--white: #ffffff;
--black: #1a1a1a;
--blue: #002f93;
--gray: #f2f2f2;
--gray1: #f5f5f5;
--gray2: #dadce0;
--gray3: #666666;
--gray4: #999999;
--gray5: #e5e5e5;
--orange: #f0a700;
--red: #cc1f1f;
--red2: #ad1a1a;
}
/* header */
@media (max-width: 1399px) {
.header {
position:absolute;
left: 0;
top: 0;
z-index: 500;
width: 100%;
transition: all .4s ease;
}
}
@media (min-width: 1400px) and (max-width: 1439px) {
.header {
position: fixed;
left: 0;
top: 0;
z-index: 500;
width: 100%;
transition: all .4s ease;
}
}
@media (min-width: 1440px) and (max-width: 1918px) {
.header {
position: fixed;
left: 0;
top: 0;
z-index: 500;
width: 100%;
transition: all .4s ease;
}
}
@media (min-width: 1919px) and (max-width: 2000px) {
.header {
position: fixed;
left: 0;
top: 0;
z-index: 500;
width: 100%;
transition: all .4s ease;
}
}
@media (min-width: 1922px) {
.header {
position: fixed;
left: 0;
top: 0;
z-index: 500;
width: 100%;
transition: all .4s ease;
}
}
.header * {
transition: all .4s ease;
}
.header-content {
width: 94%;
height: 130px;
margin: auto;
position: relative;
z-index: 500;
}
.header-logo {
width: 13%;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 11;
}
.header-logo a {
display: block;
background: url('../images/logo.png') center no-repeat;
background-size: 100%;
}
.header-logo img {
opacity: 0;
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.header-nav {
position: absolute;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.header-nav ul {
position: relative;
text-align: right;
list-style: none;
margin: 0;
padding: 0;
}
.header-nav ul li {
display: inline-block;
vertical-align: middle;
margin-left: 33px;
position: relative;
}
.header-nav ul li a {
color: var(--white);
}
.header-nav ul li a.nav {
display: inline-block;
position: relative;
}
.header-nav ul li a.down {
padding-right: 18px;
}
.header-nav ul li a.down::before {
content: '';
width: 11px;
height: 7px;
position: absolute;
right: 0;
top: 50%;
margin-top: -3.5px;
z-index: 1;
background: url('../images/down1.png') center no-repeat;
}
.header-nav ul li a.nav::after {
content: '';
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: -10px;
background: var(--white);
;
transition: all .4s ease;
display: none;
}
.clickclose {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;}
.header-nav ul li.cur a.nav::after, .header-nav ul li.on a.nav::after {
width: 100%;
}
/* 二级导航下拉容器 - 宽度跟随ABOUT US父菜单 */
.header-nav-show {
position: absolute;
top: 100%; /* 紧贴导航底部，无空隙 */
left: 0;
min-width: 100%;
width: max-content;
max-width: 320px;
padding: 110px 0 8px 0; /* 上padding = 视觉间距 */
background: transparent; /* 外层透明 */
border-radius: 0 0 4px 4px;
}
/* 真正的视觉内容放在里面 */
.header-nav-show ul {
margin: 0;
padding: 8px 0;
list-style: none;
background: rgba(20, 20, 20, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* 菜单项链接 */
.header-nav-show ul a {
position: relative;
display: block;
padding: 10px 18px;
color: #e8e8e8;
font-size: 15px;
text-decoration: none;
transition: all 0.25s ease;
border-left: 3px solid transparent;
}
/* 菜单项之间的分隔线 */
.header-nav-show ul a + a {
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* hover 效果 */
.header-nav-show ul a:hover {
color: #ff3333;
font-weight: 600;
padding-left: 24px;
background: linear-gradient(90deg, rgba(255, 51, 51, 0.1), transparent);
border-left: 3px solid #ff3333;
}
.header-nav ul li a.nav:hover {
color: var(--red);
}
.header-nav ul li.language, .header-nav ul li.search {
width: 22px;
height: 22px;
position: relative;
}
.header-nav ul li.search {
position: relative;
padding-left: 33px;
}
.header-nav ul li.search::before {
content: '';
width: 1px;
height: 16px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--white);
padding: .8;
}
.cur a {
color: var(--dark);
position: relative;
}
.cur a::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--dark);
border-radius: 1px;
}
.header-nav ul li.contact a:hover {
opacity: .9;
}
.header-nav ul li a.down:hover::before {
transform: rotate(180deg);
}
.header-nav ul li.hover a.down::before {
transform: rotate(180deg);
}
.header-nav-show-mark {
position: absolute;
width: 100%;
height: 0px;
left: 0;
top: 0;
z-index: 400;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
transition: all .4s ease;
}
.header-nav-show-mark.cur {
height: 200%;
}
.header.black .header-logo a, .header.detail .header-logo a {
background: url('../images/logo1.png') center no-repeat;
background-size: 100%;
}
.header.black .header-nav ul li a, .header.detail .header-nav ul li a {
color: var(--black);
}
.header.black .header-nav ul li a.nav::after, .header.detail .header-nav ul li a.nav::after {
color: var(--black);
background: var(--red);
}
.header.black .header-nav ul li.cur a.nav, .header.black .header-nav ul li.on a.nav, .header.detail .header-nav ul li.cur a.nav, .header.detail .header-nav ul li.on a.nav {
color: var(--red);
}
.header.black .header-nav ul li.search::before, .header.detail .header-nav ul li.search::before {
background: var(--black);
opacity: .5;
}
.header.black .header-nav ul li a img, .header.detail .header-nav ul li a img {
filter: invert(100%);
}
.header.detail.scroll-down {
background: var(--white);
border-bottom: 1px solid var(--gray);
}
.header.black .header-nav ul li a.nav:hover {
opacity: 1;
}
.header.black .header-nav ul li a.down::before {
background: url('../images/down2.png') center no-repeat;
}
.header.black .header-nav ul li a.down:hover::before {
transform: rotate(180deg);
}
.header.detail .header-nav ul li a.down::before {
background: url('../images/down2.png') center no-repeat;
}
.header.detail .header-nav ul li a.down:hover::before {
transform: rotate(180deg);
}
.header.detail.scroll-down .header-nav-show, .header.detail.scroll-top .header-nav-show {
background: var(--white);
}
.header.detail.scroll-down .header-nav-show a, .header.detail.scroll-top .header-nav-show a {
color: var(--black);
}
.header.detail .header-nav ul li.contact a {
background: rgba(0, 0, 0, .2);
color: var(--white);
}
.header.detail .header-nav-show-mark {
display: none;
}
.header.scroll-down {
background: var(--black);
}
.header.scroll-down .header-content {
height: 100px;
}
.header.scroll-top {
transform: translateY(-200px);
}
.header.scroll-down .header-nav-show, .header.scroll-top .header-nav-show {
background: var(--black);
}
.header.scroll-down .header-nav-show ul, .header.scroll-top .header-nav-show ul {
padding: 10%;
}
.header.scroll-down .header-nav-show-mark.cur, .header.scroll-top .header-nav-show-mark.cur {
height: 0;
}
.header-nav-show {
position: absolute;
width: 280px;
left: 0;
z-index: 911;
display: none;
padding-top: 20px;
}
.header-nav-show ul {
overflow: hidden;
}
.header-nav-show ul a {
display: block;
text-align: left;
position: relative;
}
.header-nav-show ul a:hover {
opacity: 1;
}
.header.black.scroll-down {
background: var(--white);
border-bottom: 1px solid var(--gray);
}
.header-nav-list-show {
position: fixed;
left: 0;
top: 0px;
width: 100%;
height: auto;
z-index: -1;
overflow: hidden;
transition: all .4s ease;
}
.header-nav-list-show.cur {
z-index: 440;
height: 100%;
}
.header-nav-show-content {
width: 100%;
height: 100%;
z-index: 666;
position: relative;
overflow: hidden;
transition: all .4s ease;
background: #fff;
}
.header-nav-show-content.Hide {
opacity: 0;
height: 0;
z-index: 1;
}
.header-nav-content {
margin: auto;
overflow: hidden;
margin-top: 130px;
border-top: 1px solid var(--gray2);
padding: 3% 10%;
position: relative;
height: 100%;
box-sizing: border-box;
}
.header.scroll-down .header-nav-content {
margin-top: 100px;
}
.header-nav-content-left {
float: left;
width: 78%;
position: relative;
height: 88%;
overflow: auto;
}
.header-nav-content-left::-webkit-scrollbar {
height: 4px;
width: 0px;
}
.header-nav-content-left::after {
content: '';
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: var(--gray1);
}
.product-nav-content {
overflow: hidden;
position: relative;
}
.product-nav-item {
float: left;
width: 17.777%;
margin-right: 2%;
overflow: hidden;
}
.product-nav-item .classname-1 {
overflow: hidden;
min-height: 60px;
}
.product-nav-item .classname-1 a {
color: var(--black);
text-decoration: none;
}
.product-nav-item .classname-1 a:hover {
color: var(--red);
text-decoration: underline;
}
.product-nav-item .product-nav-pic {
margin-top: 5%;
overflow: hidden;
}
.product-nav-item .product-nav-pic a {
display: block;
text-align: center;
position: relative;
overflow: hidden;
}
.product-nav-item .product-nav-pic .pic-1 {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: var(--gray1);
}
.product-nav-item .product-nav-pic .pic-1 img.img-center {
max-width: 60%;
max-height: 60%;
transform: translateY(-8%);
}
.product-nav-item .product-nav-pic .pic-1 img.img-block {
opacity: 1;
}
.product-nav-item .product-nav-pic .name-2 {
position: absolute;
width: 90%;
left: 5%;
bottom: 5%;
z-index: 11;
color: var(--gray3);
}
.product-nav-item .product-nav-pic a:hover .pic-1 {
transform: scale(1.1);
}
.product-nav-model {
padding: 5% 0;
overflow: hidden;
}
.product-nav-model li {
list-style: none;
margin: 0;
padding: 1% 0;
overflow: hidden;
}
.product-nav-model li a {
display: block;
}
.product-nav-model li i {
display: inline-block;
vertical-align: middle;
width: 45px;
height: 45px;
position: relative;
}
.product-nav-model li i img.img-center {
max-width: 80%;
max-height: 80%;
}
.product-nav-model li span {
display: inline-block;
vertical-align: middle;
color: var(--gray3);
}
.product-nav-model li p {
margin: 0;
display: block;
padding: 3% 0;
color: var(--gray3);
}
.product-nav-model li a:hover span, .product-nav-model li a:hover p {
color: var(--red);
text-decoration: underline;
}
.cleartop {
width: 97%;
height: 1px;
background: var(--gray);
margin: 30px 0;
}
.header-nav-content-right {
float: right;
width: 19%;
padding-left: 3%;
margin-top: -1%;
}
.header-nav-link {
overflow: hidden;
}
.header-nav-link li {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
.header-nav-link li a {
display: block;
position: relative;
padding: 6% 0;
}
.header-nav-link li a::after, .header-nav-link li a::before {
content: '';
width: 100%;
height: 1px;
background: var(--gray1);
position: absolute;
left: 0;
bottom: 0;
}
.header-nav-link li a::before {
width: 0;
background: var(--red);
z-index: 11;
transition: all .4s ease;
}
.header-nav-link li span {
color: var(--black);
display: block;
text-transform: capitalize;
}
.header-nav-link li span::after {
content: '';
width: 7px;
height: 11px;
background: url('../images/r2.png');
position: absolute;
right: 0;
top: 50%;
opacity: .5;
margin-top: -6px;
}
.header-nav-link li a:hover span {
color: var(--red);
}
.header-nav-link li a:hover span::after {
background: url('../images/r4.png');
opacity: 1;
}
.header-nav-link li a:hover::before {
width: 100%;
}
.nav-close {
position: absolute;
right: 5%;
top: 2%;
z-index: 13;
cursor: pointer;
}
.nav-close i {
display: block;
width: 20px;
height: 20px;
transform: rotate(45deg);
}
.nav-close i::before {
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--gray3);
}
.nav-close i::after {
content: '';
width: 2px;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--gray3);
}
.nav-close i:hover {
transform: rotate(-45deg);
}
/* footer */
.footer {
background: url('../images/footer.jpg') center top no-repeat #000;
color: var(--white);
position: relative;
clear: both;
background-size: cover;
}
.footer-content {
overflow: hidden;
width: 80%;
margin: auto;
}
.footer-content a {
color: var(--white);
}
.footer-content-top {
padding-top: 5%;
overflow: hidden;
}
.footer-content-top-left {
float: left;
width: 37%;
}
.footer-content-top-left .contact-1 {
overflow: hidden;
}
.footer-content-top-left .tel-1 {
overflow: hidden;
}
.footer-content-top-left .tel-2 {
margin-top: 3%;
}
.footer-content-top-left .tel-2 strong {
color: var(--white);
}
.footer-content-top-left .email-3 {
color: var(--gray3);
}
.footer-content-top-left .email-3 strong {
color: var(--white);
}
.footer-content-top-left .address-4 {
margin-top: 3%;
color: var(--gray3);
}
.footer-content-top-left .nav-2 {
margin-top: 20%;
}
.footer-content-top-left .nav-2 a {
display: block;
color: var(--white);
padding: .5% 0;
}
.footer-content-top-left .nav-2 a:hover strong {
color: var(--red);
}
.footer-content-top-right {
float: right;
width: 50%;
}
.footer-content-top-right .message-1 {
overflow: hidden;
}
.footer-content-top-right .message-item {
font-size: 0;
}
.footer-content-top-right .item-1 {
display: inline-block;
vertical-align: middle;
padding-bottom: 2%;
width: 100%;
}
.footer-content-top-right .item-1 span {
display: block;
padding-bottom: 2%;
}
.footer-content-top-right .message-item .item-1:last-child {
margin-right: 0;
}
.footer-content-top-right .message-item.ilt3 .item-1 {
width: 32.33%;
margin-right: 1%;
}
.footer-content-top-right .message-item.ilt2 .item-1 {
width: 49%;
margin-right: 1%;
}
.footer-content-bottom {
padding: 1% 0 3% 0;
position: relative;
}
.footer-content-bottom .copy-1 {
color: var(--gray3);
}
.footer-content-bottom .copy-1 a {
color: var(--gray3);
}
.footer-content-bottom .copy-1 a:hover {
color: var(--white);
}
.footer-content-bottom .social-2 {
position: relative;
right: 0;
top: 0;
}
.footer-content-bottom .social-2 li {
display: inline-block;
vertical-align: middle;
position: relative;
margin-left: 1px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-content-bottom .social-2 a {
display: inline-block;
vertical-align: middle;
position: relative;
width: 50px;
height: 50px;
background: #242424;
border-radius: 2px;
}
.footer-content-bottom .social-2 a img {
opacity: .5;
}
.footer-content-bottom .social-2 a:hover {
background: var(--gray3);
}
.footer-content-bottom .social-2 a:hover img {
opacity: 1;
}
.footer-content-bottom .social-ewm-show {
display: none;
position: absolute;
left: 0;
bottom: 50px;
background: var(--white);
width: 100px;
height: 100px;
padding: 2px;
z-index: 11;
}
.footer-content-bottom .social-2 li:hover .social-ewm-show {
display: block;
}
.footer-content-bottom .social-2 li:last-child .social-ewm-show {
left: auto;
right: 0;
}
.input-1, .textarea-1 {
border: 1px solid var(--gray3);
width: 100%;
height: 60px;
box-sizing: border-box;
padding: 5%;
background: #242424;
color: var(--white);
border-radius: 2px;
transition: all .4s ease;
}
.input-1:focus, .textarea-1:focus {
border: 1px solid var(--white);
}
.choice-1 {
position: relative;
}
.choice-1 a {
color: var(--white);
}
.choice-1 a.cur {
border: 1px solid var(--gray3);
width: 100%;
height: 60px;
line-height: normal;
box-sizing: border-box;
padding: 5%;
background: #242424 url('../images/xia.png') 94% center no-repeat;
color: var(--white);
border-radius: 2px;
display: block;
}
.choice-1 ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
background: var(--white);
padding: 2% 0;
overflow: hidden;
width: 100%;
display: none;
}
.choice-1 ul a {
display: block;
color: var(--black);
padding: 2% 10%;
overflow: hidden;
position: relative;
}
.choice-1 ul a:hover {
background: var(--gray1);
}
.choice-1 ul a::before {
content: '';
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: var(--red);
display: none;
}
.choice-1 ul a:hover::before {
display: block;
}
.textarea-1 {
min-height: 120px;
padding: 2% 2.5%;
}
.submit-1 {
border: 1px solid var(--gray3);
width: 210px;
height: 60px;
box-sizing: border-box;
padding: 2%;
background: #242424;
display: block;
text-align: center;
}
.submit-1 span {
display: inline-block;
vertical-align: middle;
color: var(--white);
}
.submit-1 i {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background: url('../images/sub.png') center no-repeat;
margin-left: 10px;
}
.submit-1:hover {
background: var(--red);
border: 1px solid var(--red);
}
/* index */
.index-banner-item a {
display: block;
}
.index-banner-swiper {
position: relative;
background: #000;
}
.index-banner-swiper .text {
position: absolute;
left: 3%;
top: 50%;
z-index: 221;
transform: translateY(-50%);
width: 94%;
}
.index-banner-swiper .title-1 {
font-weight: bold;
color: var(--white);
}
.index-banner-swiper .img {
overflow: hidden;
}
.index-banner-swiper .video {
position: absolute;
left: 0;
top: 0;
z-index: 30;
width: 100%;
height: 100%;
overflow: hidden;
}
.index-banner-swiper .video.cur {
opacity: 0;
display: none;
}
.index-banner-swiper .video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-prev, .banner-prev {
width: 60px;
height: 60px;
border-radius: 100%;
opacity: 1;
border: 1px solid rgba(255, 255, 255, .2);
left: auto;
right: 3%;
bottom: 9%;
top: auto;
transition: all .4s ease;
}
.banner-prev::after, .banner-prev::after {
display: none;
}
.index-banner-swiper .swiper-slide-active .img .pic {
animation: srmgani 4000ms 1 ease forwards;
}
@keyframes srmgani {
0% {
transform: scale(1.05);
}
100% {
transform: scale(1.0);
}
}
.index-banner-swiper .swiper-slide {
opacity: 0;
z-index: -1;
overflow: hidden;
}
.index-banner-swiper .swiper-slide-active {
opacity: 1;
z-index: 11;
}
.swiper-button-prev, .swiper-button-next {
top: auto;
width: 52px;
height: 52px;
left: auto;
right: 3%;
bottom: 4%;
opacity: 1;
cursor: pointer;
border: 2px solid var(--white);
border-radius: 100%;
}
.swiper-button-prev::after, .swiper-button-next::after {
display: none;
}
.swiper-button-prev {
background: url('../images/l.png') center no-repeat;
right: 130px;
}
.swiper-button-next {
background: url('../images/r.png') center no-repeat;
}
.index-banner .video {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
z-index: 4;
}
.index-banner .video video {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
.vjs-controls-disabled {
width: 100%;
height: 100%;
}
.vjs-loading-spinner, .vjs-big-play-button, .vjs-control-bar, .vjs-error-display, .vjs-modal-dialog {
display: none;
}
.roll-icon {
width: 26px;
height: 38px;
position: absolute;
left: 3%;
bottom: 4%;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 50px;
z-index: 11;
}
.roll-icon i {
width: 3px;
height: 8px;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
background: var(--white);
animation: fudong1 1500ms infinite ease-in-out;
}
@keyframes fudong1 {
0% {
top: 20%;
}
50% {
top: 50%;
}
100% {
top: 20%;
}
}
.banner-mark {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 50;
background: url('../images/top.png') center top no-repeat;
background-size: 100%;
}
.vnr-main strong {
font-weight: normal;
padding: 0;
margin: 0;
}
.div-content {
width: 80%;
position: relative;
margin: auto;
}
.div-title {
overflow: hidden;
}
.div-title .title-1 {
overflow: hidden;
}
.div-title .text-2 {
overflow: hidden;
}
.index-scene {
padding: 5% 0;
overflow: hidden;
background: url('../images/bg11.jpg') center top no-repeat;
background-size: cover;
}
.index-scene-top {
text-align: center;
color: var(--white);
}
.index-scene-top .div-title .text-2 {
opacity: .6;
margin-top: 2%;
}
.index-scene-top .div-title .text-3 {
margin-top: 2%;
text-align: center;
}
.index-scene-top .div-title .text-3 div {
opacity: .6;
}
.index-scene-center {
margin-top: 1%;
}
.index-scene-center .pic {
overflow: hidden;
text-align: center;
}
.index-scene-center .pic img {
max-width: 100%;
width: auto;
}
.index-scene-bottom {
margin-top: 2%;
text-align: center;
font-size: 0;
}
.index-scene-item {
color: var(--white);
width: 31%;
position: relative;
display: inline-block;
vertical-align: top;
padding: 1.5% 0;
}
.index-scene-item::after {
content: '';
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: var(--white);
opacity: .2;
}
.index-scene-item:last-child::after {
display: none;
}
.index-scene-item .number-1 {
overflow: hidden;
}
.index-scene-item .number-1 h3 {
display: inline-block;
vertical-align: top;
}
.index-scene-item .number-1 sup {
display: inline-block;
vertical-align: top;
opacity: .6;
padding-left: 10px;
margin-top: 11px;
}
.index-scene-item .text-2 {
opacity: .6;
margin-top: 1.5%;
text-transform: capitalize;
}
.index-recommended {
padding: 0 0 10% 0;
overflow: hidden;
background: url('../images/bg2.png') center top no-repeat #141414;
background-size: 100%;
}
.index-recommended-left {
float: left;
width: 34%;
color: var(--white);
}
.div-class {
overflow: hidden;
}
.div-class .title-1 {
overflow: hidden;
}
.div-class .line-2 {
width: 100%;
height: 2px;
background: rgba(255, 255, 255, .2);
position: relative;
margin: 2% 0;
}
.div-class .line-2 i {
position: absolute;
left: 0;
top: 0;
background: var(--white);
z-index: 11;
width: 33%;
height: 100%;
}
.div-text {
margin-top: 13%;
}
.div-text .item-3 {
margin-top: 5%;
}
.div-text .item-3 li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
padding: 3px 0 3px 20px;
}
.div-text .item-3 li::before {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 0;
top: 50%;
background: var(--white);
margin-top: -4px;
}
.div-text .bottom-4 {
margin-top: 15%;
}
.bottom-1 {
width: 220px;
height: 60px;
line-height: 60px;
display: block;
display: inline-block;
vertical-align: middle;
text-align: center;
border-radius: 2px;
margin-right: 4px;
}
.bottom-1 strong {
overflow: hidden;
}
.color1 {
background: var(--red);
color: var(--white);
}
.color1:hover {
background: var(--red2);
}
.color2 {
background: var(--white);
color: var(--black);
}
.color2:hover {
background: var(--gray);
}
.index-recommended-right {
float: right;
width: 58.6%;
}
.index-recommended-right .play-1 {
position: absolute;
width: 90px;
height: 62px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../images/play.png') center no-repeat;
z-index: 11;
cursor: pointer;
}
.index-recommended-right .img::before {
content: '';
width: 100px;
height: 200px;
background: #141414;
position: absolute;
right: -60px;
top: -80px;
z-index: 11;
transform: rotate(135deg);
}
.index-recommended-right .pic {
position: relative;
}
.index-recommended-right a:hover .pic {
transform: scale(1.05);
}
.index-recommended-right .img {
background: none;
}
.index-product {
padding: 0 0 4% 0;
overflow: hidden;
background: url('../images/bg3.jpg') center top no-repeat;
background-size: cover;
}
.index-product-top {
text-align: center;
color: var(--white);
}
.index-product-top .text-2 {
opacity: .6;
width: 60%;
margin: auto;
}
.index-product-bottom {
margin-top: 5%;
}
.index-product-list {
margin: auto;
margin-top: 3%;
position: relative;
}
.index-product-item {
float: left;
width: 25%;
position: relative;
}
.index-product-item .text {
position: absolute;
left: 6%;
top: 13%;
z-index: 12;
width:80%;
height: 70%;
}
.index-product-item .title-1 {
color: var(--black);
}
.index-product-item .img {
background-color: transparent;
padding-bottom: 10%;
}
.index-product-item .pic {
width: 90%;
background-color: var(--white);
}
.index-product-item .product {
position: absolute;
right: 0;
bottom: 0;
z-index: 11;
}
.index-product-item .product img {
width: auto;
display: inline-block;
}
.index-product-item .jiantou-1 {
position: absolute;
left: 0;
bottom: 0;
}
.jiantou-1 {
width: 50px;
height: 50px;
position: relative;
border-radius: 100%;
border: 1px solid rgba(0, 0, 0, .2);
margin-top: 5%;
}
.jiantou-1 i {
background: url('../images/r2.png') center no-repeat;
width: 100%;
height: 100%;
;
position: absolute;
opacity: .3;
}
.index-product-item a:hover .jiantou-1 {
background: var(--red);
border: 1px solid var(--red);
}
.index-product-item a:hover .jiantou-1 i {
background: url('../images/r.png') center no-repeat;
opacity: 1;
}
.index-product-item a:hover .product {
transform: translateY(-10px);
}
.index-product-item.ipi1 {
width: 43%;
}
.index-product-item.ipi1 .text {
left: 8%;
top: 6%;
}
.index-product-item.ipi1 .product {
right: -6.5%;
bottom: 0;
}
.index-product-item.ipi1 .jiantou-1 {
position: relative;
left: auto;
bottom: auto;
margin-top: 30%;
}
.index-product-item.ipi2 {
width: 57%;
float: right;
}
.index-product-item.ipi2 .product {
right: 5%;
bottom: 7%;
}
.index-product-item.ipi2 .img {
padding-bottom: 0;
}
.index-product-item.ipi2 .pic {
width: 100%;
}
.index-product-item.ipi2 .text {
width: 40%;
}
.index-product-item.ipi2 a:hover .product {
transform: translateX(-10px);
}
.index-product-item.ipi3 {
width: 29%;
float: left;
margin-top: 4.6%;
}
.index-product-item.ipi3 .text {
width: 60%;
left: 10%;
height: 68%;
top: 10%;
}
.index-product-item.ipi4 {
width: 29%;
float: right;
margin-top: 4.6%;
margin-right: -3%;
}
.index-product-item.ipi4 .text {
width: 60%;
left: 10%;
height: 68%;
top: 10%;
}
.index-project {
padding: 5% 0;
overflow: hidden;
background: var(--white);
}
.index-project-top {
text-align: center;
text-transform: capitalize;
}
.index-project-top .text-2 {
width: 80%;
margin: auto;
margin-top: 2%;
color: var(--gray3);
}
.index-project-center {
padding: 4% 0;
overflow: hidden;
text-align: center;
}
.index-project-nav {
overflow: hidden;
font-size: 0;
}
.index-project-nav a {
display: inline-block;
vertical-align: middle;
width: 33.33333333333333%;
position: relative;
padding: 1.5% 0;
overflow: hidden;
}
.index-project-nav a::after {
content: '';
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: var(--black);
opacity: .1;
}
.index-project-nav a:last-child::after {
display: none;
}
.index-project-nav .icon-1 {
height: 60px;
margin: auto;
position: relative;
}
.index-project-nav .title-2 {
color: var(--black);
margin-top: 3%;
}
.index-project-nav a.cur, .index-project-nav a:hover {
background: var(--red);
}
.index-project-nav a.cur .title-2, .index-project-nav a:hover .title-2 {
color: var(--white);
}
.index-project-nav a.cur .icon-1 img, .index-project-nav a:hover .icon-1 img {
filter: invert(100%);
}
.index-project-bottom {
overflow: hidden;
}
.index-project-list {
overflow: hidden;
}
.index-project-item {
float: left;
width: 49%;
margin-right: 2%;
}
.index-project-item:last-child {
margin-right: 0;
}
.index-project-item a {
display: block;
position: relative;
}
.index-project-item a::after {
content: '';
width: 0;
height: 4px;
position: absolute;
bottom: 0;
z-index: 1;
background: var(--red);
transition: all .4s ease;
}
.index-project-item .img {
overflow: hidden;
position: unset;
}
.index-project-item .img::before {
content: '';
width: 100px;
height: 200px;
background: var(--white);
position: absolute;
right: -60px;
top: -80px;
z-index: 11;
transform: rotate(135deg);
}
.index-project-item .text {
overflow: hidden;
padding: 5%;
background: var(--gray1);
position: relative;
}
.index-project-item .title-1 {
color: var(--black);
}
.index-project-item .title-1 h4 {
display: block;
width: 85%;
}
.index-project-item .text-2 {
color: var(--gray3);
width: 90%;
}
.index-project-item .text-2 p {
display: block;
width: 100%;
}
.index-project-item .jiantou-1 {
width: 45px;
height: 45px;
position: absolute;
right: 5%;
top: 50%;
margin-top: -25px;
background: var(--white);
z-index: 11;
border: none;
}
.index-project-item .logo-1 img {
opacity: 0;
}
.index-project-item a:hover .logo-1 img {
opacity: 1;
}
.index-project-item a:hover .pic {
transform: scale(1.05);
opacity: .5;
}
.index-project-item a:hover::after {
width: 100%;
}
.index-project-item a:hover .jiantou-1 {
background: var(--red);
}
.index-project-item a:hover .jiantou-1 i {
background: url('../images/r.png') center no-repeat;
opacity: 1;
}
.index-about {
padding: 3% 0;
overflow: hidden;
background: var(--white);
}
.index-about-top {
overflow: hidden;
}
.index-about-top-left {
float: left;
width: 30%;
}
.index-about-top-right {
float: right;
width: 66%;
}
.index-about-top-right .img::before {
content: '';
width: 100px;
height: 200px;
background: var(--white);
position: absolute;
right: -60px;
top: -80px;
z-index: 11;
transform: rotate(135deg);
}
.index-about-top-right .text-2 {
margin-top: 4%;
color: #000;
}
.index-about-bottom {
clear: both;
overflow: hidden;
padding: 3% 0 0 0;
position: relative;
}
.index-about-date {
overflow: hidden;
position: relative;
}
.index-about-date .item-4 {
padding: 6% 0;
overflow: hidden;
position: relative;
}
.index-about-date .title-1 * {
display: inline-block;
vertical-align: top;
}
.index-about-date .title-1 sup {
display: inline-block;
vertical-align: top;
margin: -4px 0 0 5px;
}
.index-about-date .text-2 {
padding: 3% 0 0 0;
overflow: hidden;
}
.index-about-date .line-3 {
background: var(--gray2);
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
}
.index-about-date .line-3 i {
position: absolute;
height: 1px;
left: 0;
bottom: 0;
background: var(--black);
z-index: 11;
}
.index-about-date .line-3 .b100 {
width: 100%;
}
.index-about-date .line-3 .b80 {
width: 80%;
}
.index-about-date .line-3 .b70 {
width: 70%;
}
.index-about-date .line-3 .b40 {
width: 40%;
}
.index-about-bottom .index-about-top-left {
position: absolute;
bottom: 0;
}
.index-latest-news {
padding: 5% 0;
overflow: hidden;
background: var(--white);
}
.index-latest-news-top {
overflow: hidden;
}
.index-latest-news-bottom {
overflow: hidden;
margin-top: 5%;
}
.index-latest-news-item {
float: left;
width: 30%;
margin-right: 4.333%;
}
.index-latest-news-item a {
display: block;
position: relative;
}
.index-latest-news-item .text {
color: var(--black);
padding: 5% 0;
overflow: hidden;
}
.index-latest-news-item .title-1 {
overflow: hidden;
min-height: 200px;
}
.viewmore-2 {
border: 1px solid var(--gray2);
width: 180px;
height: 45px;
line-height: 45px;
text-align: center;
}
.index-latest-news-item .img::before {
content: '';
width: 100px;
height: 200px;
background: var(--white);
position: absolute;
right: -70px;
top: -90px;
z-index: 11;
transform: rotate(135deg);
}
.index-latest-news-item a:hover .img .pic {
transform: scale(1.05);
}
.index-latest-news-item a:hover .viewmore-2 {
background: var(--red);
border: 1px solid var(--red);
}
.index-latest-news-item a:hover .viewmore-2 strong {
color: var(--white);
}
.index-latest-news-item.iln0 {
width: 31%;
}
.index-latest-news-item.iln1, .index-latest-news-item.iln2 {
border-bottom: 1px solid var(--gray2);
}
.index-latest-news-item.iln1 a, .index-latest-news-item.iln2 a {
padding-bottom: 9.5%;
}
.index-latest-news-item.iln2 {
margin-right: 0;
}
.index-latest-news-item.iln4 {
margin-right: 0;
}
/* product */
.div-banner {
position: relative;
overflow: hidden;
}
.div-banner .text {
position: absolute;
left: 3%;
top: 55%;
transform: translateY(-50%);
width: 45%;
z-index: 11;
left: 0;
right: 0;
margin-inline: auto;
width: 80%;
z-index: 111;
}
.div-banner .text .title-1 {
color: var(--white);
}
.div-banner .img {
overflow: hidden;
}
.div-banner .pic {
animation: srmgani 4000ms 1 ease forwards;
}
.path {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
margin-inline: auto;
width: 80%;
color: var(--white);
z-index: 111;
}
.path a {
display: inline-block;
vertical-align: middle;
color: var(--white);
}
.path a span {
display: inline-block;
vertical-align: middle;
}
.path em {
display: inline-block;
vertical-align: middle;
font-style: normal;
margin: 0 5px;
}
.path a i {
width: 20px;
height: 18px;
background: url('../images/home.png') center no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-top: -2px;
}
.div-product {
padding: 5% 0 3% 0;
overflow: hidden;
background: #f7f7f7;
}
.div-product-top {
text-align: center;
width: 50%;
margin: auto;
}
.div-product-center {
overflow: hidden;
width: 80%;
margin: auto;
margin-top: 4%;
text-align: center;
}
.div-product-class {
position: relative;
transform: translateY(10%);
}
.div-product-class .class-item {
display: inline-block;
vertical-align: top;
position: relative;
padding-bottom: 20%;
margin: 0 auto;
width: 90%;
}
.div-product-class .class-item .name-1 {
position: absolute;
left: 9%;
top: 4%;
z-index: 11;
}
.div-product-class .class-item .name-1 strong {
opacity: .1;
position: relative;
left: auto;
bottom: auto;
top: auto;
}
.div-product-class .class-item .product-2 {
position: absolute;
width: 100%;
right: 0;
bottom: 0;
z-index: 12;
text-align: center;
}
.div-product-class .class-item .product-2 img {
max-width: 100%;
}
.div-product-class .class-item .img {
background: none;
overflow: visible;
}
.div-product-class .class-item .img img {
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
}
.div-product-bottom {
padding: 2% 0;
overflow: hidden;
}
.div-product-bottom-content {
overflow: hidden;
}
.product-table-top {
width: 100%;
position: relative;
text-align: center;
min-height: 380px;
}
.product-table-top strong {
position: absolute;
left: 10%;
top: 30%;
color: var(--gray3);
}
.product-table-bottom {
overflow: hidden;
height: auto;
position: relative;
}
.product-table {
overflow: hidden;
width: 100%;
}
.product-table.lefttable table {
width: 100%;
}
.product-table table.bg1 td {
background: var(--white);
}
.product-table table {
border-top: 1px solid #dedede;
display: table;
text-align: left;
width: 100%;
}
.product-table table tbody {
overflow: hidden;
}
.product-table table tr {
overflow: hidden;
margin: 0;
padding: 0;
}
.product-table table tr td:last-child {
border-right: 1px solid #dedede;
}
.product-table table td {
border-bottom: 1px solid #dedede;
box-sizing: border-box;
font-weight: normal;
padding: 0 5%;
overflow: hidden;
height: 60px;
color: var(--gray3);
}
.product-table table tr td.bg1 {
background: var(--white);
}
.product-table-swiper {
cursor: url("../images/cur.png"), default !important;
}
.swiper-scrollbar-drag {
border-radius: 0;
background: var(--red);
}
.swiper-container-horizontal > .swiper-scrollbar {
border-radius: 0;
left: 0;
height: 4px;
width: 100%;
bottom: 0;
}
.div-product-bottom-content-left {
float: left;
width: 15%;
}
.div-product-bottom-content-right {
float: left;
width: 85%;
}
.swiper-scrollbar {
height: 3px;
}
.div-product-bottom-gundong {
position: relative;
width: 90%;
float: left;
}
.div-product-bottom-content-gundong {
height: 863px;
overflow: auto;
width: 100%;
}
.div-product-bottom-content-gundong::-webkit-scrollbar {
height: 4px;
width: 3px;
background: #cfd6db;
}
.div-product-bottom-gundong .swiper-scrollbar {
position: absolute;
right: 0;
bottom: 0;
width: 85%;
z-index: 1111;
}
.div-product-list {
background: #f7f7f7;
overflow: hidden;
padding-bottom: 1%;
}
.div-product-list-top {
position: relative;
}
.div-product-nav {
position: relative;
z-index: 111;
}
.div-product-nav .choice-2 {
width: 16.5%;
float: left;
margin-right: 3%;
margin-bottom: 30px;
}
.div-product-nav .choice-2 strong {
display: block;
width: 90%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.choice-2 {
position: relative;
}
.choice-2 a {
position: relative;
display: block;
padding: 15px 0;
overflow: hidden;
}
.choice-2 a strong {
color: var(--black);
}
.choice-2 a i {
width: 13px;
height: 8px;
position: absolute;
right: 0;
top: 50%;
margin-top: -4px;
background: url('../images/d.png') center no-repeat;
filter: grayscale(100%);
}
.choice-2 a::after {
content: '';
width: 100%;
height: 2px;
background: var(--black);
position: absolute;
left: 0;
bottom: 0;
}
.choice-2 ul {
list-style: none;
margin: 0;
padding: 0;
background: var(--white);
padding: 3% 0;
overflow: hidden;
display: none;
position: absolute;
width: 100%;
z-index: 11;
left: 0;
box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.1);
}
.choice-2 ul a {
display: block;
color: var(--black);
padding: 2% 5%;
position: relative;
}
.choice-2 ul a::after {
content: '';
width: 3px;
height: 0;
background: var(--red);
position: absolute;
left: 0;
top: 0;
transition: all .4s ease;
}
.choice-2 ul a:hover {
background: var(--gray1);
color: var(--red);
}
.choice-2 ul a:hover::after {
height: 100%;
}
.choice-2:hover a.cur i {
transform: rotate(-180deg);
filter: grayscale(0);
}
.choice-2:hover a.cur::after {
background: var(--red);
}
.search-2 {
position: relative;
width: 17%;
float: left;
overflow: hidden;
}
.search-1 {
border: none;
background: none;
outline: none;
border-bottom: 2px solid var(--black);
color: var(--black);
padding: 14px 0;
width: 100%;
box-sizing: border-box;
transition: all .4s ease;
}
.search-1:focus {
border-bottom: 2px solid var(--red);
}
.search-1::-webkit-input-placeholder {
color: var(--black);
}
.searchbtn-1 {
width: 20px;
height: 20px;
position: absolute;
right: 0;
top: 50%;
margin-top: -10px;
background: url('../images/ss.png') center no-repeat;
filter: grayscale(100%);
}
.searchbtn-1:hover {
filter: grayscale(0);
}
.div-product-nav .choice-2 ul {
max-height: 240px;
overflow: auto;
}
.div-product-list-center {
padding: 2% 0 0 0;
overflow: hidden;
clear: both;
}
.div-product-type .title-1 {
margin-bottom: 3%;
}
.div-product-type {
position: relative;
overflow: hidden;
margin-bottom: 4%;
}
.div-product-item {
float: left;
width: 31%;
margin-right: 2%;
margin-bottom: 3%;
}
.div-product-item:nth-child(3n) {
margin-right: 0%;
}
.div-product-item.mr0 {
margin-right: 0;
}
.div-product-item a {
display: block;
position: relative;
}
@media (max-width: 1399px) {
.div-product-item .img {
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
background: var(--white);
overflow: hidden;
height: 460px;
}
}
@media (min-width: 1400px) and (max-width: 1439px) {
.div-product-item .img {
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
background: var(--white);
overflow: hidden;
height: 460px;
}
}
@media (min-width: 1440px) and (max-width: 1918px) {
.div-product-item .img {
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
background: var(--white);
overflow: hidden;
height: 460px;
}
}
@media (min-width: 1919px) and (max-width: 2000px) {
.div-product-item .img {
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
background: var(--white);
overflow: hidden;
height: 500px;
}
}
@media (min-width: 1922px) {
.div-product-item .img {
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
background: var(--white);
overflow: hidden;
height: 500px;
}
}
.div-product-item .pic {
transform: translateY(-4%);
}
.div-product-item .pic img.img-center {
max-width: 100%;
max-height: 100%;
margin-bottom: clamp(20px, 2.5vw, 30px);
}
.div-product-item .text {
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 11;
}
.div-product-item .text .text-main {
position: absolute;
left: 5%;
width: 90%;
bottom: 0;
z-index: 11;
color: var(--black);
transform: translateY(0%);
}
.div-product-item .title-1 {
margin-bottom: 0;
}
.div-product-item .text-2 {
overflow: hidden;
}
.div-product-item .item-3 {
margin-top: 3%;
opacity: 0;
}
.div-product-item .item-3 li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
padding: 0px 0 0px 20px;
color: var(--gray3);
}
.div-product-item .item-3 li:before {
content: '';
width: 6px;
height: 6px;
position: absolute;
left: 0;
top: 50%;
background: var(--gray3);
margin-top: -3px;
}
.div-product-item .viewmore-4 {
margin-top: 3%;
position: relative;
border-top: 2px solid var(--red);
padding: 4% 0;
}
.div-product-item .viewmore-4 strong {
color: var(--red);
}
.div-product-item .viewmore-4 i {
width: 13px;
height: 8px;
position: absolute;
right: 0;
top: 50%;
margin-top: -4px;
background: url('../images/d.png') center no-repeat;
transform: rotate(-90deg);
}
.div-product-item a:hover .text-main {
transform: translateY(0);
}
.div-product-item a:hover .item-3, .div-product-item a:hover .viewmore-4 {
opacity: 1;
}
.product-top-nav {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
background: #262626;
padding: 20px 0;
overflow: hidden;
transition: all .4s ease;
transform: translateY(-100px);
}
.product-top-nav.cur {
transform: translateY(0);
}
.product-top-nav .div-content {
position: relative;
}
.product-top-nav a {
display: inline-block;
vertical-align: middle;
color: var(--white);
}
.product-top-nav a.location {
margin-right: 20px;
opacity: .3;
}
.product-top-nav a.location.cur {
opacity: 1;
}
.product-top-nav a.location:hover {
opacity: 1;
}
.product-top-nav a.location:hover strong {
color: var(--white);
}
.product-top-nav-right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.product-top-nav a.botton {
width: 170px;
height: 40px;
line-height: 40px;
margin-left: 5px;
border: 1px solid var(--gray3);
text-align: center;
border-radius: 2px;
}
.product-top-nav a.botton.cur {
background: var(--white);
color: var(--black);
}
.product-top-nav a.botton:hover {
background: var(--red);
border: 1px solid var(--red);
}
.product-top-nav a.botton:hover strong {
color: var(--white);
}
.div-detail-banner {
position: relative;
overflow: hidden;
}
.div-detail-banner .img {
overflow: hidden;
margin-bottom: 5%;
}
.div-detail-banner .pic {
overflow: hidden;
}
.div-detail-banner .text {
position: absolute;
left: 10%;
top: 55%;
transform: translateY(-50%);
width: 31.5%;
z-index: 11;
color: var(--white);
}
.div-detail-banner .text .title-1 {
overflow: hidden;
}
.div-detail-banner .text .title-1 strong {
line-height: 56px;
}
.div-detail-banner .text .text-2 {
margin-top: 1%;
}
.div-detail-banner .text .line-3 {
background: #595959;
height: 2px;
width: 100%;
position: relative;
margin: 3% auto;
}
.div-detail-banner .text .line-3 i {
position: absolute;
width: 45%;
height: 100%;
background: var(--red);
}
.div-detail-banner .text .text-4 {
opacity: .6;
}
.div-detail-banner .text .botton-5 {
margin-top: 8%;
}
.div-detail-banner .text .botton-5 a {
display: inline-block;
vertical-align: middle;
text-align: center;
width: 180px;
height: 45px;
line-height: 50px;
color: var(--black);
background: var(--white);
border-radius: 2px;
margin-right: 5px;
}
.div-detail-banner .text .botton-5 a.cur {
background: var(--red);
color: var(--white);
}
.div-detail-banner .text .botton-5 a.cur:hover {
background: var(--red2);
}
.div-detail-banner .text .botton-5 a:hover {
background: var(--gray2);
}
.div-detail-banner .english-1 {
position: absolute;
left: -3%;
bottom: -1%;
z-index: 1;
}
.div-detail-banner .english-1 strong {
opacity: .03;
color: var(--white);
}
.div-detail-banner .product-2 {
position: absolute;
right: 0;
bottom: 0;
width: 50%;
z-index: 30;
text-align: center;
}
.div-detail-banner .product-2 img {
display: inline-block;
max-width: 100%;
}
.product-advantages {
padding: 5% 0;
overflow: hidden;
}
.product-advantages-top {
text-align: center;
}
.product-advantages-bottom {
margin-top: 5%;
overflow: hidden;
position: relative;
}
.product-advantages-left {
float: left;
width: 59%;
}
.product-advantages-swiper {
position: relative;
}
.product-advantages-swiper .pic {
position: relative;
}
.product-advantages-swiper .pic .video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9;
overflow: hidden;
opacity: 0;
background: var(--black);
}
.product-advantages-swiper .pic .video.cur {
opacity: 1;
}
.product-advantages-swiper .pic .video video {
display: block;
width: 100%;
height: 100%;
}
.product-advantages-swiper .play-1 {
position: absolute;
width: 90px;
height: 62px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../images/play.png') center no-repeat;
z-index: 11;
cursor: pointer;
}
.product-advantages-swiper .div-close {
z-index: 40;
right: 5%;
top: 5%;
position: absolute;
}
.product-advantages-swiper .vjs-big-play-button {
display: none;
}
.product-advantages-right {
float: left;
width: 41%;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.product-advantages-list {
position: relative;
width: 100%;
height: 100%;
}
.product-advantages-item {
float: left;
width: 50%;
height: 50%;
position: relative;
border: 1px solid #dddddd;
box-sizing: border-box;
cursor: pointer;
}
.product-advantages-item::before {
content: '';
width: 0;
height: 3px;
position: absolute;
left: 0;
bottom: 0;
background: var(--red);
transition: all .4s ease;
}
.product-advantages-item .item-1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 11;
text-align: center;
}
.product-advantages-item .icon-1 {
position: relative;
}
.product-advantages-item .title-1 {
margin-top: 10%;
}
.product-advantages-item .img {
background: var(--white);
}
.product-advantages-item.cur .title-1 {
color: var(--red);
}
.product-advantages-item.cur::before {
width: 100%;
}
.product-advantages-item:nth-child(2), .product-advantages-item:nth-child(4) {
border-left: none;
}
.product-advantages-item:nth-child(1), .product-advantages-item:nth-child(2) {
border-bottom: none;
}
.product-advantages-list.number1 .product-advantages-item {
width: 100%;
height: 100%;
}
.product-advantages-list.number2 .product-advantages-item {
width: 50%;
height: 100%;
}
.product-advantages-list.number3 .product-advantages-item:last-child {
width: 100%;
height: 50%;
}
.product-advantages-list.number2::after, .product-advantages-list.number3::after {
overflow: hidden;
position: absolute;
content: '';
width: 100%;
height: 1px;
background: #dddddd;
z-index: 11;
bottom: 0;
left: 0;
}
.product-parameters {
padding: 3% 0;
overflow: hidden;
background: url('../images/bg2.png') center top no-repeat;
background-size: cover;
}
.product-parameters-top {
text-align: center;
}
.product-parameters-top .icon360-1 {
width: 100px;
margin: auto;
}
.product-parameters-top .icon360-1 img {
display: block;
max-width: 100%;
}
.product-parameters-bottom {
margin-top: 0;
position: relative;
overflow: hidden;
}
.product-parameters-bottom .img {
background: none;
}
.product-parameters-bottom .product-1 {
position: absolute;
left: 50%;
top: 50%;
z-index: 11;
text-align: center;
transform: translate(-50%, -50%);
}
.product-parameters-bottom .parameters-1 {
position: absolute;
left: 10%;
top: 40%;
transform: translateY(-50%);
width: 80%;
z-index: 20;
}
.product-parameters-bottom .parameters-text-1 {
position: relative;
width: 70%;
margin: 5% auto;
}
.parameters-item {
width: 25%;
float: left;
position: relative;
border-bottom: solid 1px var(--gray2);
padding: 2.3% 0;
clear: left;
}
.parameters-item:nth-child(5), .parameters-item:last-child {
border: none;
}
.parameters-item .icon-1 {
float: right;
width: 90px;
height: 90px;
position: relative;
border-radius: 100%;
background: var(--white);
}
.parameters-item * {
transition: all .4s ease;
}
.parameters-item .text-2 {
width: 60%;
text-align: right;
position: absolute;
right: 120px;
top: 50%;
transform: translateY(-50%);
}
.parameters-item .text-2 strong {
color: var(--black);
}
.parameters-item .text-2 p {
display: block;
margin: 0;
padding: 0;
color: var(--gray3);
}
.parameters-item.fr {
float: right;
clear: right;
}
.parameters-item.fr .icon-1 {
float: left;
}
.parameters-item.fr .text-2 {
text-align: left;
left: 120px;
right: auto;
}
.parameters-item:hover .icon-1 {
background: var(--red);
}
.parameters-item:hover .icon-1 img {
filter: invert(100%);
}
.product-video {
position: relative;
overflow: hidden;
background: var(--gray);
}
.product-video, .product-video * {
user-select: none;
}
.product-video-img {
position: relative;
}
.product-video-img .img {
transform: scale(.8);
}
.product-video-swiper {
position: relative;
}
.product-video-swiper .swiper-slide-active {
z-index: 11;
}
.product-video-item {
overflow: hidden;
}
.product-video-item .play-1 {
position: absolute;
width: 90px;
height: 62px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../images/play.png') center no-repeat;
z-index: 11;
cursor: pointer;
}
.product-video-item .text {
position: absolute;
left: 10%;
bottom: 7%;
z-index: 11;
width: 80%;
color: var(--white);
}
.product-video-item .num-1 {
overflow: hidden;
}
.product-video-item .title-1 {
margin-top: 1%;
}
.product-video-item .img .video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9;
overflow: hidden;
opacity: 0;
background: var(--black);
}
.product-video-item .img .video.cur {
opacity: 1;
}
.product-video-item .img .video video {
display: block;
width: 100%;
height: 100%;
}
.product-video-item .img .play-1 {
position: absolute;
width: 90px;
height: 62px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../images/play.png') center no-repeat;
z-index: 11;
cursor: pointer;
}
.product-video-item .img .div-close {
z-index: 40;
right: 5%;
top: 5%;
position: absolute;
}
.product-video-item .img .vjs-big-play-button {
display: none;
}
.video-prev, .video-next {
bottom: 7%;
width: 60px;
height: 60px;
}
.video-prev {
right: 14%;
}
.video-next {
right: 10%;
}
.product-application-scenarios {
padding: 10% 0 5% 0;
overflow: hidden;
background: #f7f7f7;
}
.application-scenarios-top {
text-align: center;
}
.application-scenarios-swiper {
margin-top: 5%;
position: relative;
cursor: url("../images/cos.png"), default !important;
}
.application-scenarios-item .pic {
transition: all .4s ease;
}
.application-scenarios-item .img {
position: relative;
}
.application-scenarios-item .title-1 {
position: absolute;
left: 0;
bottom: 10%;
text-align: center;
width: 100%;
color: var(--white);
z-index: 1;
}
.application-scenarios-item:hover .pic {
transform: scale(1.05);
}
.recommend-product {
overflow: hidden;
padding: 4% 0 5% 0;
background: #f7f7f7;
}
.recommend-product-top {
text-align: center;
}
.recommend-product-bottom {
width: 81%;
margin: auto;
margin-top: 3%;
}
.recommend-product-swiper {
position: relative;
padding: 2% 0;
}
.recommend-product-swiper .div-product-item {
width: 96%;
margin: 2%;
}
.robot-control-system {
padding: 7% 0;
overflow: hidden;
}
.robot-control-system-left {
float: left;
width: 43.5%;
}
.robot-control-system-left .title-1 {
margin-top: 4%;
}
.robot-control-system-left .text-2 {
margin-top: 5%;
}
.robot-control-system-left .donwload-2 {
margin-top: 7%;
}
.robot-control-system-left .donwload-2 a {
width: 38%;
}
.robot-control-system-right {
float: right;
width: 51%;
box-shadow: -5px 0px 30px 0px rgb(0 0 0 / 15%);
}
.robot-control-system-right .play-1 {
position: absolute;
width: 90px;
height: 62px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../images/play.png') center no-repeat;
z-index: 11;
cursor: pointer;
}
.standard-function {
padding: 7% 0;
overflow: hidden;
background: var(--gray1);
}
.standard-function-top {
text-align: center;
}
.standard-function-list {
margin-top: 4%;
}
.standard-function-list.num5 {
overflow: hidden;
}
.standard-function-item {
float: left;
width: 32.444%;
margin-right: 1.333%;
margin-bottom: 1.333%;
position: relative;
}
.standard-function-item .text {
position: absolute;
z-index: 11;
left: 8%;
top: 15%;
width: 84%;
height: 75%;
}
.standard-function-item .icon-1 {
overflow: hidden;
width: 30%;
}
.standard-function-item .number-1 {
position: absolute;
right: -1%;
top: -3%;
color: var(--gray1);
}
.standard-function-item .text-1 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.standard-function-item .img {
background: var(--white);
}
.standard-function-list.num5 .standard-function-item:nth-child(3) {
margin-right: 0;
}
.standard-function-list.num5 .standard-function-item:nth-child(4) {
width: 49.3%;
}
.standard-function-list.num5 .standard-function-item:nth-child(5) {
width: 49.3%;
margin-right: 0;
}
.standard-function-bottom {
padding: 2% 0 7% 0;
overflow: hidden;
background: var(--gray1);
}
.standard-function-left {
float: left;
width: 38%;
margin-left: 10%;
margin-top: 4.5%;
}
.standard-function-left .title-1 {
overflow: hidden;
}
.standard-function-li {
margin-top: 13%;
}
.standard-function-li li {
list-style: none;
margin: 0;
padding: 0;
padding: 3.5% 0;
border-bottom: 2px solid var(--gray2);
}
.standard-function-li li:last-child {
border: none;
}
.standard-function-li li i {
display: inline-block;
vertical-align: middle;
color: var(--red);
font-style: normal;
}
.standard-function-li li span {
display: inline;
vertical-align: middle;
color: var(--gray3);
}
.standard-function-right {
float: right;
width: 45%;
}
.standard-function-right .img {
background: none;
box-shadow: 0px 30px 80px 0px rgba(10, 31, 69, 0.14)
}
.users-and-roles {
position: relative;
overflow: hidden;
}
.users-and-roles .img img {
opacity: .2;
}
.users-and-roles .text {
position: absolute;
z-index: 11;
width: 100%;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: var(--white);
}
.users-and-roles .title-1 {
margin-bottom: 1%;
}
.users-and-roles .text-1 {
width: 62%;
margin: auto;
margin-bottom: 4%;
}
.users-and-roles .text .pic img {
opacity: 1;
max-width: 100%;
width: auto;
}
.visually-display-agv {
padding: 7% 0;
overflow: hidden;
text-align: center;
}
.visually-display-agv .pic {
margin-top: 5%;
overflow: visible;
}
.visually-display-agv .pic img {
max-width: 100%;
width: auto;
box-shadow: 0px 20px 60px 0px rgba(10, 31, 69, 0.1);
display: inline-block;
height: auto;
}
.div-helpchoose {
background: url('../images/helpchoose.jpg') center top no-repeat;
background-size: cover;
padding-top: 120px;
overflow: hidden;
position: relative;
}
.div-helpchoose .path {
position: relative;
color: var(--black);
top: auto;
left: auto;
width: 94%;
margin: auto;
padding-bottom: 1%;
}
.div-helpchoose .path a {
color: var(--black);
}
.div-helpchoose .path a i {
background: url('../images/home1.png') center no-repeat;
}
.div-helpchoose-content {
overflow: hidden;
position: relative;
min-height: 300px;
border-top: 1px solid #e0e1e1;
}
.helpchoose-left {
float: left;
width: 13%;
padding: 5% 0 2% 3%;
overflow: hidden;
position: relative;
}
.helpchoose-step {
position: relative;
}
.helpchoose-step-item {
position: relative;
padding-bottom: 50px;
overflow: hidden;
}
.helpchoose-step-item:last-child {
padding-bottom: 0px;
}
.helpchoose-step-item .points-1 {
width: 40px;
height: 40px;
float: left;
position: relative;
}
.helpchoose-step-item .points-1::after {
content: '';
width: 1px;
height: 240%;
position: absolute;
left: 10px;
top: 30px;
border-right: 1px dashed #ccc;
}
.helpchoose-step-item .points-1 i {
width: 20px;
height: 20px;
border: 1px solid #696969;
border-radius: 100%;
display: block;
position: relative;
}
.helpchoose-step-item .points-1 i::after {
content: '';
width: 4px;
height: 4px;
position: absolute;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
border-radius: 100%;
background: #696969;
transition: all .4s ease;
}
.helpchoose-step-item .text {
float: left;
color: var(--gray3);
margin-top: -3px;
}
.helpchoose-step-item .number-1 {
overflow: hidden;
}
.helpchoose-step-item .title-1 {
overflow: hidden;
}
.helpchoose-step-item:last-child .points-1::after {
display: none;
}
.helpchoose-step-item.cur .number-1, .helpchoose-step-item.cur .title-1 {
color: var(--red);
font-family: 'Roboto-B', 'Roboto', PingFang SC, 'Microsoft YaHei', Arial;
}
.helpchoose-step-item.cur .points-1 i {
background: var(--red);
border: 1px solid var(--red);
}
.helpchoose-step-item.cur .points-1 i::after {
background: var(--white);
transform: scale(2.5);
}
.helpchoose-step-item.on .number-1, .helpchoose-step-item.on .title-1 {
color: var(--black);
font-family: 'Roboto-B', 'Roboto', PingFang SC, 'Microsoft YaHei', Arial;
}
.helpchoose-step-item.on .points-1 i {
background: var(--black);
border: 1px solid var(--black);
}
.helpchoose-step-item.on .points-1 i::after {
background: var(--white);
transform: scale(2.5);
}
.helpchoose-step-item.on .points-1::after {
border-right: 1px dashed var(--black);
}
.helpchoose-center {
text-align: center;
overflow: hidden;
float: left;
width: 70%;
position: relative;
border-left: 1px solid #e0e1e1;
border-right: 1px solid #e0e1e1;
box-sizing: border-box;
}
.helpchoose-center-top {
text-align: center;
position: relative;
padding: 5% 0;
overflow: hidden;
}
.helpchoose-center-top .title-1 {
overflow: hidden;
padding: 2.5% 0;
}
.helpchoose-center-top .text-2 {
font-weight: normal;
color: var(--gray3);
}
.skip-1 {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.skip-1 span {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
color: var(--black);
}
.skip-1 i {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px solid var(--black);
background: url('../images/r2.png') center no-repeat;
}
.skip-1 a:hover i {
border: 1px solid var(--red);
background: url('../images/r.png') center no-repeat var(--red);
}
.return-2 {
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.return-2 span {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
color: var(--black);
}
.return-2 i {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px solid var(--black);
background: url('../images/l2.png') center no-repeat;
}
.return-2 a:hover i {
border: 1px solid var(--red);
background: url('../images/l.png') center no-repeat var(--red);
}
.helpchoose-center-bottom {
border-top: 1px solid #e0e1e1;
overflow: hidden;
position: relative;
}
.helpchoose-center-bottom::after {
content: '';
width: 1px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
background: var(--gray2);
z-index: 1;
}
.helpchoose-center-bottom-left {
padding: 5% 0;
position: relative;
overflow: hidden;
float: left;
width: 50%;
}
.helpchoose-center-bottom-item {
overflow: hidden;
padding: 15% 0;
}
.helpchoose-center-bottom-item .icon-1 {
width: 140px;
position: relative;
margin: auto;
}
.helpchoose-center-bottom-item .icon-1 img {
filter: grayscale(100%);
}
.helpchoose-center-bottom-item .title-2 {
margin: 2% auto 4% auto;
color: var(--black);
}
.helpchoose-center-bottom-item .agdd-3 {
width: 40px;
height: 40px;
border: 1px solid var(--gray2);
border-radius: 100%;
position: relative;
margin: 10px auto;
}
.helpchoose-center-bottom-item .agdd-3::before {
content: '';
width: 10px;
height: 10px;
position: absolute;
left: 50%;
top: 50%;
background: url('../images/ga.png') center no-repeat;
margin: -5px 0 0 -5px;
filter: grayscale(100%);
}
.helpchoose-center-bottom-right {
padding: 5% 0;
position: relative;
overflow: hidden;
float: left;
width: 50%;
}
.helpchoose-center-bottom-item a:hover .icon-1 img {
filter: grayscale(0);
}
.helpchoose-center-bottom-item a:hover .title-2 {
color: var(--red);
}
.helpchoose-center-bottom-item a:hover .agdd-3::before {
filter: grayscale(0);
}
.helpchoose-center-bottom-item a:hover .agdd-3 {
border: 1px solid var(--red);
}
.helpchoose-center-bottom-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 12%;
}
.helpchoose-center-bottom-center .helpchoose-center-bottom-item {
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.08);
background: var(--white);
padding: 0;
}
.helpchoose-center-bottom-center .helpchoose-center-bottom-item a {
display: block;
padding: 25% 2% 20% 2%;
}
.helpchoose-center-bottom-center .helpchoose-center-bottom-item a .title-2 {
margin: 2% auto 0 auto;
}
.helpchoose-right {
float: right;
width: 14%;
overflow: hidden;
position: relative;
padding-top: 5px;
height: 100%;
}
.helpchoose-right-top {
border-bottom: 1px solid #e0e1e1;
}
.current-selection {
display: block;
padding: 5% 0;
text-align: center;
width: 100%;
color: var(--black);
}
.helpchoose-right-bottom {
position: absolute;
left: 5%;
bottom: 2%;
width: 90%;
z-index: 11;
}
.current-button {
width: 100%;
border: 1px solid var(--gray2);
text-align: center;
padding: 4% 0;
text-align: center;
border-radius: 4px;
margin: 3% 0;
color: var(--black);
display: block;
}
.current-button.noresults {
color: var(--white);
border: 1px solid var(--gray3);
background: var(--gray3);
}
.current-button.cur {
color: var(--white);
border: 1px solid var(--red);
background: var(--red);
}
.helpchoose-right-center {
padding-top: 4%;
overflow: hidden;
}
.helpchoose-right-item {
position: relative;
overflow: hidden;
padding: 4% 5%;
}
.helpchoose-right-item a {
display: block;
text-align: center;
}
.helpchoose-right-item .icon-1 {
position: relative;
overflow: hidden;
}
.helpchoose-right-item .title-2 {
margin-top: 1;
color: var(--black);
}
.helpchoose-center-product-list {
border-top: 1px solid #e0e1e1;
overflow: hidden;
position: relative;
padding: 5%;
text-align: left;
width: 90%;
margin: auto;
}
.helpchoose-product-list {
width: 90%;
margin: auto;
overflow: hidden;
}
/* .helpchoose-product-list .div-product-item .text .text-main {transform: translateY(40%);} */
.helpchoose-product-list .div-product-item a:hover .text .text-main {
transform: translateY(0);
}
/* technology */
.technology-content {
padding: 6% 0;
overflow: hidden;
position: relative;
}
.technology-content-left {
float: left;
width: 45%;
margin-top: 13%;
}
.technology-content-left .title-1 {
width: 80%;
}
.technology-content-left .text-2 {
color: var(--gray3);
margin-top: 5%;
}
.technology-content-right {
float: right;
width: 50%;
position: relative;
overflow: hidden;
}
.technology-content-right .play-1 {
position: absolute;
width: 90px;
height: 62px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../images/play.png') center no-repeat;
z-index: 11;
cursor: pointer;
}
.technology-intelligent {
overflow: hidden;
position: relative;
}
.technology-intelligent .text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 11;
width: 57%;
text-align: center;
color: var(--white);
z-index: 11;
}
.technology-intelligent .text .text-2 {
margin-top: 3%;
opacity: .8;
}
.technology-intelligent .img {
transform: scale(.8);
}
.technology-high-precision {
padding: 10% 0 0 0;
overflow: hidden;
position: relative;
}
.technology-high-precision::after {
content: '';
width: 100%;
height: 40%;
background: var(--gray1);
position: absolute;
left: 0;
bottom: 0;
}
.high-precision-top {
overflow: hidden;
position: relative;
z-index: 11;
}
.high-precision-top-left {
float: left;
width: 38%;
}
.high-precision-top-right {
float: right;
width: 57%;
}
.high-precision-top-right .text-1 {
color: var(--gray3);
text-align: justify;
}
.high-precision-bottom {
clear: both;
padding: 5% 0;
overflow: hidden;
position: relative;
z-index: 11;
}
.technology-ervo-control {
overflow: hidden;
padding: 3% 0;
background: var(--gray1);
}
.ervo-control-left {
float: left;
width: 50%;
}
.ervo-control-right {
float: right;
width: 43%;
margin-top: 10%;
}
.ervo-control-right .text-2 {
margin-top: 5%;
text-align: justify;
color: var(--gray3);
}
.technology-competitive-advantage {
padding: 5% 0;
overflow: hidden;
background: var(--gray1);
}
.competitive-advantage-top {
text-align: center
}
.competitive-advantage-bottom {
margin-top: 4%;
position: relative;
}
.competitive-advantage-item {
position: relative;
float: left;
width: 30.5%;
transition: all .4s ease;
margin-right: 4%;
margin-bottom: 3%;
}
.competitive-advantage-item.mr0 {
margin-right: 0;
}
.competitive-advantage-item * {
transition: all .4s ease;
}
.competitive-advantage-item .text {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
z-index: 11;
}
.competitive-advantage-item .icon-1 {
width: 70px;
height: 70px;
}
.competitive-advantage-item .title-1 {
margin-top: 5%;
position: relative;
}
.competitive-advantage-item .title-1::before {
content: '';
width: 100%;
height: 2px;
background: var(--gray2);
position: absolute;
left: 0;
bottom: 0;
}
.competitive-advantage-item .title-1 h4 {
padding-bottom: 7%;
display: inline-block;
position: relative;
}
.competitive-advantage-item .title-1 strong::before {
content: '';
background: var(--red);
z-index: 11;
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
}
.competitive-advantage-item .text-1 {
overflow: hidden;
color: var(--gray3);
padding-top: 7%;
}
.competitive-advantage-item .pic {
background: var(--white)
}
.competitive-advantage-item:hover {
transform: translateY(-2%);
}
.competitive-advantage-item:hover .title-1 h4 {
color: var(--red);
}
.competitive-advantage-item:hover .text-1 {
color: #1a1a1a;
}
/* application */
.application-content {
padding: 5% 0 0 0;
overflow: hidden;
position: relative;
}
.application-content-type {
position: relative;
z-index: 99;
}
.application-content-type .choice-2 {
float: left;
width: 32%;
margin-right: 2%;
}
.application-content-type .choice-2:last-child {
margin-right: 0;
}
.application-content-type .choice-2 ul {
overflow: auto;
height: 200px;
}
.application-content-list {
padding: 4% 0;
overflow: hidden;
clear: both;
}
.application-content-list-top {
position: relative;
clear: both;
overflow: hidden;
}
.application-content-item {
float: left;
width: 32%;
margin-bottom: 2%;
margin-right: 2%;
}
.application-content-item.mr0 {
margin-right: 0;
}
.application-content-item a {
display: block;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--gray1);
}
.application-content-item .img {
position: relative;
}
.application-content-item .pic img {
opacity: 0;
}
.application-content-item .logo-1 {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 11;
}
.application-content-item .text {
position: relative;
color: var(--black);
padding: 4% 7%;
overflow: hidden;
box-sizing: border-box;
}
.application-content-item .title-1 {
overflow: hidden;
}
.application-content-item .text-2 {
overflow: hidden;
color: var(--gray3);
margin-top: 1%;
}
.application-content-item .viewmore-3 {
margin-top: 5%;
position: relative;
padding: 6% 0 0 0;
overflow: hidden;
}
.application-content-item .viewmore-3::after, .application-content-item .viewmore-3::before {
content: '';
width: 100%;
height: 2px;
background: var(--gray2);
position: absolute;
left: 0;
top: 0;
z-index: 11;
}
.application-content-item .viewmore-3::before {
width: 0;
background: var(--red);
z-index: 13;
transition: all .4s ease;
}
.application-content-item .viewmore-3 strong {
color: var(--gray4);
}
.application-content-item .viewmore-3 i {
width: 8px;
height: 13px;
position: absolute;
right: 0;
top: 55%;
background: url('../images/r1.png') center no-repeat;
filter: grayscale(100%);
opacity: .5;
}
.application-content-item a:hover .pic {
transform: scale(1.05);
}
.application-content-item a:hover .logo-1 {
opacity: 1;
}
.application-content-item a:hover .pic img {
opacity: 1;
}
.application-content-item a:hover .viewmore-3::before {
width: 100%;
}
.application-content-item a:hover .viewmore-3 strong {
color: var(--red);
}
.application-content-item a:hover .viewmore-3 i {
filter: grayscale(0);
opacity: 1;
}
.application-content-item.aci1 {
width: 66%;
margin-bottom: 0;
margin: 0;
}
.application-content-item.aci1 .text {
position: absolute;
left: 4%;
bottom: 5%;
width: 92%;
z-index: 11;
color: var(--white);
padding: 0;
background: none;
}
.application-content-item.aci1 .text-2 {
color: var(--white);
}
.application-content-item.aci1 .viewmore-3 {
border: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
bottom: 0;
z-index: 11;
}
.application-content-item.aci1 .viewmore-3::after, .application-content-item.aci1 .viewmore-3::before {
display: none;
}
.application-content-item.aci1 .viewmore-3 strong {
color: var(--white);
margin-right: 20px;
}
.application-content-item.aci1 .viewmore-3 i {
background: url('../images/r3.png') center no-repeat;
margin-top: -9px;
opacity: 1;
}
.application-content-item.aci1 a:hover .viewmore-3 strong {
color: var(--white);
}
.application-content-item.aci1 a:hover .pic {
opacity: .5;
}
.application-content-item.aci1 .pic img {
opacity: 1;
}
.application-content-item.aci2 {
position: absolute;
right: 0;
top: 0;
height: 100%;
margin: 0;
}
.application-content-item.aci2 .text {
transform: translateY(5%);
}
.application-content-list-center {
margin-top: 2%;
overflow: hidden;
}
.application-content-list-bottom {
overflow: hidden;
}
.pageturn {
text-align: center;
padding: 3% 0;
}
.pageturn a {
display: inline-block;
vertical-align: middle;
position: relative;
margin: 0;
width: 70px;
height: 70px;
}
.pageturn a.prev i {
background: url('../images/l2.png') center no-repeat;
}
.pageturn a.next i {
background: url('../images/r2.png') center no-repeat;
}
.pageturn a i {
width: 70px;
height: 70px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #e7e7e7;
border-radius: 100%;
}
.pageturn a span {
font-size: 20px;
display: block;
line-height: 70px;
color: var(--black);
}
.pageturn a.cur span {
color: var(--red);
}
.pageturn a.prev:hover i {
background: url('../images/l3.png') center no-repeat var(--red);
border: 1px solid var(--red);
}
.pageturn a.next:hover i {
background: url('../images/r3.png') center no-repeat var(--red);
border: 1px solid var(--red);
}
.pageturn a:hover span {
color: var(--red);
}
.div-banner .logo-1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 15;
text-align: center;
}
.application-detail {
padding: 4% 0;
overflow: hidden;
}
.application-detail-content {
position: relative;
}
.application-detail-left {
float: left;
width: 70%;
margin: auto;
}
.application-detail-left-top {
border-bottom: 2px solid var(--black);
padding: 2% 0;
overflow: hidden;
}
.application-detail-left-center {
padding: 3% 0;
}
.application-detail-left-center .date-1, .application-detail-left-center .type-2 {
display: inline-block;
vertical-align: middle;
border: rgba(0, 0, 0, 0.1) solid 1px;
border-radius: 50px;
line-height: 45px;
padding: 0 3%;
}
.application-detail-left-center .type-2 {
margin-left: 10px;
}
.application-detail-left-center .fenxiang-1 {
float: right;
}
.application-detail-left-bottom {
padding: 2% 0;
overflow: hidden;
clear: both;
}
.application-detail-left-bottom .video {
position: relative;
}
.application-detail-left-bottom video {
display: block;
width: 100%;
height: auto;
position: relative;
}
.application-detail-left-bottom .play-1 {
position: absolute;
width: 90px;
height: 62px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url('../images/play.png') center no-repeat;
z-index: 11;
cursor: pointer;
}
.application-detail-left-bottom strong {
font-weight: bold;
}
.application-detail-left-bottom p {
line-height: 16pt;
margin: 4px 0px 16px 0px;
}
.application-detail-left-bottom h1, .application-detail-left-bottom h2, .application-detail-left-bottom h3, .application-detail-left-bottom h4, .application-detail-left-bottom h5, .application-detail-left-bottom h6 {
font-weight: bold;
padding: 1% 0;
}
.application-detail-left-bottom img {
max-width: 100% !important;
height: auto !important;
}
.use-the-product {
padding: 1% 0;
overflow: hidden;
}
.use-the-product-top {
margin-top: 1%;
}
.use-the-product-swiper {
position: relative;
margin-top: 3%;
}
.use-the-product-item {
position: relative;
overflow: hidden;
}
.use-the-product-item a {
display: block;
overflow: hidden;
position: relative;
background: var(--gray1);
}
.use-the-product-item .img {
background: none;
float: right;
width: 50%;
overflow: hidden;
}
.use-the-product-item .img img.img-center {
max-width: 70%;
max-height: 80%;
}
.use-the-product-item .text {
position: absolute;
left: 5%;
top: 50%;
color: var(--black);
transform: translateY(-50%);
}
.use-the-product-item .item-3 {
margin-top: 5%;
}
.use-the-product-item .item-3 li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
padding: 2px 0 2px 20px;
color: var(--gray3);
}
.use-the-product-item .item-3 li:before {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 0;
top: 50%;
background: var(--gray3);
margin-top: -4px;
}
.use-the-product-item a:hover .title-1 strong {
color: var(--red);
}
.use-the-product-item a:hover .img img.img-center {
transform: translateY(-2%);
}
.use-the-product-swiper .swiper-pagination {
bottom: 5%;
width: 100%;
}
.use-the-product-swiper .swiper-pagination span {
border-radius: 0;
margin: 0 5px;
}
.use-the-product-swiper .swiper-pagination .swiper-pagination-bullet-active {
background: var(--red);
}
.application-detail-right {
float: right;
width: 23%;
}
.application-detail-right-top {
margin-top: 5%;
overflow: hidden;
}
.recommended-cases {
padding: 7% 0;
overflow: hidden;
}
.recommended-cases-item {
overflow: hidden;
}
.recommended-cases-item .text {
border-bottom: 1px solid var(--gray);
padding: 4% 0;
overflow: hidden;
}
.recommended-cases-item .title-1 {
color: var(--black);
}
.recommended-cases-item .text-2 {
color: var(--gray3);
}
.recommended-cases-item .img img {
opacity: 0;
}
.recommended-cases-item a:hover .pic {
transform: scale(1.05);
}
.recommended-cases-item a:hover .title-1 h6 {
color: var(--red);
}
.social-share {
position: relative;
display: inline-block;
vertical-align: middle;
}
.social-share a {
position: relative;
width: 47px;
height: 47px;
display: inline-block;
vertical-align: middle;
border: 1px solid var(--gray);
border-radius: 100%;
margin-left: 10px;
}
.social-share a:hover {
background: var(--red);
}
.social-share .icon-wechat .wechat-qrcode {
display: none;
border: 1px solid #eee;
position: absolute;
z-index: 9;
top: -205px;
left: -74px;
width: 200px;
height: 192px;
color: #666;
font-size: 12px;
text-align: center;
background-color: #fff;
box-shadow: 0 2px 10px #aaa;
transition: all 200ms;
-webkit-tansition: all 350ms;
-moz-transition: all 350ms
}
.social-share .icon-wechat .wechat-qrcode.bottom {
top: 40px;
left: -84px
}
.social-share .icon-wechat .wechat-qrcode.bottom:after {
display: none
}
.social-share .icon-wechat .wechat-qrcode h4 {
font-weight: normal;
height: 26px;
line-height: 26px;
font-size: 12px;
background-color: #f3f3f3;
margin: 0;
padding: 0;
color: #777;
}
.social-share .icon-wechat .wechat-qrcode .qrcode {
width: 105px;
margin: 10px auto
}
.social-share .icon-wechat .wechat-qrcode .qrcode table {
margin: 0 !important
}
.social-share .icon-wechat .wechat-qrcode .help p {
font-weight: normal;
line-height: 16px;
padding: 0;
margin: 0
}
.social-share .icon-wechat .wechat-qrcode:after {
content: '';
position: absolute;
left: 50%;
margin-left: -6px;
bottom: -13px;
width: 0;
height: 0;
border-width: 8px 6px 6px 6px;
border-style: solid;
border-color: #fff transparent transparent transparent
}
.social-share .icon-wechat:hover .wechat-qrcode {
display: block
}
.social-share a::before {
content: '';
width: 30px;
height: 30px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: .5;
}
.social-share a:hover::before {
filter: invert(100%);
opacity: 1;
}
.icon-weibo::before {
background: url('../images/wb.png') center no-repeat;
background-size: 65%;
}
.icon-wechat::before {
background: url('../images/wx.png') center no-repeat;
background-size: 65%;
}
.icon-qq::before {
background: url('../images/qq.png') center no-repeat;
background-size: 53%;
}
/* service */
.service-content {
padding: 4% 0 7% 0;
overflow: hidden;
position: relative;
}
.service-content.bg1 {
padding: 4% 0;
background: #f7f7f7;
}
.service-content-top {
text-align: center;
position: relative;
}
.service-content-nav a {
display: inline-block;
width: 240px;
height: 60px;
text-align: center;
border: 1px solid var(--gray2);
border-radius: 4px;
margin: 0 2px;
}
.service-content-nav a span {
line-height: 60px;
color: var(--gray3);
}
.service-content-nav a.cur, .service-content-nav a:hover {
background: var(--red);
}
.service-content-nav a.cur span, .service-content-nav a:hover span {
color: var(--white);
}
.service-content-faq {
overflow: hidden;
}
.service-faq-item {
overflow: hidden;
border-bottom: 1px solid var(--gray2);
padding: 3% 0;
}
.faq-item-title {
position: relative;
padding-left: 4%;
cursor: pointer;
}
.faq-item-title::after {
content: '';
width: 18px;
height: 10px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: url('../images/d2.png') center no-repeat;
filter: grayscale(100%);
}
.faq-item-title i {
display: block;
font-style: normal;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--black);
color: var(--white);
text-align: center;
}
.faq-item-title.cur h4 {
color: var(--red);
}
.faq-item-title.cur::after {
filter: grayscale(0);
transform: translateY(-50%) rotate(180deg);
}
.faq-item-title.cur i {
background: var(--red);
}
.faq-item-content {
display: none;
padding: 1.2% 4%;
overflow: hidden;
}
.service-content-nav {
float: left;
}
.service-content-nav.text-center {
float: none;
}
.service-content-top .search-2 {
position: absolute;
right: 0;
}
.service-content-bottom {
}
.service-download-list {
float: left;
width: 32%;
margin-right: 2%;
margin-bottom: 2%;
overflow: hidden;
transition: all .4s ease;
}
.service-download-list:nth-child(3n) {
margin-right: 0%;
}
.service-download-list.mr0 {
margin-right: 0;
}
.service-download-list a {
display: block;
background: var(--white);
}
.service-download-list .img {
position: relative;
background: #ededed;
}
.service-download-list .text {
padding: 6% 8% 4% 8%;
overflow: hidden;
}
.service-download-list .title-1 {
color: var(--black);
}
.service-download-list .text-1 {
overflow: hidden;
color: var(--gray3);
margin-top: 1%;
}
.service-download-list .download-1 {
margin-top: 5%;
position: relative;
padding: 6% 0 0 0;
overflow: hidden;
}
.service-download-list .download-1::after, .service-download-list .download-1::before {
content: '';
width: 100%;
height: 2px;
background: var(--gray2);
position: absolute;
left: 0;
top: 0;
z-index: 11;
}
.service-download-list .download-1::before {
width: 0;
background: var(--red);
z-index: 13;
transition: all .4s ease;
}
.service-download-list .download-1 strong {
color: var(--gray4);
}
.service-download-list .download-1 i {
width: 20px;
height: 18px;
position: absolute;
right: 0;
top: 50%;
background: url('../images/d1.png') center no-repeat;
filter: grayscale(100%);
opacity: .5;
}
.service-download-list a:hover .download-1::before {
width: 100%;
}
.service-download-list a:hover i {
filter: grayscale(0);
opacity: 1;
}
.service-download-list a:hover .download-1 strong {
color: var(--red);
}
.service-download-list a:hover .img .pic {
transform: scale(1.05);
}
.service-download-list:hover {
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1)
}
.download-top {
position: absolute;
width: 80%;
left: 10%;
top: 60%;
z-index: 11;
transform: translateY(-50%);
}
.download-top-left {
color: var(--white);
float: left;
width: 40%;
}
.download-top-left .title-1 {
position: relative;
}
.download-top-left .text-2 {
margin-top: 1%;
}
.download-top-right {
float: right;
width: 55%;
}
.download-top-right .input-item {
position: relative;
}
.download-top-right .input-item .input-2 {
float: left;
width: 49%;
margin-right: 1%;
margin-bottom: 1%;
}
.download-top-right .input-item .input-2:last-child {
margin-right: 0;
}
.input-3 {
background: var(--white);
border-radius: 2px;
width: 100%;
border: none;
padding: 4% 5%;
box-sizing: border-box;
}
.input-3::-webkit-input-placeholder {
color: var(--black);
}
.input-3:focus {
outline: 1px solid var(--red);
}
.select-1 {
position: relative;
width: 49%;
float: left;
margin-right: 1%;
margin-bottom: 1%;
}
.select-1.cur a.cur {
background: var(--red);
color: var(--white);
}
.select-1:last-child {
margin-right: 0;
}
.select-1 a {
padding: 1% 5%;
overflow: hidden;
color: var(--black);
display: block;
box-sizing: border-box;
width: 100%;
position: relative;
}
.select-1 a::before {
content: '';
width: 4px;
height: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: var(--red);
transition: all .4s ease;
}
.select-1 a.cur {
background: var(--white);
border-radius: 2px;
padding: 4% 5%;
position: relative;
}
.select-1 a.cur::after {
content: '';
width: 14px;
height: 8px;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
background: url('../images/down.png') center no-repeat;
}
.select-1 ul {
background: var(--white);
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
width: 100%;
padding: 2% 0;
overflow: hidden;
z-index: 99;
display: none;
}
.select-1 ul a {
display: block;
}
.select-1 ul a::before {
content: '';
width: 3px;
height: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: var(--red);
transition: all .4s ease;
}
.select-1 ul a:hover {
background: var(--gray1);
}
.select-1 ul a:hover::before {
height: 100%;
}
.donwload-2 {
overflow: hidden;
}
.donwload-2 a {
display: block;
position: relative;
width: 25%;
background: var(--red);
border-radius: 2px;
}
.donwload-2 strong {
color: var(--white);
padding-left: 10%;
line-height: 60px;
}
.donwload-2 i {
width: 20px;
height: 18px;
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
background: url('../images/d3.png') center no-repeat;
}
.donwload-2 a:hover {
background: var(--red2);
}
.donwload-2 a.cur {
background: var(--gray3);
}
.donwload-2 a.cur:hover {
background: var(--gray3);
}
.div-service-download {
padding: 5% 0;
overflow: hidden;
}
.service-download-top {
position: relative;
overflow: hidden;
}
.service-download-top-left {
float: left;
width: 47%;
overflow: hidden;
}
.service-download-top-left .title-1 {
position: relative;
}
.service-download-top-left .title-1::after {
content: '';
width: 100%;
height: 2px;
background: var(--gray2);
position: absolute;
left: 0;
bottom: 0;
}
.service-download-top-left .title-1 h3 {
position: relative;
display: inline-block;
padding-bottom: 4%;
}
.service-download-top-left .title-1 h3::after {
content: '';
width: 100%;
height: 2px;
background: var(--red);
position: absolute;
left: 0;
bottom: 0;
z-index: 11;
}
.service-download-top-left .text-2 {
color: var(--gray3);
margin-top: 3%;
}
.service-download-top-right {
overflow: hidden;
width: 26%;
position: absolute;
right: 0;
bottom: 0;
}
.service-download-top-right .item-1 {
overflow: hidden;
position: relative;
padding: 4% 0;
border-bottom: solid 1px var(--gray2);
}
.service-download-top-right .item-1 li {
margin: 0;
padding: 0;
float: left;
width: 40%;
list-style: none;
color: var(--gray3);
}
.service-download-top-right .item-1 li:last-child {
float: right;
width: 50%;
text-align: right;
color: var(--black);
}
.service-download-center {
padding: 4% 0 0 0;
overflow: hidden;
}
.service-download-swiper {
user-select: none;
position: relative;
background: url('../images/bg1.jpg') center no-repeat;
background-size: cover;
}
.service-download-swiper * {
user-select: none;
}
.service-download-swiper .pic {
position: relative;
overflow: hidden;
user-select: none;
}
.service-download-swiper .pic img.img-center {
max-width: 90%;
max-height: 90%;
}
.service-download-swiper .pic img.img-block {
opacity: 0;
}
.download-prev, .download-next {
bottom: auto;
top: 50%;
margin-top: -32px;
border: 1px solid rgba(0, 0, 0, .1);
width: 66px;
height: 66px;
transition: all .4s ease;
}
.download-prev {
left: 5%;
right: auto;
background: url('../images/l2.png') center no-repeat;
}
.download-prev:hover {
background: var(--red) url('../images/l.png') center no-repeat;
}
.download-next {
left: auto;
right: 5%;
background: url('../images/r2.png') center no-repeat;
}
.download-next:hover {
background: var(--red) url('../images/r.png') center no-repeat;
}
.download-botton {
position: relative;
text-align: center;
margin-top: 2%;
}
.download-botton .donwload-2 {
display: inline-block;
vertical-align: middle;
}
.download-botton .donwload-2 a {
width: 236px;
text-align: left;
}
.download-botton .social-share a {
border: 1px solid var(--gray2);
}
.download-botton .social-share a::before {
opacity: .8;
}
.service-download-other {
padding: 5% 0;
overflow: hidden;
background: var(--gray1);
}
.service-download-other-top {
text-align: center;
}
.service-download-other-bottom {
margin-top: 4%;
}
.related-resources-swiper {
position: relative;
}
.related-resources-swiper .service-download-list {
width: 100%;
margin-right: 0;
margin: 0;
}
.div-pagetop {
padding: 1% 0;
overflow: hidden;
margin-top: 120px;
}
.div-pagetop .path {
color: var(--black);
position: relative;
left: auto;
top: auto;
}
.div-pagetop .path a i {
background: url('../images/home1.png');
}
.div-pagetop .path a span, .div-pagetop .path a em {
color: var(--black);
}
.div-pagetop .title-1 {
padding: 5% 0 2% 0;
overflow: hidden;
}
.div-pagetop .div-content {
clear: both;
width: 94%;
}
.service-contrast {
padding: 5% 0;
overflow: hidden;
background: #f7f7f7;
}
.service-contrast-top {
position: relative;
}
.service-contrast-top .title-1 {
position: relative;
float: left;
}
.service-contrast-top .title-1 strong {
position: absolute;
left: 15%;
top: 50%;
transform: translateY(-50%);
color: var(--gray3);
}
.service-contrast-top .title-1 .img {
background: none;
opacity: 0;
}
.service-contrast-top .add-list {
position: relative;
}
.add-item {
width: 90%;
position: relative;
margin: auto;
}
.add-item .text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 11;
text-align: center;
}
.add-item .text .icon-1 {
width: 40px;
height: 40px;
margin: auto;
position: relative;
}
.add-item .text .icon-1 i {
display: block;
width: 100%;
height: 100%;
opacity: .5;
}
.add-item .text .icon-1 i::before {
content: '';
width: 100%;
height: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--gray3);
}
.add-item .text .icon-1 i::after {
content: '';
width: 4px;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--gray3);
}
.add-item .text .title-1 {
margin-top: 20%;
color: var(--gray3);
}
.add-item .img {
background: none;
padding-bottom: 15%;
overflow: visible;
}
.add-item .pic {
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
}
.add-item .img img {
display: block;
}
.add-item a:hover .icon-1 i {
opacity: 1;
}
.add-item a:hover .title-1 {
color: var(--red);
}
.close-1 {
position: absolute;
right: 14%;
top: 10%;
z-index: 13;
transition: all .4s ease;
}
.close-1 i {
display: block;
width: 20px;
height: 20px;
transform: rotate(45deg);
}
.close-1 i::before {
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--gray3);
}
.close-1 i::after {
content: '';
width: 2px;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--gray3);
}
.close-1 a {
display: block;
overflow: hidden;
}
.close-1 a {
width: 50px;
height: 50px;
position: relative;
}
.close-1 a:hover {
transform: rotate(180deg);
}
.close-1 a i {
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
}
.add-item .close-1 {
right: 5%;
top: 5%;
}
.add-item .title-2 {
position: absolute;
left: 0;
top: 8%;
z-index: 11;
width: 70%;
}
.add-item .title-2 strong {
color: var(--black);
text-align: left;
}
.add-item .product-2 {
position: absolute;
left: 0;
width: 100%;
height: 70%;
bottom: 0;
z-index: 10;
text-align: center;
}
.add-item .product-2 img {
display: inline-block;
width: auto;
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.service-contrast-bottom {
padding-top: 2%;
overflow: hidden;
clear: both;
}
.aftersale-content {
padding: 4% 0 0 0;
overflow: hidden; /* background: url('../images/bg2.jpg') center top no-repeat;background-size: cover;*/
}
.aftersale-content-top {
text-align: center;
}
.aftersale-content-center {
margin-top: 1%;
text-align: center;
position: relative;
}
.aftersale-content-center img {
max-width: 100%;
position: relative;
z-index: 111;
}
.aftersale-content-bottom {
text-align: center;
}
.aftersale-content-list {
font-size: 0;
padding-top: 5%;
padding-bottom: 8%;
}
.aftersale-item {
width: 33.33333%;
display: inline-block;
vertical-align: top;
position: relative;
}
.aftersale-item a {
display: block;
overflow: hidden;
position: relative;
}
.aftersale-item a::after {
content: '';
width: 0;
height: 5px;
background: var(--red);
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
transition: all .4s ease;
}
.aftersale-item .text {
color: var(--white);
position: absolute;
left: 10%;
bottom: 5%;
z-index: 11;
width: 80%;
}
.aftersale-item .title-1 {
overflow: hidden;
}
.aftersale-item .text-1 {
overflow: hidden;
}
.aftersale-item .icon-1 {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 70px;
height: 70px;
}
.aftersale-item .icon-1 img {
max-width: 100%;
}
.aftersale-item a:hover {
box-shadow: 0px 20px 120px 0px rgba(0, 0, 0, 0.3);
transform: scale(1.05);
z-index: 11;
}
.aftersale-item a:hover .pic {
transform: scale(1.05);
}
.aftersale-item a:hover::after {
width: 100%;
}
.aftersale-item:hover {
z-index: 20;
}
.software-products {
padding: 3% 0;
overflow: hidden;
}
.software-products-top {
text-align: center;
}
.software-products-center {
margin-top: 4%;
}
.software-products-left {
float: left;
width: 50%;
}
.software-products-right {
float: right;
width: 46%;
color: var(--gray3);
}
.software-products-right li {
list-style: none;
margin: 0;
padding: 0;
padding-left: 15px;
position: relative;
margin: 2% 0;
text-align: justify;
}
.software-products-right li::before {
content: '';
width: 6px;
height: 6px;
background: var(--red);
position: absolute;
left: 0;
top: 11px;
}
.software-products-bottom {
clear: both;
overflow: hidden;
padding: 3% 3%;
background: #f7f7f7;
margin: 5% auto;
}
.software-products-nav {
position: relative;
}
.software-products-nav::after {
content: '';
width: 100%;
height: 2px;
background: var(--gray2);
position: absolute;
left: 0;
bottom: 0;
transition: all .4s ease;
}
.software-products-nav a {
position: relative;
margin-right: 20px;
display: inline-block;
padding-bottom: 2%;
}
.software-products-nav a::after {
content: '';
width: 0;
height: 2px;
background: var(--red);
position: absolute;
left: 0;
bottom: 0;
z-index: 11;
}
.software-products-nav span {
opacity: .6;
color: var(--black);
}
.software-products-nav a.cur::after {
width: 100%;
}
.software-products-nav a.cur span {
opacity: 1;
}
.software-products-nav a:hover span {
opacity: 1;
}
.software-products-list {
margin-top: 4%;
overflow: hidden;
}
.software-products-swiper {
padding-bottom: 5%;
overflow: hidden;
}
.software-products-item {
text-align: center;
}
.software-products-item .icon-1 {
position: relative;
width: 100%;
}
.software-products-item .icon-1 i {
color: var(--white);
}
.software-products-item .text-2 {
margin-top: 1%;
}
.software-products-swiper .swiper-pagination {
bottom: 0;
width: 100%;
}
.software-products-swiper .swiper-pagination-bullet {
background: var(--gray4);
border-radius: 0;
margin: 0 5px;
}
.software-products-swiper .swiper-pagination-bullet-active {
background: var(--red);
}
.hardware-warranty {
padding: 1% 0 8% 0;
overflow: hidden;
}
.hardware-warranty-top {
text-align: center;
}
.hardware-warranty-bottom {
margin-top: 4%;
}
.hardware-warranty-item {
float: left;
width: 49%;
border: 1px solid var(--gray1);
box-sizing: border-box;
background: #f7f7f7;
padding: 3%;
margin-right: 2%;
position: relative;
}
.hardware-warranty-item::after {
content: '';
width: 100%;
height: 5px;
background: var(--red);
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
transition: all .4s ease;
}
.hardware-warranty-item.mr0 {
margin-right: 0;
}
.hardware-warranty-item .english-1 {
color: var(--white);
}
.hardware-warranty-item .title-1 {
margin-top: 3%;
}
.hardware-warranty-item .text-2 {
color: var(--gray3);
margin-top: 2%;
}
.hardware-warranty-item:hover::after {
width: 0;
right: 0;
}
.div-product-compare-add {
background: rgba(0, 0, 0, .3);
width: 100%;
height: 100%;
z-index: 1111;
position: fixed;
left: 0;
top: 0;
opacity: 1;
transition: all .4s ease;
}
.div-product-compare-add.cur {
opacity: 0;
transform: translateY(-100%);
}
.product-compare-add {
width: 66%;
background: var(--white);
padding: 4% 0;
box-sizing: border-box;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.product-compare-add .close-1 {
right: 5%;
top: 5%;
cursor: pointer;
transition: all .4s ease;
}
.product-compare-add .close-1:hover {
transform: rotate(180deg);
}
.product-compare-list {
position: relative;
padding: 0 10%;
overflow: hidden;
}
.product-compare-list, .product-compare-list * {
user-select: none;
}
.product-compare-swiper {
margin-top: 2%;
}
.product-compare-item {
overflow: hidden;
position: relative;
}
.product-compare-item .img {
background-color: #f7f7f7;
position: relative;
}
.product-compare-item .img::before {
content: '';
width: 0;
height: 3px;
background: var(--red);
position: absolute;
left: 0;
bottom: 0;
z-index: 1111;
transition: all .4s ease;
}
.product-compare-item .img img.img-center {
max-height: 70%;
max-width: 70%;
}
.product-compare-item .text {
text-align: center;
margin-top: 5%;
color: var(--black);
}
.product-compare-item a:hover .img::before {
width: 100%;
}
.product-compare-item a:hover .text strong {
color: var(--red);
}
.product-compare-list .swiper-button-prev, .product-compare-list .swiper-button-next {
border: 1px solid var(--gray3);
bottom: auto;
top: 50%;
margin-top: -20px;
}
.product-compare-list .swiper-button-prev {
background: url('../images/l2.png') center no-repeat;
left: 3%;
}
.product-compare-list .swiper-button-prev:hover {
border: 1px solid var(--red);
background: url('../images/l.png') center no-repeat var(--red);
}
.product-compare-list .swiper-button-next {
background: url('../images/r2.png') center no-repeat;
right: 3%;
}
.product-compare-list .swiper-button-next:hover {
border: 1px solid var(--red);
background: url('../images/r.png') center no-repeat var(--red);
}
/* News */
.news-content {
padding: 4% 0;
overflow: hidden;
}
.news-content-type {
text-align: center;
}
.news-content-list {
padding: 4% 0;
overflow: hidden;
}
.news-content-top {
overflow: hidden;
}
.news-content-item {
float: left;
width: 32%;
margin-right: 1.8%;
margin-bottom: 1.8%;
}
.news-content-item.mr0 {
margin-right: 0;
}
.news-content-item a {
display: block;
position: relative;
}
.news-content-item .img {
position: relative;
background: var(--gray1);
}
.news-content-item .pic {
opacity: 0;
}
.news-content-item .text {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
z-index: 11;
}
.news-content-item .date-1 {
color: var(--gray3);
}
.news-content-item .title-1 {
color: var(--black);
margin-top: 5%;
}
.news-content-item .viewmore-2 {
position: absolute;
left: 0;
bottom: 0;
}
.news-content-item .viewmore-2 strong {
color: var(--black);
}
.news-content-item a:hover .pic {
opacity: 1;
}
.news-content-item a:hover .date-1 {
color: var(--white);
}
.news-content-item a:hover .title-1 h4 {
color: var(--white);
}
.news-content-item a:hover .viewmore-2 {
background: var(--red);
border: 1px solid var(--red);
}
.news-content-item a:hover .viewmore-2 strong {
color: var(--white);
}
.news-content-items {
border-bottom: 1px solid #cfd6db;
float: left;
margin-right: 1.8%;
}
.news-content-items.mr0 {
margin-right: 0;
}
.news-content-items a {
display: block;
position: relative;
}
.news-content-items .img {
position: relative;
background: var(--gray1);
}
.news-content-items .pic {
transform: scale(1);
}
.news-content-items .pic img {
opacity: 0;
}
.news-content-items .text {
position: relative;
width: 100%;
padding: 1% 0;
}
.news-content-items .date-1 {
color: var(--gray3);
}
.news-content-items .title-1 {
color: var(--black);
}
.news-content-items .viewmore-2 {
position: absolute;
left: 0;
bottom: 0;
}
.news-content-items .viewmore-2 strong {
color: var(--black);
}
.news-content-items a:hover .pic {
transform: scale(1.05);
}
.page-nextprev {
margin: 1% auto;
position: relative;
overflow: hidden;
border-top: 1px solid var(--gray2);
}
.page-nextprev a {
display: block;
padding: 3% 0;
overflow: hidden;
position: relative;
border-bottom: 1px solid var(--gray2);
}
.page-nextprev a strong {
color: var(--black);
width: 60%;
overflow: hidden;
display: block;
}
.page-nextprev a span {
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: var(--gray4);
}
.page-nextprev a:hover strong {
color: var(--red);
}
/* about */
.about-content {
padding: 5% 0;
overflow: hidden;
}
.about-content .index-about-top-right .text-2 {
margin-top: 0;
}
.milestone-content {
padding: 3% 0;
overflow: hidden;
}
.milestone-content-top {
width: 80%;
margin: auto;
text-align: center;
}
.milestone-content-center {
position: relative;
margin-top: 4%;
}
.milestone-swiper {
margin-top: 3%;
width: 80%;
margin: auto;
}
.milestone-item {
background: var(--gray1);
overflow: hidden;
}
.milestone-item-left {
float: left;
width: 50%;
}
.milestone-item-left .pic {
position: relative;
}
.milestone-item-right {
float: left;
overflow: hidden;
box-sizing: border-box;
position: absolute;
width: 50%;
height: 100%;
right: 0;
}
.milestone-item-right .item-list {
overflow: hidden;
top: 50%;
transform: translateY(-50%);
padding: 7%;
width: 100%;
box-sizing: border-box;
left: 0;
position: absolute;
}
.milestone-item-right .text {
padding: 5% 0;
border-bottom: 1px solid var(--gray2);
}
.milestone-item-right .title-1 {
margin-bottom: 1%;
}
.milestone-item-right .text-2 {
opacity: .8;
}
.milestone-item-right .text:hover .title-1 {
color: var(--red);
}
.milestone-year-swiper {
position: relative;
width: 90%;
margin: auto;
overflow: hidden;
}
.milestone-year-swiper::after {
content: '';
width: 100%;
height: 1px;
background: var(--gray5);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.milestone-year-swiper .swiper-wrapper {
z-index: 11;
}
.milestone-year {
text-align: center;
overflow: hidden;
cursor: pointer;
padding: 5% 0;
z-index: 11;
position: relative;
}
.milestone-year .point-1 {
position: relative;
z-index: 11;
margin-top: 11%;
}
.milestone-year .point-1 i {
width: 10px;
height: 10px;
border-radius: 100%;
margin: auto;
background: var(--gray5);
display: block;
}
.milestone-year .point-1 i::before {
content: '';
width: 20px;
height: 20px;
border: 1px solid var(--red);
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 11;
}
.milestone-year .point-1 i::after {
content: '';
width: 8px;
height: 8px;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 11;
background: var(--red);
opacity: 0;
}
.milestone-year .title-1 {
margin-top: 5%;
}
.milestone-year .title-1 strong {
color: var(--gray4);
}
.milestone-year-swiper .swiper-slide-active .title-1 strong {
color: var(--red);
font-size: 50px;
}
.milestone-year-swiper .swiper-slide-active .point-1 i {
background: none;
}
.milestone-year-swiper .swiper-slide-active .point-1 i::before, .milestone-year-swiper .swiper-slide-active .point-1 i::after {
opacity: 1;
}
.milestone-prev, .milestone-next {
bottom: auto;
top: 50%;
width: 70px;
height: 70px;
margin-top: -35px;
z-index: 12;
}
.milestone-prev {
left: 0;
right: auto;
background: var(--black) url('../images/l.png') center no-repeat;
}
.milestone-next {
left: auto;
right: 0;
background: var(--red) url('../images/r.png') center no-repeat;
}
.milestone-prev.swiper-button-disabled, .milestone-next.swiper-button-disabled {
opacity: 1;
}
.honor-content {
padding: 5% 0;
overflow: hidden;
background: url('../images/bg1.jpg') center no-repeat;
background-size: cover;
}
.honor-content-top {
text-align: center;
}
.honor-content-top .title-1 {
color: var(--white);
}
.honor-content-top .text-1 {
width: 50%;
margin: auto;
margin-top: 1%;
opacity: .6;
color: var(--white);
}
.honor-content-top .service-content-nav.text-center {
margin-top: 2%;
}
.honor-content-top .service-content-nav a strong {
color: var(--white);
}
.honor-content-top .service-content-nav a.cur {
border: none;
}
.honor-content-top .service-content-nav a {
border: 1px solid rgba(255, 255, 255, .2);
}
.honor-content-center {
margin-top: 5%;
}
.honor-content-swiper {
width: 80%;
margin: auto;
min-height: 500px;
}
.honor-item {
position: relative;
overflow: hidden;
}
.honor-content-swiper .pic {
position: relative;
overflow: hidden;
transition: all .4s ease;
margin-top: 5%;
}
.honor-content-swiper .pic img {
max-width: 88%;
max-height: 88%;
}
.honor-content-swiper .title-1 {
margin-top: 5%;
text-align: center;
opacity: 0;
}
.honor-content-swiper .title-1 h5 {
color: var(--white);
}
.honor-content-swiper .swiper-slide-active .title-1 {
opacity: 1;
}
.honor-content-swiper .swiper-slide-active .pic {
margin-top: 0;
}
.honor-content-swiper .swiper-slide-active .pic img {
max-width: 100%;
max-height: 100%;
}
.honor-content-swiper .swiper-slide-prev {
text-align: left;
}
.honor-content-swiper .swiper-slide-prev img.img-center {
right: auto;
}
.honor-content-swiper .swiper-slide-next {
text-align: left;
}
.honor-content-swiper .swiper-slide-next img.img-center {
left: auto;
}
.honor-prev, .honor-next {
border: none;
background: none;
bottom: auto;
top: 50%;
transform: translateY(-50%);
}
.honor-prev::after, .honor-next::after {
display: block;
color: var(--white);
font-size: 34px;
font-weight: normal;
}
.honor-prev {
left: 36%;
}
.honor-next {
right: 36%;
}
.corporate-culture {
padding: 7% 0;
overflow: hidden;
}
.corporate-culture-top {
text-align: center;
}
.corporate-culture-bottom {
margin-top: 5%;
position: relative;
overflow: hidden;
}
.corporate-culture-item {
transition: all .4s ease;
width: 16.66%;
height: 100%;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
z-index: 1;
cursor: pointer;
}
.corporate-culture-item * {
transition: all .4s ease;
}
.corporate-culture-item.cur {
width: 50%;
z-index: 11;
}
.corporate-culture-item .img {
overflow: hidden;
width: 100%;
height: 100%;
filter: grayscale(100%);
position: relative;
}
.corporate-culture-item .img::after {
content: '';
width: 100%;
height: 50%;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.corporate-culture-item .text {
position: absolute;
left: 10%;
bottom: -110px;
width: 80%;
z-index: 11;
color: var(--white);
}
.corporate-culture-item .title-1 {
overflow: hidden;
}
.corporate-culture-item .text-2 {
margin-top: 2%;
opacity: 0;
}
.corporate-culture-item.ccb2 {
left: auto;
right: 33.3333%;
}
.corporate-culture-item.ccb2.two {
left: auto;
right: 66.6666%;
}
.corporate-culture-item.ccb3 {
left: auto;
right: 16.666%;
}
.corporate-culture-item.ccb3.free {
left: auto;
right: 49.666%;
}
.corporate-culture-item.ccb4 {
left: auto;
right: 0;
}
.corporate-culture-item.cur .text {
left: 5%;
bottom: 5%;
width: 90%;
}
.corporate-culture-item.cur .text-2 {
opacity: 1;
}
.corporate-culture-item.cur .img {
filter: grayscale(0);
}
.partner-content {
padding: 5% 0;
overflow: hidden;
}
.partner-content-top {
position: relative;
}
.partner-prev, .partner-next {
position: absolute;
border: none;
width: 60px;
height: 60px;
}
.partner-prev {
background: var(--black) url('../images/l.png') center no-repeat;
right: 70px;
}
.partner-next {
background: var(--red) url('../images/r.png') center no-repeat;
right: 0;
}
.partner-content-bottom {
margin-top: 3%;
}
.partner-item {
text-align: center;
position: relative;
overflow: hidden;
background: var(--gray1);
padding: 5% 0;
}
.partner-item .pic {
position: relative;
margin: 5% 0;
}
.partner-item .title-1 {
padding: 0;
overflow: hidden;
border-top: 1px solid var(--gray2);
width: 85%;
margin: auto;
padding-top: 5%;
}
.contact-content {
padding: 6% 0 8% 0;
overflow: hidden;
background: #f7f7f7;
}
.contact-content-top {
overflow: hidden;
padding-bottom: 3%;
}
.contact-content-bottom {
overflow: hidden;
padding-top: 4%;
}
.contact-content-bottom .contact-item {
float: left;
width: 30%;
margin-right: 3%;
position: relative;
}
.contact-content-bottom .contact-item .icon-1 {
position: relative;
overflow: hidden;
}
.contact-content-bottom .contact-item .title-1 {
position: relative;
margin-top: 5%;
}
.contact-content-bottom .contact-item .title-1::before {
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 0px;
background: var(--gray2);
}
.contact-content-bottom .contact-item .title-1 h4 {
position: relative;
padding-top: 5%;
display: inline-block;
}
.contact-content-bottom .contact-item .title-1 h4::before {
background: var(--red);
z-index: 11;
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 0;
}
.contact-content-bottom .contact-item .text-1 {
margin-top: 1%;
color: var(--gray3);
position: relative;
}
.contact-map {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.contact-map-addlist {
position: absolute;
width: 28%;
right: 5%;
top: 50%;
transform: translateY(-50%);
z-index: 11;
background: var(--white);
color: var(--black);
box-sizing: border-box;
padding: 2% 3% 3% 3%;
overflow: hidden;
}
.contact-map-addlist a {
border-bottom: 2px solid var(--gray2);
padding: 5% 0;
overflow: hidden;
color: var(--gray4);
display: block;
}
.contact-map-addlist a.cur, .contact-map-addlist a:hover {
color: var(--red);
border-bottom: 2px solid var(--red);
}
.contact-map-content {
overflow: hidden;
position: relative;
}
.contact-map-add {
position: absolute;
width: 25%;
z-index: 11;
padding: 1.5% 2%;
overflow: hidden;
background: var(--white);
top: 50%;
left: 20%;
}
.contact-map-add .addname-1 {
color: var(--black);
}
.contact-map-add .addtel-1 {
color: var(--black);
}
.contact-map-add .adds-1 {
margin-top: 6%;
color: var(--gray3);
}
.contact-map-swiper {
position: relative;
background: var(--gray2);
}
.contact-map-swiper iframe {
border: none;
border: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
filter: grayscale(1);
}
.contact-map-swiper .swiper-slide {
background: var(--gray2);
}
.contact-map-swiper .swiper-slide-active {
z-index: 10;
}
.suggestions-content {
padding: 5% 0;
overflow: hidden;
}
.suggestions-content-left {
float: left;
width: 40%;
}
.recruiting-content {
padding: 5% 0;
overflow: hidden;
background: #f7f7f7;
}
.recruiting-content-left {
float: left;
width: 20%;
overflow: hidden;
}
.recruiting-content-left .filter {
overflow: hidden;
margin-bottom: 5%;
}
.recruiting-content-left .filter .title-1 {
border-bottom: 2px solid var(--black);
padding-bottom: 5%;
}
.filter-type {
padding: 6% 0;
overflow: hidden;
border-bottom: 1px solid var(--gray2);
margin-bottom: 4%;
}
.filter-type a.type-1 {
color: var(--black);
position: relative;
display: block;
}
.filter-type a.type-1::after {
content: '';
width: 13px;
height: 8px;
position: absolute;
right: 0;
top: 50%;
background: url('../images/d.png') center no-repeat;
filter: grayscale(100%);
transform: translateY(-50%);
}
.filter-type ul {
list-style: none;
margin: 0;
padding: 0;
padding: 4% 0;
overflow: hidden;
}
.filter-type ul li {
list-style: none;
margin: 0;
padding: 0;
padding: 2% 0;
overflow: hidden;
}
.filter-type ul li a {
display: block;
position: relative;
}
.filter-type ul li i {
display: inline-block;
vertical-align: middle;
position: relative;
width: 14px;
height: 14px;
border-radius: 2px;
border: 1px solid var(--gray2);
}
.filter-type ul li i::before {
content: '';
width: 12px;
height: 12px;
position: absolute;
left: 50%;
top: 50%;
margin: -6px 0 0 -6px;
border-radius: 100%;
background: url('../images/gou.svg') center no-repeat;
background-size: 100%;
display: none;
}
.filter-type ul li span {
color: var(--gray3);
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.filter-type ul li.cur i {
background: var(--red);
border: 1px solid var(--red);
}
.filter-type ul li.cur i::before {
display: block;
}
.filter-type ul li.cur span {
color: var(--black);
}
.filter-type.cur a.type-1::after {
transform: translateY(-50%) rotate(-180deg);
}
.filter-type ul li a:hover span {
color: var(--black);
}
.filter-type ul li a:hover i {
border: 1px solid var(--black);
}
.filter-type.single i {
border-radius: 100%;
}
.jobtel {
position: relative;
margin-top: 5%;
clear: both;
overflow: hidden;
}
.jobtel .icon-1 {
overflow: hidden;
margin-top: 3%;
}
.jobtel .icon-1 img {
max-width: 40px;
}
.jobtel .tel-1 {
overflow: hidden;
position: relative;
padding-top: 5%;
margin-top: 5%;
}
.jobtel .tel-1::after, .jobtel .tel-1::before {
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 0;
background: var(--gray2);
}
.jobtel .tel-1::before {
background: var(--red);
z-index: 11;
width: 60%;
}
.jobtel .text-1 {
color: var(--gray3);
}
.recruiting-content-right {
float: right;
width: 73%;
position: relative;
padding: 0 3%;
margin-right: -2%;
}
.recruiting-content-right-top {
position: relative;
padding: 1% 0;
margin-top: -.8%;
}
.positions-found {
overflow: hidden;
border-bottom: 2px solid var(--gray2);
padding-bottom: 1.5%;
overflow: hidden;
float: left;
width: 67%;
}
.positions-found span {
display: inline-block;
vertical-align: middle;
color: var(--gray4);
}
.positions-found span.red {
color: var(--red);
}
.recruiting-content-right-top .search-2 {
position: absolute;
right: 0;
top: 0;
width: 30%;
}
.recruiting-content-right-center {
clear: both;
}
.recruiting-list {
position: relative;
padding: 2% 0;
}
.recruiting-item {
margin: 2% auto;
width: 100%;
}
.recruiting-item a {
display: block;
position: relative;
background: var(--white);
}
.recruiting-item a::before {
content: '';
width: 4px;
height: 0;
position: absolute;
left: 0;
top: 0;
z-index: 5;
background: var(--red);
transition: all .4s ease;
}
.recruiting-item .text {
position: absolute;
left: 5%;
top: 50%;
z-index: 11;
width: 77%;
color: var(--black);
transform: translateY(-50%);
}
.recruiting-item .text .title-1 {
overflow: hidden;
}
.recruiting-item .text-2 {
color: var(--black);
margin-top: .5%;
}
.recruiting-item .text-3 {
margin-top: 1%;
overflow: hidden;
}
.recruiting-item .text-3 li {
list-style: none;
margin: 0;
padding: 1px 0 1px 15px;
position: relative;
color: var(--gray3);
}
.recruiting-item .text-3 li::before {
content: '';
width: 6px;
height: 6px;
position: absolute;
left: 0;
top: 12px;
background: var(--gray4);
}
.viewdetails-1 {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.viewdetails-1 .icon-1 img {
filter: grayscale(100%);
opacity: .6;
}
.viewdetails-1 .title-1 {
margin-top: 1%;
}
.viewdetails-1 .title-1 strong {
color: var(--gray4);
}
.recruiting-item .img {
background: none;
}
.recruiting-item a:hover {
box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 0.1);
}
.recruiting-item a:hover::before {
height: 100%;
}
.recruiting-item a:hover .text .title-1 strong, .recruiting-item a:hover .viewdetails-1 .title-1 strong {
color: var(--red);
}
.recruiting-item a:hover .viewdetails-1 .icon-1 img {
filter: grayscale(0);
opacity: 1;
}
.recruiting-item a:hover {
transform: scale(1.05);
}
.recruiting-detail {
padding: 5% 0;
overflow: hidden;
position: relative;
}
.recruiting-detail .return-1 {
position: absolute;
left: 1%;
top: 1%;
z-index: 1;
}
.recruiting-detail .return-1 a {
display: block;
width: 80px;
height: 80px;
background: var(--white);
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.08);
border-radius: 100%;
}
.recruiting-detail .return-1 i {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url('../images/l2.png') center no-repeat;
}
.recruiting-detail .return-1 a:hover {
background: var(--red);
}
.recruiting-detail .return-1 a:hover i {
background: url('../images/l3.png') center no-repeat;
}
.recruiting-detail-top {
width: 74%;
margin: auto;
}
.recruiting-detail-top .title-1 {
color: var(--black);
}
.recruiting-detail-top .text-2 {
color: var(--gray3);
margin-top: 1%;
}
.recruiting-detail-top .line-3 {
width: 100%;
height: 2px;
background: var(--gray2);
position: relative;
margin: 4% 0;
}
.recruiting-detail-top .line-3 i {
position: absolute;
left: 0;
top: 0;
width: 50%;
background: var(--red);
height: 100%;
}
.recruiting-detail-center {
width: 74%;
margin: auto
}
.recruiting-detail-item {
overflow: hidden;
margin-top: 3%;
}
.recruiting-detail-item .title-1 {
overflow: hidden;
}
.recruiting-detail-item .item-2 {
margin-top: 2%;
}
.recruiting-detail-item .item-2 li {
list-style: none;
margin: 0;
padding: 1px 0 1px 15px;
position: relative;
color: var(--gray3);
}
.recruiting-detail-item .item-2 li::before {
content: '';
width: 6px;
height: 6px;
position: absolute;
left: 0;
top: 12px;
background: var(--gray4);
}
.recruiting-detail-botton {
margin-top: 4%;
}
.recruiting-detail-botton a.resume-1 {
width: 20%;
background: var(--red);
padding: 1% 0;
text-align: center;
display: block;
}
.recruiting-detail-botton a.resume-1 strong {
color: var(--white);
}
.recruiting-detail-botton a.resume-1:hover {
background: var(--red2);
}
.relevant-positions-detail-other {
padding: 6% 0;
overflow: hidden;
background: var(--gray1);
}
.relevant-positions-detail-other .div-content {
width: 60%;
margin: auto;
}
.relevant-positions-other {
margin-top: 1%;
}
.recruiting-windows {
background: rgba(0, 0, 0, .3);
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 999;
transition: all .4s ease;
transform: translateY(-100%);
}
.recruiting-windows.cur {
transform: translateY(0);
}
.recruiting-windows-content {
background: var(--white);
width: 40%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 11;
box-sizing: border-box;
padding: 3%;
overflow: hidden;
}
.recruiting-windows-content .close-1 {
right: 3%;
top: 3%;
}
.recruiting-windows-content .close-1 a i {
margin: -15px 0 0 -15px;
}
.recruiting-windows-content .close-1 i {
width: 30px;
height: 30px;
transition: all .4s ease;
}
.recruiting-windows-content .close-1 i:hover {
transform: rotate(225deg);
}
.recruiting-windows-top {
text-align: center;
}
.recruiting-windows-top .title-1 {
color: var(--black);
}
.recruiting-windows-top .text-2 {
color: var(--gray3);
margin-top: 2%;
}
.recruiting-windows-center {
overflow: hidden;
width: 90%;
margin: auto;
margin-top: 4%;
}
.recruiting-windows-center .input-item {
padding: 2px 0;
overflow: hidden;
position: relative;
}
.recruiting-windows-center .title-1 {
color: var(--black);
}
.recruiting-windows-center .item-3 {
padding: 1% 0;
overflow: hidden;
position: relative;
}
.recruiting-windows-center .input-4 {
width: 100%;
background: var(--white);
border: 1px solid var(--gray2);
padding: 2.5%;
box-sizing: border-box;
}
.recruiting-windows-center .title-1 span {
color: var(--gray3);
}
.recruiting-windows-center .upload-4 {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border: none;
background: var(--black);
color: var(--white);
text-align: center;
height: 60%;
width: 15%;
cursor: pointer;
}
.recruiting-windows-center .upload-4:hover {
background: var(--red);
}
.recruiting-windows-center .submit-1 {
width: 100%;
background: var(--red);
border: none;
line-height: 60px;
padding: 0;
margin-top: 1%;
}
.recruiting-windows-center .submit-1 span {
line-height: normal;
}
.recruiting-windows-center .submit-1:hover {
background: var(--red2);
}
.responsibility-content {
padding: 5% 0;
overflow: hidden;
}
.responsibility-content-top {
text-align: center;
position: relative;
}
.responsibility-content-top .title-1 {
width: 100%;
text-align: center;
z-index: 11;
}
.responsibility-content-center {
margin-top: 5%;
position: relative;
overflow: hidden;
}
.responsibility-content-bottom {
margin-top: 8%;
text-align: center;
}
.responsibility-content-list {
overflow: hidden;
margin-top: 4%;
}
.responsibility-item {
float: left;
width: 49%;
margin-right: 1%;
overflow: hidden;
margin-bottom: 1%;
}
.responsibility-item.mr0 {
margin-right: 0;
}
.responsibility-item .title-1 {
text-align: center;
margin-top: 2%;
color: var(--black);
}
.capability-content-bottom-swiper {
width: 50%;
margin: auto;
}
.capability-item {
position: relative;
border: 1px dashed #ccc;
border-radius: 100%;
opacity: 0;
background-position: center;
background-repeat: no-repeat;
}
.capability-item::before {
content: '';
width: 70%;
height: 70%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #f0f1f2;
border-radius: 100%;
}
.capability-item .text {
width: 50%;
position: absolute;
left: 25%;
top: 50%;
z-index: 11;
color: #fff;
text-align: center;
transform: translateY(-50%);
}
.capability-item .text .icon-1 {
width: 50px;
height: 50px;
margin: auto;
position: relative;
}
.capability-item .text .icon-1 img {
filter: invert(100%);
}
.capability-item .text .title-1 {
font-weight: bold;
padding-top: 20px;
}
.capability-item .text .text-2 {
padding-top: 20px;
min-height: 150px;
}
.capability-item .text .num-3 {
opacity: .4;
font-family: 'Montserrat-Bold';
}
.capability-item .img {
border-radius: 100%;
background-color: #f0f1f2;
width: 60%;
margin: 20%;
z-index: 1;
}
.capability-item .img img {
opacity: .9;
}
.capability-content-bottom-swiper .swiper-slide-active .capability-item {
background-size: 85%;
opacity: 1;
z-index: 11;
}
.capability-content-bottom-swiper .swiper-slide:nth-child(1).swiper-slide-active .capability-item {
background-image: url('../images/capability1.png');
}
.capability-content-bottom-swiper .swiper-slide:nth-child(2).swiper-slide-active .capability-item {
background-image: url('../images/capability2.png');
}
.capability-content-bottom-swiper .swiper-slide:nth-child(3).swiper-slide-active .capability-item {
background-image: url('../images/capability3.png');
}
.capability-content-bottom-swiper .swiper-slide:nth-child(4).swiper-slide-active .capability-item {
background-image: url('../images/capability4.png');
}
.capability-nav {
position: absolute;
left: 25%;
top: 0;
width: 50%;
height: 100%;
z-index: 11;
}
.capability-nav li {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
width: 60%;
}
.capability-nav li a {
display: block;
overflow: hidden;
}
.capability-nav li i {
width: 60px;
height: 60px;
background: #e6e6e6;
border-radius: 100%;
margin: 0 10px;
float: left;
position: relative;
}
.capability-nav li i img {
max-width: 50%;
max-height: 50%;
opacity: .5;
}
.capability-nav li span {
float: left;
font-weight: bold;
margin: 5px;
color: var(--gray3);
}
.capability-nav li:nth-child(1) {
left: 74%;
top: 15%;
text-align: left;
}
.capability-nav li:nth-child(2) {
left: 74%;
bottom: 15%;
text-align: left;
}
.capability-nav li:nth-child(3) {
right: 74%;
bottom: 15%;
text-align: right;
}
.capability-nav li:nth-child(4) {
right: 74%;
top: 15%;
text-align: right;
}
.capability-nav li:nth-child(3) span, .capability-nav li:nth-child(3) i {
float: right;
}
.capability-nav li:nth-child(4) span, .capability-nav li:nth-child(4) i {
float: right;
}
.capability-nav li.cur span {
opacity: 1;
}
.capability-nav li.cur i {
background: #e60012;
}
.capability-nav li.cur i img {
opacity: 1;
filter: invert(100%);
}
.demand-feedback {
overflow: hidden;
}
.demand-feedback .div-content {
width: 70%;
}
.demand-feedback-top {
text-align: center;
margin-top: 4%;
margin-bottom: 4%;
}
.demand-feedback-center {
margin-top: 4%;
}
.demand-feedback-nav {
text-align: center;
}
.demand-feedback-nav a {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
border: 1px solid var(--gray2);
border-radius: 4px;
width: 24%;
margin: .3%;
padding: 1.5% 0 1% 0;
}
.demand-feedback-nav a.cur {
border: 1px solid var(--red);
}
.demand-feedback-nav a.cur .title-1 {
color: var(--red);
}
.demand-feedback-nav a.cur .icon-1 img {
filter: grayscale(0);
}
.demand-feedback-nav .icon-1 {
margin: auto;
width: 55px;
height: 50px;
position: relative;
}
.demand-feedback-nav .icon-1 img {
filter: grayscale(100%);
}
.demand-feedback-nav .title-1 {
color: var(--gray3);
}
.demand-feedback-bottom {
margin-top: 2%;
}
.demand-feedback-swiper {
position: relative;
}
.demand-feedback-from {
position: relative;
width: 99%;
margin: auto;
}
.from-item3 {
position: relative;
padding-bottom: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.from-item3 .fromili {
width: 32.5%;
float: left;
margin-right: 1%;
position: relative;
}
.from-item3 .fromili.mr0 {
margin-right: 0;
}
.from-item3 .fromili span {
display: block;
padding-bottom: 10px;
}
.from-item3 .fromili .choice-2 {
border: 1px solid var(--gray2);
width: 100%;
height: 60px;
box-sizing: border-box;
padding: 5%;
background: #f7f7f7;
}
.from-item3 .fromili .choice-2.cur {
border: 1px solid var(--red);
}
.from-item3 .fromili .choice-2 ul {
height: 300px;
overflow: auto;
top: 60px;
}
.from-item3 .fromili .choice-2 a.cur {
padding: 0;
margin-top: -1%;
}
.from-item3 .fromili .choice-2 a.cur strong {
font-weight: normal;
font-family: 'Roboto-R', 'Roboto', PingFang SC, 'Microsoft YaHei', Arial;
}
.from-item3 .fromili .choice-2 a::after {
display: none;
}
.from-item3 .fromili li.itemli {
float: left;
width: 48%;
position: relative;
}
.from-item3 .fromili li.itemli:last-child, .from-item3 .fromili li.itemli.mr0 {
float: right;
}
.from-item3 .fromili li.itemli:first-child::after {
content: '';
width: 10px;
height: 1px;
background: var(--black);
position: absolute;
right: -13px;
top: 70%;
}
.from-item1 {
position: relative;
margin-bottom: 2%;
margin-top: 2%;
}
.from-item1 span {
display: block;
padding-bottom: 10px;
}
.input-4, .textarea-4 {
border: 1px solid var(--gray2);
width: 100%;
height: 60px;
box-sizing: border-box;
padding: 0 5%;
background: #f7f7f7;
color: var(--black);
border-radius: 2px;
transition: all .4s ease;
font-size: 18px;
}
.input-4:focus {
border: 1px solid var(--black);
}
.input-4.cur {
border: 1px solid var(--red);
}
.textarea-4 {
height: 200px;
padding: 20px;
}
.textarea-4:focus {
border: 1px solid var(--black);
}
.from-submit .submit-1 {
height: auto;
padding: 1.3%;
}
.from-item2 {
position: relative;
padding-bottom: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.from-item2 .fromili {
width: 49.5%;
float: left;
position: relative;
}
.from-item2 .fromili span {
display: block;
padding-bottom: 10px;
}
.from-item2 .fromili:last-child {
float: right;
}
.choice-select-2 {
position: absolute;
width: 100%;
left: 0;
top: 100px;
z-index: 111;
box-sizing: border-box;
padding: 3% 0;
overflow: hidden;
background: #fff;
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.08);
display: none;
}
.choice-one-1 {
height: 200px;
overflow: auto;
position: relative;
width: 50%;
float: left;
}
.choice-one-1 li a {
display: block;
color: var(--black);
padding: 10px 5%;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.choice-one-1 li a:hover {
background: var(--gray1);
}
.choice-one-1 li a.select1 {
width: 100%;
padding-right: 10%;
}
.choice-one-1 li a.select1::after {
content: '';
width: 7px;
height: 11px;
position: absolute;
right: 10%;
top: 50%;
margin-top: -5px;
background: url('../images/r2.png') center no-repeat;
opacity: .5;
}
.choice-one-1 li.cur a.select1 {
color: var(--red);
}
.choice-one-1 li.cur a.select1::after {
background: url('../images/r4.png') center no-repeat;
opacity: 1;
}
.from-choice-select {
float: right;
width: 50%;
height: 200px;
overflow: auto;
position: relative;
}
.choice-two-2 {
height: 100%;
overflow: auto;
position: absolute;
width: 90%;
left: 5%;
top: 0;
display: none;
}
.choice-two-2.cur {
display: block;
z-index: 111;
}
.choice-two-2 li a {
display: block;
color: var(--black);
padding: 10px 5%;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.choice-two-2 li a:hover {
background: var(--gray1);
}
.choice-two-2 li a.select2 {
width: 100%;
}
.demand-feedback-swiper .swiper-slide {
opacity: 0;
}
.demand-feedback-swiper .swiper-slide-active {
opacity: 1;
z-index: 11;
background: var(--white);
}
/* menu */
.menu-toggle {
display: none;
width: 40px;
height: 40px;
position: absolute;
overflow: hidden;
right: 1%;
top: 20px;
display: none;
}
.cd-nav-trigger {
display: block;
width: 40px;
height: 40px;
}
.menu-toggle span.hamburger, .menu-toggle span.hamburger:after, .menu-toggle span.hamburger:before {
content: "";
display: block;
width: 24px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
margin-top: -1px;
left: 50%;
margin-left: -12px;
-webkit-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
-webkit-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
transition-delay: 0.15s;
}
.menu-toggle span.hamburger:after {
margin-top: -7px;
top: 0;
transition-delay: 0.27s;
}
.menu-toggle span.hamburger:before {
margin-top: 7px;
top: 0;
transition-delay: 0.2s;
}
.menu-toggle span.cross:before, .menu-toggle span.cross:after {
content: "";
display: block;
width: 24px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
margin-top: -1.5px;
left: 50%;
margin-left: -12px;
-webkit-transform: translateY(-70px) translateX(-70px) rotate(45deg);
transform: translateY(-70px) translateX(-70px) rotate(45deg);
transition-delay: 0.12s;
}
.menu-toggle span.cross:after {
transition-delay: 0s;
-webkit-transform: translateY(70px) translateX(-70px) rotate(-45deg);
transform: translateY(70px) translateX(-70px) rotate(-45deg);
}
.menu-toggle span.cross:after {
-webkit-transform: translateY(-70px) translateX(70px) rotate(-45deg);
transform: translateY(-70px) translateX(70px) rotate(-45deg);
}
.no-touch .menu-toggle span.hamburger, .no-touch .menu-toggle span.hamburger:after, .no-touch .menu-toggle span.hamburger:before {
-webkit-transform: translateX(70px);
transform: translateX(70px);
transition-delay: 0.12s;
}
.no-touch .menu-toggle span.hamburger:after {
transition-delay: 0s;
}
.no-touch .menu-toggle span.hamburger:before {
transition-delay: 0.07s;
}
.no-touch .menu-toggle span.cross:before {
transition-delay: 0.12s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.no-touch .menu-toggle span.cross:after {
transition-delay: 0.24s;
-webkit-transform: rotate(-45deg) !important;
transform: rotate(-45deg) !important;
background: #fff;
}
@keyframes jinduain100 {
0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes jinduain80 {
0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
width: 0;
}
100% {
width: 80%;
}
}
@keyframes jinduain70 {
0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
width: 0;
}
100% {
width: 70%;
}
}
@keyframes jinduain40 {
0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
width: 0;
}
100% {
width: 40%;
}
}
.jindu100 {
-webkit-animation-name: jinduain100;
animation-name: jinduain100;
-webkit-animation-duration: .9s;
animation-duration: .9s
}
.jindu80 {
-webkit-animation-name: jinduain80;
animation-name: jinduain80;
-webkit-animation-duration: .9s;
animation-duration: .9s
}
.jindu70 {
-webkit-animation-name: jinduain70;
animation-name: jinduain70;
-webkit-animation-duration: .9s;
animation-duration: .9s
}
.jindu40 {
-webkit-animation-name: jinduain40;
animation-name: jinduain40;
-webkit-animation-duration: .9s;
animation-duration: .9s
}
/* other */
.div-videoshow {
display: block;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9999;
transform: translateY(-200%);
transition: all .4s ease;
background: rgba(0, 0, 0, .8);
}
.div-videoshow.cur {
transform: translateY(0);
}
.div-videoshow-content {
width: 60%;
height: 50%;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.div-videoshow video {
display: block;
width: 100%;
height: auto;
}
.div-close {
width: 50px;
height: 50px;
position: fixed;
right: 2%;
top: 2%;
border-radius: 100%;
background-color: #fff;
z-index: 999;
transform: rotate(45deg);
cursor: pointer;
}
.div-close::before, .div-close::after {
content: '';
background: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.div-close::before {
width: 20px;
height: 2px;
}
.div-close::after {
width: 2px;
height: 20px;
}
.video-js {
width: 100%;
height: 100%;
}
.div-search-page {
padding-top: 130px;
overflow: hidden;
background: url('../images/searchbg.png') right top no-repeat;
}
.div-search-page .path {
position: relative;
}
.div-search-page .path {
position: relative;
color: var(--black);
top: auto;
left: auto;
width: 94%;
margin: auto;
padding-bottom: 1%;
}
.div-search-page .path a {
color: var(--black);
}
.div-search-page .path a i {
background: url('../images/home1.png') center no-repeat;
}
.div-search-content {
min-height: 300px;
overflow: hidden;
width: 80%;
margin: auto;
}
.div-search-top {
margin-top: 5%;
width: 40%;
}
.div-search-top .title-1 {
margin-bottom: 3%;
}
.search-content {
position: relative;
overflow: hidden;
}
.div-search-page .input-2 {
width: 100%;
height: 80px;
padding: 0 5%;
background: #f7f7f7;
border: none;
}
.searchsend {
position: absolute;
right: 0;
top: 0;
width: 80px;
height: 80px;
z-index: 11;
background: url('../images/s1.png') center no-repeat;
border: none;
display: block;
cursor: pointer;
}
.searchsend:hover {
background: url('../images/ss.png') center no-repeat;
}
.div-search-nav {
margin-top: 10%;
overflow: hidden;
}
.div-search-nav a {
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 60px;
}
.div-search-nav span {
display: inline-block;
color: var(--gray4);
position: relative;
padding-bottom: 20px;
}
.div-search-nav span::after {
content: '';
width: 100%;
height: 2px;
background: var(--red);
position: absolute;
left: 0;
bottom: 0;
display: none;
}
.div-search-nav a.cur span {
color: var(--black);
}
.div-search-nav a.cur span::after {
display: block;
}
.div-search-nav a:hover span {
color: var(--black);
}
.div-search-list {
padding: 2% 0;
overflow: hidden;
background: #f7f7f7;
}
.div-search-list-content {
width: 80%;
margin: auto;
}
.div-search-list-top {
overflow: hidden;
}
.div-search-list-top .text-1 {
color: var(--gray4);
}
.div-search-list-top .text-1 span {
color: var(--red);
}
.div-search-list-bottom {
position: relative;
padding: 2% 0;
}
.div-search-list-bottom .application-content-item a {
background: var(--white);
}
.div-search-list-bottom .news-content-item .img {
background: var(--white);
}
.index-scene-center {
position: relative;
overflow: hidden;
}
.index-scene-center img {
max-width: 100%;
height: auto;
display: inline-block;
}
.index-scene-center .slayer-list {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
.index-scene-center .slayer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
transition: all .4s ease;
}
.index-scene-center .slayer.cur {
opacity: .4;
}
.index-scene-center .slayer .text {
position: absolute;
left: 5%;
top: 10%;
width: 40%;
text-align: center;
z-index: 11;
color: var(--white);
opacity: 0;
transition: all .4s ease;
}
.index-scene-center .slayer .text .title-2 {
overflow: hidden;
font-weight: bold;
}
.index-scene-center .slayer .text .text-2 {
margin-top: 2%;
}
.index-scene-center .slayer .text .text-2 span {
opacity: .5;
display: inline-block;
vertical-align: middle;
}
.index-scene-center .slayer .text .text-2 i {
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: url('../images/r3.png') center no-repeat var(--red);
background-size: 20%;
border-radius: 100%;
}
.index-scene-center .slayer.show .text {
opacity: 1;
}
.slayer-a {
position: absolute;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
.index-scene-center.cur .slayer-list {
animation: xiaodaoda 4000ms 1 ease forwards;
}
@keyframes xiaodaoda {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.1);
}
}
.index-scene-center .slayer.layer-1 .text {
left: 1%;
top: 50%;
}
.index-scene-center .slayer.layer-2 .text {
left: 10%;
top: 35%;
}
.index-scene-center .slayer.layer-3 .text {
left: 33%;
top: 40%;
}
.index-scene-center .slayer.layer-4 .text {
left: 53%;
top: 55%;
}
.index-scene-center .slayer.layer-5 .text {
left: 53%;
top: 15%;
}
.index-scene-windows {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: all .8s ease;
}
.scene-content-main {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 100;
transition: all .8s ease;
transition-delay: 1s;
opacity: 0;
}
.scene-content-pic {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 60;
}
.scene-content-video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 60;
}
.scene-content-video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.scene-content-text {
color: var(--white);
position: absolute;
text-align: center;
bottom: 0;
left: 5%;
width: 90%;
z-index: 170;
overflow: hidden;
opacity: 0;
transition: all .8s ease;
transition-delay: 1s;
}
.scene-content-text .title-1 {
overflow: hidden;
}
.scene-content-text .text-1 {
opacity: .6;
width: 50%;
margin: auto;
margin-top: 1%;
}
.scene-content-bg {
background: #1e1e1e;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.index-scene-windows .return-1 {
position: absolute;
left: 3%;
top: 5%;
z-index: 201;
}
.index-scene-windows .return-1 a {
display: block;
}
.index-scene-windows .return-1 i {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px solid var(--white);
background: url('../images/l.png') center no-repeat;
}
.index-scene-windows .return-1 span {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
color: var(--white);
}
.index-scene-windows .return-1 a:hover i {
background: url('../images/l.png') center no-repeat var(--red);
border: 1px solid var(--red);
}
.index-scene-windows.cur {
opacity: 1;
z-index: 9991;
}
.index-scene-windows.cur .scene-content-main {
opacity: 1;
}
.index-scene-windows.cur .scene-content-text {
opacity: 1;
bottom: 5%;
}
.index-scene-windows .vjs-big-play-button, .index-scene-windows .video-js .vjs-big-play-button, .index-scene-windows .vjs-control-bar {
display: none !important;
}
.index-scene-windows.cur .scene-content-video {
animation: dadaoxiao 4000ms 1 ease forwards;
}
@keyframes dadaoxiao {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.0);
}
}
.language-show {
position: absolute;
width: 150px;
left: -35px;
z-index: 911;
display: none;
padding-top: 10px;
}
.language-show ul {
padding: 10% 0px;
overflow: hidden;
}
.language-show ul a {
display: block;
text-align: left;
padding: 10px 20px;
position: relative;
}
.language-show ul a:hover {
opacity: .5;
}
.header.scroll-down .language-show ul, .header.scroll-top .language-show ul {
background: var(--black);
}
.header.detail.scroll-down .language-show ul {
background: var(--white);
}
.header.detail.scroll-down .language-show ul a {
color: var(--black);
}
.application-detail-left-bottom code {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
display: block;
}
.application-detail-left-bottom iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
@media screen and (max-width: 5120px) {
.div-product-class {
padding-bottom: 30%;
}
.header-logo a {
background-size: auto 100%;
}
}
@media screen and (max-width: 3840px) {}
@media screen and (max-width: 2560px) {}
@media screen and (max-width: 2048px) {}
@media screen and (max-width: 1920px) {
.hardware-warranty-item .text-2 {
min-height: 130px;
}
.application-content-item .text-2 {
min-height: 30px;
}
.application-content-list {
min-height: 300px;
}
.service-download-top-left .text-2 {
min-height: 100px;
}
.div-product-list-center {
min-height: 200px;
}
.index-project-item .text-2 {
min-height: 30px;
}
.div-product-class {
padding-bottom: 0;
}
.news-content-items .title-1 {
min-height: 100px;
}
.news-content-items .title-1 h4 {
overflow: hidden;
}
}
@media screen and (max-width: 1680px) {
.path {
top: 100px;
}
.submit-1 {
width: 30%;
}
.header-content {
height: 100px
}
.header-nav ul li {
margin-left: 28px;
}
.swiper-button-prev {
right: 100px;
}
.swiper-button-prev, .swiper-button-next {
width: 45px;
height: 45px;
margin-top: -22.5px;
}
.milestone-year-swiper .swiper-slide-active .title-1 strong {
font-size: 30px;
}
.bottom-1 {
width: 180px;
height: 45px;
line-height: 45px;
}
.contact-content-bottom .contact-item .icon-1 {
width: 40px;
height: 40px;
}
.contact-content-bottom .contact-item .icon-1 img.img-inline {
max-width: 100%;
max-height: 100%;
}
.index-recommended-right .play-1, .product-advantages-swiper .play-1, .product-video-item .play-1, .robot-control-system-right .play-1 {
width: 80px;
height: 55px;
background-size: 100%;
}
.jiantou-1 {
width: 40px;
height: 40px;
}
.div-text {
margin-top: 8%;
}
.div-text .bottom-4, .technology-content-left {
margin-top: 10%;
}
.index-product-item .jiantou-1 {
margin-top: 20%;
}
.product-parameters-bottom, .milestone-content-center {
margin-top: 3%;
}
.div-product-item .item-3 {
margin-top: 1%;
}
.div-class .title-1 {
padding-bottom: 3%;
}
.index-latest-news-item.iln2 a, .index-latest-news-item.iln3 a {
padding-bottom: 7%;
}
.index-product-item .product {
width: 80%;
}
.index-product-item .text {
left: 5%;
top: 30px;
width: 60%;
}
.index-product-item.ipi1 .product {
transform: translateX(50%);
right: 50%;
bottom: 0;
width: 80%;
}
.index-product-item.ipi1 a:hover .product {
transform: translate(50%, -10px)
}
.index-product-item.ipi2 .product {
right: 5%;
bottom: auto;
top: 50%;
transform: translateY(-50%);
width: 50%;
}
.index-product-item.ipi2 a:hover .product {
transform: translate(-10px, -50%)
}
.index-product-item.ipi3 .product, .index-product-item.ipi4 .product {
width: 70%;
}
.index-project-item .img::before {
right: -80px;
}
.index-latest-news-item .title-1 {
min-height: 150px;
}
.input-1, .textarea-1, .choice-1 a.cur, .submit-1 {
height: 50px;
}
.header-nav ul li a.nav::after {
bottom: -5px;
}
.product-table table td {
height: 40px;
font-size: 14px;
}
.div-detail-banner .text {
top: 50%;
}
.div-detail-banner .text .botton-5 a {
width: 140px;
height: 45px;
line-height: 45px;
}
.div-detail-banner .product-2 {
right: 8%;
width: 40%;
}
.product-advantages-item .icon-1 {
width: 50px;
text-align: center;
height: 50px;
margin: auto;
}
.product-advantages-item .icon-1 img {
max-width: 100%;
}
.parameters-item .icon-1 {
width: 80px;
height: 80px;
}
.parameters-item .icon-1 img {
max-width: 80%;
max-height: 80%;
}
.product-parameters-bottom .product-1 img {
max-width: 100%;
}
.product-video-swiper .video-next {
right: 5%;
}
.product-video-swiper .video-prev {
right: 130px;
}
.product-video-item .text {
left: 5%;
}
.div-product-item .viewmore-4 {
margin-top: 2%;
padding: 2% 0;
}
.div-product-item .title-1 {
margin-bottom: 0;
}
.technology-content-left .title-1 {
width: 100%;
}
.competitive-advantage-item .icon-1, .pageturn a i, .pageturn a, .aftersale-item .icon-1 {
width: 50px;
height: 50px;
}
.pageturn a span, .service-content-nav a span, .donwload-2 strong {
line-height: 50px;
}
.competitive-advantage-item .icon-1 img {
max-width: 80%;
max-height: 80%;
}
.pageturn a span {
font-size: 16px;
}
.social-share .icon-wechat .wechat-qrcode {
top: -165px;
left: -53px;
width: 150px;
height: 150px;
}
.social-share .icon-wechat .wechat-qrcode .help {
display: none;
}
.service-content-nav a {
width: 200px;
height: 50px;
}
.faq-item-title {
padding-left: 5%;
}
.faq-item-content {
padding: 2% 5%;
}
.download-top {
top: 55%;
}
.service-download-top-left {
width: 60%;
}
.download-botton .donwload-2 a {
width: 180px;
}
.div-pagetop {
margin-top: 100px;
}
.add-item .product-2 {
left: 20%;
width: 60%;
}
.software-products-right li::before {
top: 8px;
}
.software-products-right li {
margin: 0 0 2% 0;
}
.software-products-item .icon-1 img {
max-width: 40%;
max-height: 40%;
}
.viewmore-2 {
width: 45%;
height: 40px;
line-height: 40px;
}
.page-nextprev a strong {
width: 80%;
}
.index-about-date .text-2 {
padding: 0;
}
.milestone-year-swiper .swiper-slide-thumb-active .title-1 strong {
font-size: 30px;
}
.partner-content-top .partner-prev {
right: 50px;
}
.partner-item .pic img.img-center {
max-width: 50%;
max-height: 50%;
}
.contact-map-add {
left: 15%;
}
.recruiting-content-right-top .search-1 {
padding: 4.4% 0;
}
.recruiting-item .text-3 li {
font-size: 12px;
padding: 0 0 0 15px;
line-height: 22px;
}
.recruiting-item .text-3 li::before {
top: 9px
}
.recruiting-detail .return-1 a {
width: 60px;
height: 60px;
}
.honor-content-swiper {
min-height: 400px;
}
.standard-function-item .icon-1 {
height: 60px;
}
.standard-function-item .icon-1 img {
max-width: 70%;
max-height: 70%;
}
.standard-function-li {
margin-top: 10%;
}
.standard-function-left {
margin-top: 3%;
}
.users-and-roles .text .pic img, .visually-display-agv .pic img {
max-width: 80%;
}
.header-nav-content {
margin-top: 100px;
}
.header.scroll-down .header-nav-content {
margin-top: 80px;
}
.product-nav-item .classname-1 {
min-height: 50px;
}
.input-2 {
height: 50px;
}
.searchsend {
width: 50px;
height: 50px;
top: 50%;
transform: translateY(-50%);
}
.helpchoose-center-bottom-item .icon-1 {
width: 100%;
}
.div-helpchoose {
padding-top: 90px;
}
.product-table table td {
height: 60px;
}
.product-table-top {
min-height: 320px;
}
.div-product-bottom-content-gundong {
height: 740px;
}
}
@media screen and (max-width: 1440px) {
.product-top-nav a.botton {
width: auto;
height: 30px;
line-height: 30px;
padding: 0 10px;
}
.product-top-nav a.botton strong {
font-size: 12px;
}
.honor-content-swiper {
min-height: 360px;
}
.div-product-item .text .text-main {
transform: translateY(0%);
}
.div-product-item a:hover .text-main {
transform: translateY(0%);
}
.div-product-item a:hover .pic img {
transform: translateY(-5%) scale(1);
}
.index-project-item a::after {
height: 2px;
}
.header-nav ul li.language, .header-nav ul li.search {
width: 18px;
height: 18px;
}
.div-product-bottom-content-left {
width: 25%;
}
.div-product-bottom-content-right, .div-product-bottom-gundong .swiper-scrollbar {
width: 75%;
}
.product-table table td {
height: 50px;
}
.div-product-bottom-content-gundong {
height: 680px;
}
.product-table-top {
min-height: 280px;
}
.div-banner .text h1, .div-banner .text h2 { font-size: 30px !important; }
.div-banner .text h3, .div-banner .text h4 { font-size: 19px !important; }
.div-detail-banner .text h1 { font-size: 42px !important; }
.footer1 .con > p:nth-of-type(1) { font-size: 34px; }
.index-scene-item .number-1 strong { font-size: 42px; }
.product-advantages-item .title-1 { font-size: 23px; }
.news-content-items .title-1 h4 { font-size: 18px; }
.search-1 { font-size: 17px; }
.pageturn a span { font-size: 17px; }
.product-top-nav a.botton strong { font-size: 14px; }
.product-nav-item .classname-1 { font-size: 18px; }
.div-product-item .text .text-main { font-size: 17px; }
.submit-1 { font-size: 17px; }
.footer1 .con li > a { font-size: 18px; }
.recruiting-item .text-3 li { font-size: 13px; }
.index-scene-item .title-1 { font-size: 18px; }
}
@media screen and (max-width: 1366px) {
.bottom-1 {
width: 40%;
}
.index-project-item .jiantou-1 {
width: 40px;
height: 40px;
}
.parameters-item .icon-1 {
width: 70px;
height: 70px;
}
.index-latest-news-item.iln2 a, .index-latest-news-item.iln3 a {
padding-bottom: 4%;
}
.div-detail-banner .product-2 {
right: 10%;
width: 35%;
}
.application-detail-left-center .date-1, .application-detail-left-center .type-2 {
line-height: 35px;
}
.service-content-nav a {
width: 180px;
height: 40px;
}
.pageturn a span, .service-content-nav a span, .donwload-2 strong {
line-height: 42px;
}
.search-1 {
padding: 9px 0;
}
.choice-2 a {
padding: 10px 0;
}
.index-about-date .item-4 {
padding: 4% 0;
}
.milestone-item-right .text {
padding: 3% 0;
}
.competitive-advantage-item .icon-1, .pageturn a i, .pageturn a, .aftersale-item .icon-1 {
width: 40px;
height: 40px;
}
.input-1, .textarea-1, .choice-1 a.cur, .submit-1 {
height: 40px;
}
.recruiting-windows-center .submit-1 {
line-height: 40px;
}
.submit-1 {
padding: 0;
line-height: 40px;
width: 24%;
}
.cleartop {
margin: 10px 0;
}
.header-nav-content {
padding: 2% 10%;
}
.div-search-page {
padding-top: 100px;
}
.product-table-top {
min-height: 250px;
}
}
@media screen and (max-width: 1280px) {
.index-about-top-right .text-2 {
margin-top: 2%;
}
.index-project-nav .icon-1 {
width: 40px;
height: 40px;
}
.header-content {
height: 80px;
}
.path {
top: 80px;
}
.div-detail-banner .text {
left: 5%;
top: 50%;
width: 40%;
}
.div-detail-banner .text .botton-5 {
margin-top: 5%;
}
.index-recommended-right .play-1, .product-advantages-swiper .play-1, .product-video-item .play-1, .robot-control-system-right .play-1 {
width: 70px;
height: 45px;
}
.users-and-roles .text .pic img, .visually-display-agv .pic img {
max-width: 80%;
}
.header-nav-content {
margin-top: 80px;
}
.header.scroll-down .header-nav-content {
margin-top: 60px;
}
.product-nav-item .classname-1 {
min-height: 45px;
}
.div-product-bottom-content-gundong {
height: 670px;
}
.div-banner .text h1, .div-banner .text h2 { font-size: 44px !important; }
.div-banner .text h3, .div-banner .text h4 { font-size: 18px !important; }
.div-detail-banner .text h1 { font-size: 38px !important; }
.footer1 .con > p:nth-of-type(1) { font-size: 32px; }
.index-scene-item .number-1 strong { font-size: 38px; }
.product-advantages-item .title-1 { font-size: 22px; }
.news-content-items .title-1 h4 { font-size: 17px; }
.search-1 { font-size: 17px; }
.pageturn a span { font-size: 17px; }
.submit-1 { font-size: 17px; }
.product-top-nav a.botton strong { font-size: 14px; }
.product-nav-item .classname-1 { font-size: 17px; }
}
@media screen and (max-width: 1152px) {
.index-product-item .jiantou-1 {
margin-top: 10%;
}
.jiantou-1 {
width: 30px;
height: 30px;
}
.index-latest-news-item .title-1 {
min-height: 110px;
}
.index-latest-news-item.iln2 a, .index-latest-news-item.iln3 a {
padding-bottom: 6%;
}
.product-top-nav.cur {
display: none;
}
.milestone-year-swiper {
overflow: visible;
}
.milestone-year-swiper .swiper-slide-thumb-active .title-1 strong {
font-size: 20px;
}
.milestone-prev, .milestone-next {
transform: translateY(-45%);
}
.service-content- .service-content-nav a {
width: auto;
padding: 0 20px
}
.div-banner .text h1, .div-banner .text h2 { font-size: 36px !important; }
.div-banner .text h3, .div-banner .text h4 { font-size: 17px !important; }
.div-detail-banner .text h1 { font-size: 32px !important; }
.footer1 .con > p:nth-of-type(1) { font-size: 30px; }
.footer1 .con > p:nth-of-type(2) { font-size: 16px; }
.footer1 .con li > a { font-size: 18px; }
.index-scene-item .number-1 strong { font-size: 36px; }
.index-scene-item .title-1 { font-size: 17px; }
.product-advantages-item .title-1 { font-size: 20px; }
.news-content-items .title-1 h4 { font-size: 16px; }
.search-1 { font-size: 16px; }
.pageturn a span { font-size: 16px; }
.submit-1 { font-size: 16px; }
.product-top-nav a.botton strong { font-size: 13px; }
.product-nav-item .classname-1 { font-size: 16px; }
.recruiting-item .img {
display: none;
}
.recruiting-item .text {
position: relative;
left: auto;
top: auto;
width: 100%;
transform: none;
padding: 5%;
}
.viewdetails-1 {
display: none;
}
}
@media screen and (max-width: 1024px) {
.div-product-bottom-gundong, .div-product-bottom-gundong .swiper-scrollbar {
width: 100%;
}
.div-product-bottom-content-gundong {
height: auto;
}
.div-banner .text h1, .div-banner .text h2 { font-size: 32px !important; }
.div-banner .text h3, .div-banner .text h4 { font-size: 16px !important; }
.div-detail-banner .text h1 { font-size: 28px !important; }
.footer1 .con > p:nth-of-type(1) { font-size: 28px; }
.footer1 .con > p:nth-of-type(2) { font-size: 15px; }
.footer1 .con li > a { font-size: 17px; }
.index-scene-item .number-1 strong { font-size: 34px; }
.index-scene-item .title-1 { font-size: 17px; }
.search-1 { font-size: 15px; }
.pageturn a span { font-size: 15px; }
.product-advantages-item .title-1 { font-size: 19px; }
.product-nav-item .classname-1 { font-size: 15px; }
.news-content-items .title-1 h4 { font-size: 16px; }
}
@media screen and (max-width: 980px) {
.product-table table td {
height: 70px;
font-size: 13px;
}
.footer-content-bottom .social-2 a {
width: 40px;
height: 40px;
}
.header.scroll-down .header-content {
height: 80px;
}
.div-banner .text h1, .div-banner .text h2 { font-size: 28px !important; }
.div-banner .text h3, .div-banner .text h4 { font-size: 15px !important; }
.div-detail-banner .text h1 { font-size: 26px !important; }
.footer1 .con > p:nth-of-type(1) { font-size: 26px; }
.footer1 .con > p:nth-of-type(2) { font-size: 15px; }
.footer1 .con li > a { font-size: 17px; }
.index-scene-item .number-1 strong { font-size: 32px; }
.index-scene-item .title-1 { font-size: 16px; }
.search-1 { font-size: 15px; }
.pageturn a span { font-size: 15px; }
.news-content-items .title-1 h4 { font-size: 15px; }
.recruiting-item .text-3 li { font-size: 12px; }
.product-top-nav a.botton strong { font-size: 12px; }
.product-nav-item .classname-1 { font-size: 15px; }
.capability-item .text .title-1 { font-size: 18px; }
.product-advantages-item .title-1 { font-size: 18px; }
.parameters-item .text-2 { font-size: 14px; }
.footer2 { font-size: 13px; }
.footer2 > p > span, .footer2 > p > a { font-size: 13px; }
.submit-1 { font-size: 15px; }
.choice-1 a.cur { font-size: 14px; }
.input-1, .textarea-1 { font-size: 14px; }
.bottom-1 { font-size: 15px; }
.news-content-type, .service-content-nav {
position: relative;
overflow-y: hidden;
overflow-x: scroll;
overflow: auto;
width: 100%;
white-space: nowrap;
}
.news-content-type a, .service-content-nav a {
box-sizing: border-box;
margin-right: 20px;
}
.news-content-type::-webkit-scrollbar, .service-content-nav::-webkit-scrollbar {
height: 0px;
width: 0px;
background: #ccc;
}
.application-detail-left-center .date-1, .application-detail-left-center .type-2 {
border: none;
padding: 10px 0;
border-radius: 0;
line-height: normal;
}
.addthis_inline_share_toolbox {
float: none !important;
clear: both;
margin-top: 20px;
}
.application-detail-left-center {
padding: 3% 0 !important;
}
.application-detail-left-bottom img, .application-detail-left-bottom img {
width: auto;
height: auto !important;
max-width: 100% !important;
}
.application-detail-left-center .type-2 {
margin-left: auto;
clear: both;
}
.v3d-product {
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
width: 100% !important;
}
.v3d-product canvas {
width: 100% !important;
height: auto;
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
}
.div-product-item a:hover .text-main {
transform: none;
}
.div-product-item .text, .div-product-item .text .text-main {
position: relative;
}
.div-product-item a:hover .img {
box-shadow: none;
}
.div-product-item .img {
box-shadow: none;
}
.div-product-item a {
background: #fff;
}
.div-product-item .text .text-main {
transform: none;
}
.div-product-item .item-3, .div-product-item .viewmore-4 {
opacity: 1;
}
.div-product-item .text {
padding-bottom: 5%;
margin-top: -10%;
}
.div-product-item a:hover .pic img {
transform: none;
}
.application-content-item.aci1 .text-2 {
color: #000;
}
.index-scene-center .slayer.layer-1 .text {
display: none;
}
.index-project-nav {
position: relative;
overflow-y: hidden;
overflow-x: scroll;
overflow: auto;
width: 100%;
white-space: nowrap;
}
.index-project-nav::-webkit-scrollbar {
height: 0px;
width: 0px;
background: #ccc;
}
.index-project-nav a {
width: auto !important;
padding: 15px 7% !important;
margin-top: 0px !important;
}
.index-project-nav a:last-child {
width: auto !important;
}
.index-project-nav .title-2 {
margin-top: 5px;
}
.index-project-item {
overflow: hidden;
}
.product-advantages-list {
position: relative;
overflow-y: hidden;
overflow-x: scroll;
overflow: auto;
width: 100%;
font-size: 0;
}
.product-advantages-list::-webkit-scrollbar {
height: 0px;
width: 0px;
background: #ccc;
}
.product-advantages-item {
width: 100% !important;
height: auto;
float: none;
display: inline-block;
vertical-align: middle;
padding: 10px 0;
box-sizing: border-box;
}
.product-advantages-item .img {
display: none;
}
.product-advantages-item .item-1 {
position: relative;
left: auto;
top: auto;
transform: none;
text-align: center;
box-sizing: border-box;
}
.product-advantages-list.number3 .product-advantages-item:last-child {
width: auto;
}
.product-advantages-item .title-1 {
margin-top: 0px;
}
.product-advantages-list.number2::after, .product-advantages-list.number3::after {
display: none;
}
.product-advantages-item:nth-child(1), .product-advantages-item:nth-child(2) {
border: 1px solid #dddddd;
}
.index-recommended-right .img {
background: none;
}
}
@media screen and (max-width: 860px) {
.pcshow, .aside-top a {
display: none !important;
}
.mbshow, .menu-toggle {
display: block !important;
}
.header-logo {
width: 30%;
top: 20px;
transform: none;
left: 3%;
}
.header-nav {
top: 0;
transform: none;
width: 100%;
left: 0;
position: fixed;
height: 100%;
transform: translateY(-100%);
background: #000;
}
.header-nav ul li:first-child {
margin-top: 20%;
}
.header-nav ul li {
display: block;
padding: 3% 0;
}
.header-nav ul {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5%;
}
.no-touch .header-nav {
transform: translateY(0);
}
.swiper-button-prev {
right: 70px;
}
.header-nav ul li a.nav {
font-size: 18px;
}
.header-nav ul li.language, .header-nav ul li.search {
display: inline-block;
}
.index-scene-item {
width: 100%;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, .2);
padding: 4% 0;
}
.index-scene-item::after, .footer-content-top-right {
display: none;
}
.index-recommended-right .img::before, .index-project-item .img::before, .index-about-top-right .img::before {
right: -100px;
}
.div-product-top, .div-product-center, .technology-intelligent .text, .relevant-positions-detail-other .div-content, .responsibility-content .div-content {
width: 90%;
}
.index-recommended-left, .index-recommended-right, .index-product-top .text-2, .index-product-item.ipi1, .index-product-item .pic, .index-product-item.ipi2, .index-product-item.ipi3, .index-product-item.ipi4, .index-project-top .text-2, .index-project-item, .index-about-top-left, .index-about-top-right, .index-latest-news-item.iln1, .index-latest-news-item, .footer-content-top-left, .product-table, .div-product-nav .choice-2, .search-2, .div-product-item, .product-table-swiper, .product-advantages-left, .technology-content-left, .technology-content-right, .high-precision-top-left, .high-precision-top-right, .ervo-control-left, .ervo-control-right, .competitive-advantage-item, .application-content-type .choice-2, .application-content-item.aci1, .application-content-item, .application-detail-left, .application-detail-right, .news-content-item, .milestone-item-left, .service-download-list, .select-1, .service-download-top-left, .aftersale-item, .software-products-left, .software-products-right, .hardware-warranty-item, .contact-content-bottom .contact-item, .recruiting-content-left, .recruiting-content-right, .positions-found, .robot-control-system-left, .robot-control-system-right, .standard-function-item {
float: none;
width: 100%;
margin: 0;
}
.index-scene, .index-product, .index-project, .index-latest-news, .div-product, .product-advantages, .product-parameters, .recommend-product, .product-application-scenarios, .technology-content, .technology-competitive-advantage, .pageturn, .service-content, .news-content, .honor-content, .partner-content, .service-download-other, .aftersale-content, .contact-content, .recruiting-content, .robot-control-system, .standard-function, .responsibility-content, .demand-feedback {
padding: 20% 0;
}
.index-recommended-right, .index-product-item.ipi2, .index-product-item.ipi3, .index-product-item.ipi4, .index-project-item, .div-product-item, .technology-content-right, .high-precision-top-right, .ervo-control-right, .competitive-advantage-item, .application-content-item, .news-content-item, .service-download-list, .download-top-right, .hardware-warranty-item, .contact-content-bottom .contact-item, .recruiting-content-right {
margin-top: 10%;
}
.index-project-top .text-2, .index-product-top .text-2, .index-about-top-right, .footer-content-bottom .copy-1, .robot-control-system-right, .standard-function-item {
margin-top: 5%;
}
.download-top-right .input-item .input-2, .select-1 {
margin-bottom: 2%;
}
.div-product-type {
margin-bottom: 20%;
}
.index-product-item .img {
padding: 0;
}
.footer-content-top, .application-detail-left-top, .application-detail-left-center, .about-content, .div-service-download, .software-products-right {
padding: 10% 0;
}
.index-product-item .product {
right: 5%;
bottom: 5%;
}
.index-product-item.ipi2 .jiantou-1, .index-project-nav a::after, .index-project-item .jiantou-1, .product-top-nav, .path, .product-parameters-bottom .img, .product-video-swiper .video-prev, .product-video-swiper .video-next, .application-content-item.aci1 .viewmore-3, .application-detail-left-center .fenxiang-1, .faq-item-title i {
display: none;
}
.index-project-nav a {
width: 50%;
padding: 3% 0;
border: 1px solid var(--gray2);
box-sizing: border-box;
margin-top: -1px;
}
.index-project-nav a:nth-child(1), .index-project-nav a:nth-child(2) {
margin-top: 0px;
}
.index-project-nav a:last-child, .standard-function-list.num5 .standard-function-item:nth-child(4), .standard-function-list.num5 .standard-function-item:nth-child(5) {
width: 80%;
}
.robot-control-system-left .donwload-2 a {
width: 50%;
}
.index-about-bottom .index-about-top-left, .footer-content-bottom .social-2, .product-advantages-right {
position: relative;
bottom: auto;
right: auto;
left: auto;
top: auto;
bottom: auto;
float: none;
}
.div-banner .pic img, .product-video-item .img img, .technology-intelligent .img img {
width: 300%;
max-width: 300%;
}
.div-banner .text {
left: 5%;
top: 50%;
width: 90%;
}
.path {
left: 5%;
}
.product-parameters-bottom .product-1 {
position: relative;
left: auto;
top: auto;
z-index: 11;
text-align: center;
transform: none;
margin-top: 10%;
}
.product-advantages-item .item-1, .product-advantages-right, .download-top-left, .download-top-right, .donwload-2 a, .recruiting-detail-top, .recruiting-detail-center {
width: 100%;
}
.div-detail-banner .img {
margin-bottom: 40%;
}
.div-detail-banner .pic img, .product-parameters-bottom .img {
width: 400%;
max-width: 400%;
}
.div-detail-banner .text {
left: 5%;
top: 40%;
width: 50%;
}
.div-detail-banner .product-2 {
right: 0;
width: 50%;
bottom: auto;
bottom: auto;
top: 19%;
}
.product-parameters-bottom .parameters-1 {
position: relative;
left: auto;
top: auto;
transform: none;
width: 90%;
margin: auto;
}
.parameters-item {
overflow: hidden;
width: 100%;
float: none;
text-align: left;
float: none;
}
.parameters-item.fr {
float: none;
clear: both;
}
.parameters-item .icon-1 {
float: left;
}
.parameters-item .text-2 {
width: 60%;
text-align: left;
right: auto;
left: 25%;
}
.parameters-item.fr .text-2 {
text-align: left;
left: 25%;
right: auto;
}
.parameters-item:nth-child(5), .parameters-item:last-child {
border-bottom: solid 1px var(--gray2);
}
.technology-high-precision::after {
height: 20%;
}
.ervo-control-right .text-2 {
text-align: left;
}
.application-content-item.aci2 {
position: relative;
left: auto;
top: auto;
transform: none;
width: 100%;
margin: auto;
margin-top: 10%;
}
.application-content-item.aci1 .text {
position: relative;
left: auto;
padding: 5%;
bottom: auto;
width: 90%;
}
.application-content-item .title-1 {
color: var(--black);
}
.application-detail-left-center .fenxiang-1 {
float: none;
margin: 10% 0;
}
.use-the-product-item .text {
position: relative;
left: auto;
top: auto;
transform: none;
padding: 5% 10% 25% 10%;
}
.use-the-product-item .img {
background: none;
float: none;
width: 100%;
overflow: hidden;
}
.faq-item-title {
padding-left: 0;
}
.faq-item-content, .service-faq-item {
padding: 5% 0;
}
.faq-item-title strong, .honor-content-top .text-1, .demand-feedback .div-content {
width: 90%;
display: block;
}
.service-content-nav a {
margin: 1px;
padding: 0 3%;
min-width: 50px;
}
.milestone-year-swiper, .standard-function-list {
margin-top: 10%;
}
.milestone-item-right, .service-download-top-right {
float: none;
overflow: hidden;
box-sizing: border-box;
position: relative;
width: 100%;
height: auto;
right: auto;
}
.milestone-item-right .item-list {
top: auto;
transform: none;
padding: 7%;
width: 100%;
box-sizing: border-box;
left: auto;
position: relative;
}
.milestone-content {
padding-bottom: 10%;
}
.milestone-year {
padding: 10% 0;
}
.milestone-year-swiper {
width: 80%;
padding: 0 10%;
}
.milestone-year-swiper .swiper-button-prev {
left: 0;
}
.milestone-year-swiper .swiper-button-next {
right: 0;
}
.milestone-prev, .milestone-next {
transform: translateY(-37%);
}
.honor-prev, .honor-next, .corporate-culture-bottom .img {
display: none;
}
.corporate-culture-item .img {
display: block;
position: absolute;
}
.corporate-culture-item.cur, .recruiting-content-right-top .search-2 {
width: 100%;
position: relative;
left: auto;
right: auto;
}
.corporate-culture-item {
min-height: 300px;
}
.corporate-culture-item {
width: 100%;
position: relative;
overflow: hidden;
left: auto;
top: auto;
min-height: 300px;
}
.corporate-culture-item.ccb2, .corporate-culture-item.ccb3, .corporate-culture-item.ccb4 {
left: auto;
right: auto;
}
.corporate-culture-item .text {
bottom: 5%;
}
.corporate-culture-item.cur .text {
left: 10%;
width: 80%;
}
.corporate-culture-item .text-2 {
opacity: 1;
}
.service-content-top .search-2 {
position: relative;
right: auto;
}
.service-content-nav {
float: none;
}
.download-top-right .input-item .input-2:last-child {
float: right;
}
.select-1 a.cur {
padding: 2% 5%;
}
.div-banner {
overflow: visible;
}
.download-top-right .input-item {
clear: both;
}
.download-botton {
padding: 10% 0;
}
.download-botton .donwload-2, .software-products-nav a {
margin-bottom: 10%;
}
.service-download-center {
margin-top: 10%;
}
.software-products-swiper {
padding-bottom: 20%;
}
.hardware-warranty-item {
padding: 10%;
}
.contact-map-add {
display: none;
}
.recruiting-content-right {
padding: 0;
}
.recruiting-item .text {
box-sizing: border-box;
}
.contact-map-addlist {
position: relative;
width: 100%;
right: auto;
top: auto;
transform: none;
}
.recruiting-item a:hover {
transform: scale(1);
}
.recruiting-detail .return-1 {
position: relative;
left: auto;
top: auto;
z-index: 1;
margin-bottom: 10%;
}
.recruiting-detail .return-1 a {
width: 50px;
height: 50px;
position: relative;
}
.recruiting-detail-botton a.resume-1 {
width: 100%;
padding: 4% 0;
}
.recruiting-windows-content {
width: 90%;
padding: 10% 3%;
}
.recruiting-windows-center .upload-4 {
width: 30%;
}
.header.black .menu-toggle span.hamburger, .header.black .menu-toggle span.hamburger:after, .header.black .menu-toggle span.hamburger:before {
background: #000;
}
.no-touch .header.black .header-logo a {
background: url('../images/logo.png') center no-repeat;
background-size: 100%;
}
.no-touch .header.black .header-nav ul li a {
color: var(--white);
}
.no-touch .header.black .header-nav ul li a.nav::after {
color: var(--white);
}
.no-touch .header.black .header-nav ul li.search::before {
background: var(--white);
opacity: .5;
}
.no-touch .header.black .header-nav ul li a img {
filter: invert(0);
}
.div-product-bottom-content-left {
width: 55%;
}
.div-product-bottom-content-right {
width: 45%;
}
.product-table-top {
min-height: 220px;
}
.header {
overflow: hidden;
}
.header .header-nav {
opacity: 0;
}
.no-touch .header .header-nav {
opacity: 1;
}
.header-nav-show {
position: relative;
width: 100%;
left: auto;
}
.header-nav-show ul {
background: none;
padding: 5% 0;
}
.header-nav-show ul a {
color: var(--gray3) !important;
text-align: right;
padding: 0px;
font-size: 14px;
}
.standard-function-item {
background: var(--white);
padding: 10%;
width: 80%;
overflow: hidden;
}
.standard-function-item .text {
position: relative;
left: auto;
top: auto;
width: 100%;
height: auto;
padding: 0;
}
.standard-function-item .img, .capability-item .text .num-3, .capability-nav li span {
display: none;
}
.standard-function-item .text-1 {
position: relative;
left: auto;
bottom: auto;
width: 100%;
}
.standard-function-item .number-1 {
position: absolute;
right: 0;
top: 0;
}
.standard-function-left {
float: none;
width: 90%;
margin: auto;
padding-top: 3%;
}
.standard-function-right {
float: none;
width: 90%;
margin: 2% auto;
}
.standard-function-bottom {
padding: 2% 0 20% 0;
}
.users-and-roles .img img {
max-width: 300%;
width: 300%;
}
.users-and-roles .text-1 {
width: 90%;
}
.visually-display-agv {
padding: 20% 0;
}
.index-product-item.ipi1 .jiantou-1 {
margin-top: 10%;
display: none;
}
.index-product-item .jiantou-1 {
position: relative;
left: auto;
bottom: auto;
display: none;
}
.index-project-nav a:last-child {
width: 100%;
}
.responsibility-item {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 5%;
}
.capability-nav {
left: 0;
top: 0;
width: 100%;
}
.capability-nav li i {
width: 40px;
height: 40px;
}
.capability-item .text .icon-1 {
width: 40px;
height: 40px;
}
.capability-content-bottom-swiper {
width: 120%;
margin-left: -10%;
}
.capability-item .text .title-1 {
padding-top: 10px;
font-size: 16px;
}
.capability-item .text .text-2 {
padding-top: 0px;
min-height: auto;
line-height: 14px;
}
.capability-item .text {
transform: translateY(-60%);
}
.capability-nav li:nth-child(1) {
left: 77%;
}
.capability-nav li:nth-child(2) {
left: 77%;
}
.capability-nav li:nth-child(3) {
right: 77%;
}
.capability-nav li:nth-child(4) {
right: 77%;
}
.choice-2:hover {
z-index: 11;
}
.demand-feedback-nav a {
width: 24%;
margin: 0;
padding: 3% 0;
}
.contact-content-bottom .contact-item .title-1 h4 {
padding-top: 6%;
}
.from-submit .submit-1, .div-search-top {
width: 100%;
}
.from-item3 .fromili {
width: 100%;
float: none;
margin-right: 0;
}
.div-search-content {
width: 90%;
}
.input-2 {
background: var(--white);
}
.div-search-nav a {
margin-right: 10px;
}
.div-search-content {
min-height: auto;
}
.div-search-list {
padding: 10% 0;
}
.header.detail .menu-toggle span.hamburger, .header.detail .menu-toggle span.hamburger:after, .header.detail .menu-toggle span.hamburger:before {
background: var(--black);
}
.no-touch .header.detail .header-logo a {
background: url('../images/logo.png') center no-repeat;
background-size: 100%;
}
.no-touch .header.detail .header-nav ul li a {
color: var(--white);
}
.no-touch .header.detail .header-nav ul li a img {
filter: invert(0);
}
.no-touch .header.detail .header-nav ul li.search::before {
background: var(--white);
}
.product-compare-add {
width: 100%;
}
.header-nav ul li {
display: inline-block;
z-index: 50;
}
.div-product-content-top {
width: 100% !important;
}
.milestone-year .title-1 {
margin-top: 20px;
}
.milestone-prev, .milestone-next {
transform: translateY(-5%);
}
.aftersale-content-center {
margin-top: 10%;
}
.vnr-main .aftersale-content:nth-child(4) {
padding: 20% 0 0 0;
}
.index-scene-center .pic {
padding: 0;
}
.index-scene .div-content {
width: 100%;
text-align: center;
}
.index-scene-item .number-1 sup {
display: block;
padding-left: 0px;
}
.index-scene-item {
width: 30%;
text-align: center;
margin: 0 1%;
}
.footer-content-top-right {
display: block;
width: 100%;
margin-top: 10%;
}
.footer-content-top-right .submit-1 {
width: 50%;
}
.news-content-items {
float: left;
width: 100%;
margin-right: 0;
margin-bottom: 2%;
}
.news-content-type .service-content-nav {
white-space: normal;
margin-bottom: 5%;
}
.milestone-year-swiper .swiper-slide-active .title-1 strong {
font-size: 20px;
}
.service-content-nav {
display: none;
}
.header.black .header-nav ul li a.down::before {
background: url('../images/down1.png') center no-repeat;
}
.product-parameters-bottom .parameters-text-1 {
position: relative;
transform: none;
width: 90%;
margin: auto;
margin-top: 10%;
}
.footer1 .info li > p:nth-of-type(2) { font-size: 24px; }
.footer1 .con .child > a { font-size: 14px; }
.product-advantages-item .title-1 { font-size: 17px; }
.parameters-item .text-2 { font-size: 13px; }
.footer2 { font-size: 12px; }
.footer2 > p > span, .footer2 > p > a { font-size: 12px; }
.submit-1 { font-size: 14px; }
.choice-1 a.cur { font-size: 13px; }
.input-1, .textarea-1 { font-size: 13px; }
.bottom-1 { font-size: 14px; }
.recruiting-item .text-3 li { font-size: 11px; }
.product-nav-item .classname-1 { font-size: 14px; }
.news-content-items .title-1 h4 { font-size: 14px; }
}
/* ========== 768px (平板竖屏) ========== */
@media screen and (max-width: 768px) {
.header-content { height: 60px; }
.header-logo { width: 40%; top: 14px; }
.header-nav ul li a.nav { font-size: 16px; }
.header-nav ul li:first-child { margin-top: 15%; }
.swiper-button-prev, .swiper-button-next { width: 36px; height: 36px; margin-top: -18px; }
.swiper-button-prev { right: 50px; }
.div-banner .text { width: 90%; top: 50%; }
.div-banner .text h1, .div-banner .text h2 { font-size: 24px !important; }
.div-banner .text h3, .div-banner .text h4 { font-size: 14px !important; }
.div-banner .pic img { width: 250%; max-width: 250%; }
.div-detail-banner .pic img { width: 300%; max-width: 300%; }
.div-detail-banner .text { width: 90%; left: 5%; top: 45%; }
.div-detail-banner .text h1 { font-size: 22px !important; }
.div-detail-banner .product-2 { width: 40%; top: 25%; right: 5%; }
.div-product-type { margin-bottom: 15%; }
.footer1 { flex-direction: column; padding-bottom: 30px; }
.footer1 .info { width: 100%; margin-bottom: 20px; }
.footer1 .con { width: 100%; padding-left: 0; }
.footer1 .con ul { flex-wrap: wrap; }
.footer1 .con li { width: 45%; margin-bottom: 15px; }
.footer1 .con > p:nth-of-type(1) { font-size: 24px; line-height: 34px; }
.footer1 .con > p:nth-of-type(2) { font-size: 14px; }
.footer1 .con li > a { font-size: 16px; margin-bottom: 15px; }
.footer2 { flex-direction: column; gap: 10px; }
.footer2 > p { flex-wrap: wrap; }
.footer2 > p > span { margin-right: 10px; }
.index-scene, .index-product, .index-project, .index-latest-news, .div-product, .product-advantages, .product-parameters, .recommend-product, .product-application-scenarios, .technology-content, .technology-competitive-advantage, .pageturn, .service-content, .news-content, .honor-content, .partner-content, .service-download-other, .aftersale-content, .contact-content, .recruiting-content, .robot-control-system, .standard-function, .responsibility-content, .demand-feedback { padding: 15% 0; }
.index-scene-item { padding: 3% 0; }
.index-scene-item .number-1 strong { font-size: 28px; }
.index-recommended-right .img::before, .index-project-item .img::before, .index-about-top-right .img::before { right: -60px; }
.index-project-nav a { width: 48%; padding: 2% 0; }
.index-latest-news-item .title-1 { min-height: auto; }
.div-product-item { width: 48%; float: left; margin: 0 1% 4% 1%; }
.div-product-item .text { margin-top: -5%; }
.product-advantages-item { width: 100%; }
.product-advantages-item .item-1 { width: 100%; }
.parameters-item .icon-1 { width: 50px; height: 50px; }
.parameters-item .text-2 { width: 55%; left: 20%; }
.parameters-item.fr .text-2 { left: 20%; }
.competitive-advantage-item { width: 48%; float: left; margin: 0 1% 5% 1%; }
.application-content-item { width: 48%; float: left; margin: 0 1% 4% 1%; }
.news-content-items { width: 48%; float: left; margin: 0 1% 3% 1%; }
.news-content-items .title-1 { min-height: auto; }
.news-content-items .title-1 h4 { font-size: 14px; }
.contact-content-bottom .contact-item { width: 48%; float: left; margin: 0 1% 4% 1%; }
.hardware-warranty-item { width: 48%; float: left; margin: 0 1% 4% 1%; }
.milestone-item-left, .milestone-item-right { width: 100%; float: none; }
.milestone-item-right .text { padding: 2% 0; }
.div-product-bottom-content-left { width: 100%; float: none; }
.div-product-bottom-content-right { width: 100%; float: none; margin-top: 5%; }
.search-1 { padding: 8px 0; font-size: 14px; }
.product-top-nav a.botton { width: auto; height: 28px; line-height: 28px; padding: 0 8px; }
.product-top-nav a.botton strong { font-size: 11px; }
.product-table table td { height: 50px; font-size: 12px; padding: 5px 8px; }
.pageturn a { width: 40px; height: 40px; }
.pageturn a span { line-height: 40px; font-size: 14px; }
.submit-1 { width: 40%; }
.choice-1 a.cur { height: 40px; line-height: 40px; }
.div-search-content { width: 90%; }
.recruiting-item .text { padding: 3%; }
.recruiting-item .text-3 li { font-size: 11px; line-height: 20px; }
.header-nav-content { margin-top: 60px; padding: 2% 8%; }
.header.scroll-down .header-nav-content { margin-top: 60px; }
.product-nav-item .classname-1 { min-height: auto; font-size: 14px; }
.standard-function-item { width: 48%; float: left; margin: 0 1% 4% 1%; }
.standard-function-list.num5 .standard-function-item:nth-child(4),
.standard-function-list.num5 .standard-function-item:nth-child(5) { width: 48%; }
.header-nav ul li.language, .header-nav ul li.search { width: 16px; height: 16px; }
}
/* ========== 480px (手机) ========== */
@media screen and (max-width: 480px) {
.header-content { height: 50px; }
.header-logo { width: 45%; top: 12px; }
.header-nav ul li a.nav { font-size: 14px; }
.header-nav ul li:first-child { margin-top: 12%; }
.header-nav ul { padding: 3%; }
.header-nav ul li { padding: 2% 0; }
.swiper-button-prev, .swiper-button-next { width: 30px; height: 30px; margin-top: -15px; }
.swiper-button-prev { right: 40px; }
.swiper-pagination-bullet { width: 6px; height: 6px; }
.div-banner .text h1, .div-banner .text h2 { font-size: 18px !important; }
.div-banner .text h3, .div-banner .text h4 { font-size: 12px !important; }
.div-banner .pic img { width: 200%; max-width: 200%; }
.div-detail-banner .img { margin-bottom: 35%; }
.div-detail-banner .pic img { width: 250%; max-width: 250%; }
.div-detail-banner .text { top: 42%; }
.div-detail-banner .text h1 { font-size: 18px !important; }
.div-detail-banner .product-2 { width: 45%; top: 30%; }
.div-product-item { width: 100%; float: none; margin: 0 0 6% 0; }
.div-product-item .text { margin-top: -3%; }
.div-product-item .text .text-main { font-size: 14px; }
.div-product-item .item-3 { font-size: 12px; }
.div-product-top, .div-product-center, .technology-intelligent .text, .relevant-positions-detail-other .div-content, .responsibility-content .div-content { width: 94%; }
.index-scene, .index-product, .index-project, .index-latest-news, .div-product, .product-advantages, .product-parameters, .recommend-product, .product-application-scenarios, .technology-content, .technology-competitive-advantage, .pageturn, .service-content, .news-content, .honor-content, .partner-content, .service-download-other, .aftersale-content, .contact-content, .recruiting-content, .robot-control-system, .standard-function, .responsibility-content, .demand-feedback { padding: 12% 0; }
.index-scene-item .number-1 strong { font-size: 22px; }
.index-scene-item .title-1 { font-size: 14px; }
.index-project-nav a { width: 100%; padding: 3% 0; border: 1px solid var(--gray2); margin-top: -1px; }
.index-project-nav a:nth-child(1), .index-project-nav a:nth-child(2) { margin-top: 0; }
.index-recommended-right .img::before, .index-project-item .img::before, .index-about-top-right .img::before { right: -40px; }
.competitive-advantage-item { width: 100%; float: none; margin: 0 0 5% 0; }
.application-content-item { width: 100%; float: none; margin: 0 0 5% 0; }
.news-content-items { width: 100%; float: none; margin: 0 0 4% 0; }
.contact-content-bottom .contact-item { width: 100%; float: none; margin: 0 0 4% 0; }
.hardware-warranty-item { width: 100%; float: none; margin: 0 0 5% 0; }
.footer1 { padding-bottom: 20px; }
.footer1 .logo { width: 180px; margin-bottom: 30px; }
.footer1 .info li > p:nth-of-type(2) { font-size: 22px; line-height: 32px; }
.footer1 .info li:nth-of-type(2) > p:nth-of-type(2) { font-size: 14px; line-height: 22px; }
.footer1 .con > p:nth-of-type(1) { font-size: 20px; line-height: 28px; }
.footer1 .con > p:nth-of-type(2) { font-size: 12px; padding-bottom: 20px; }
.footer1 .con li { width: 100%; padding-right: 0; }
.footer1 .con li > a { font-size: 15px; margin-bottom: 10px; }
.footer1 .con .child > a { font-size: 13px; }
.footer1 .icons > a { width: 32px; height: 32px; }
.footer2 { font-size: 11px; }
.footer2 > p > span, .footer2 > p > a { font-size: 11px; }
.parameters-item .icon-1 { width: 40px; height: 40px; }
.parameters-item .text-2 { width: 50%; left: 18%; font-size: 12px; }
.parameters-item.fr .text-2 { left: 18%; }
.product-advantages-item .title-1 { font-size: 16px; }
.product-table table td { height: 40px; font-size: 11px; padding: 4px 6px; }
.product-table-top { min-height: auto; }
.submit-1 { width: 60%; height: 36px; line-height: 36px; font-size: 13px; }
.choice-1 a.cur { height: 36px; line-height: 36px; font-size: 12px; }
.input-1, .textarea-1 { height: 36px; font-size: 12px; }
.bottom-1 { width: 60%; height: 36px; line-height: 36px; font-size: 13px; }
.pageturn a { width: 34px; height: 34px; }
.pageturn a span { line-height: 34px; font-size: 12px; }
.search-1 { padding: 6px 0; font-size: 12px; }
.div-search-content { width: 94%; }
.header-nav-content { margin-top: 50px; padding: 2% 5%; }
.header.scroll-down .header-nav-content { margin-top: 50px; }
.product-nav-item .classname-1 { font-size: 12px; }
.standard-function-item { width: 100%; float: none; margin: 0 0 5% 0; }
.standard-function-list.num5 .standard-function-item:nth-child(4),
.standard-function-list.num5 .standard-function-item:nth-child(5) { width: 100%; }
.div-detail-banner .product-2 { width: 55%; top: 32%; right: 0; }
.product-parameters-bottom .parameters-text-1 { width: 94%; }
.product-parameters-bottom .product-1 img { max-width: 70%; }
.recruiting-detail-top, .recruiting-detail-center { width: 94%; }
.recruiting-item .text-3 li { font-size: 10px; line-height: 18px; padding: 0 0 0 12px; }
.recruiting-item .text-3 li::before { top: 7px; }
.header-nav ul li.language, .header-nav ul li.search { width: 14px; height: 14px; }
}
/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPad x*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPad y */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
.search-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
justify-content: center;
align-items: center;
}
/* 显示状态 */
.search-popup.active {
display: flex;
}
/* 搜索表单 */
.search-form {
background: #fff;
padding: 20px;
border-radius: 8px;
display: flex;
gap: 10px;
}
/* 搜索输入框 */
.search-input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
}
/* 搜索按钮 */
.search-btn {
padding: 8px 16px;
background: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.footer {
background: #000;
background-image: radial-gradient(circle at 30% 40%, #2a2a2a 0%, #0a0a0a 60%, #000000 100%);
color: #fff;
padding-top: 50px;
padding-bottom: 0px;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
.footer a{color:#fff}
.footer .width{max-width: 1400px;}
.footer1{display: flex;border-bottom: 1px solid rgba(255,255,255,.1);padding-bottom: 55px;}
.footer1 .logo{width:258px;margin-bottom: 50px;}
.footer1 .info{width:22.5%}
.footer1 .info li{margin-bottom: 25px;}
.footer1 .info li>p:nth-of-type(1){margin-bottom: 10px;}
.footer1 .info li>p:nth-of-type(2){font-size: 30px;line-height: 40px;}
.footer1 .info li:nth-of-type(2)>p:nth-of-type(2){font-size: 18px;line-height: 28px;}
.footer1 .icons{display: flex;margin-top: 15px;}
.footer1 .icons>a{width:38px;height:38px;border-radius: 50%;background: #1A6D56;margin-right: 10px;transition: .3s;position: relative;}
.footer1 .icons>a:last-child{margin-right: 0;}
.footer1 .icons .icon{max-width: 50%;max-height: 50%;}
.footer1 .icons .qr{position: absolute;top:50px;left: 50%;transform: translateX(-50%);border-radius: 5px;max-width: 130px;max-height: 130px;display: none;}
.footer1 .con{width:77.5%;padding-left: 9%;}
@media (max-width: 1399px) {
.footer1 .con>p:nth-of-type(1){font-size: 26px;line-height: 42px;}
}
@media (min-width: 1400px) and (max-width: 1439px) {
.footer1 .con>p:nth-of-type(1){font-size: 26px;line-height: 42px;}
}
@media (min-width: 1440px) and (max-width: 1918px) {
.footer1 .con>p:nth-of-type(1){font-size: 26px;line-height: 42px;}
}
@media (min-width: 1919px) and (max-width: 2000px) {
.footer1 .con>p:nth-of-type(1){font-size: 32px;line-height: 42px;}
}
@media (min-width: 1922px) {
.footer1 .con>p:nth-of-type(1){font-size: 32px;line-height: 42px;}
}
.footer1 .con>p:nth-of-type(2){font-size: 18px;line-height: 26px;opacity: .5;border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 30px;}
.footer1 .con ul{display: flex;justify-content: space-between;}
.footer1 .con li{padding-right: 20px; margin-top: 10px;}
.footer1 .con li:last-child{padding-right: 0;}
@media (max-width: 1399px) {
.footer1 .con li>a{font-size: 14px;margin-bottom: 25px;}
}
@media (min-width: 1400px) and (max-width: 1439px) {
.footer1 .con li>a{font-size: 14px;margin-bottom: 25px;}
}
@media (min-width: 1440px) and (max-width: 1918px) {
.footer1 .con li>a{font-size: 14px;margin-bottom: 25px;}
}
@media (min-width: 1919px) and (max-width: 2000px) {
.footer1 .con li>a{font-size: 20px;margin-bottom: 25px;}
}
@media (min-width: 1922px) {
.footer1 .con li>a{font-size: 20px;margin-bottom: 25px;}
}
@media (max-width: 1399px) {
.footer1 .con .child>a{opacity: .5;margin-bottom: 15px;font-size: 13px;}
}
@media (min-width: 1400px) and (max-width: 1439px) {
.footer1 .con .child>a{opacity: .5;margin-bottom: 15px;font-size: 14px;}
}
@media (min-width: 1440px) and (max-width: 1918px) {
.footer1 .con .child>a{opacity: .5;margin-bottom: 15px;font-size: 14px;}
}
@media (min-width: 1919px) and (max-width: 2000px) {
.footer1 .con .child>a{opacity: .5;margin-bottom: 15px;font-size: 16px;}
}
@media (min-width: 1922px) {
.footer1 .con .child>a{opacity: .5;margin-bottom: 15px;font-size: 16px;}
}
.child{ margin-top: 10px;}
.footer2{display: flex;justify-content: space-between;}
.footer2>p{display: flex;}
.footer2>p>span{opacity: .3;margin-right: 20px;}
.footer2>p>a{opacity: .3;}
.footer2>a{opacity: .3;}