@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(//font/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(//font/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(//font/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(//font/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(//font/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(//font/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(//font/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"iconfont";font-display:swap;src:url(//font/iconfont.woff2) format('woff2'),url(//font/iconfont-1697159478615.woff) format('woff'),url(//font/iconfont-1697159478615.ttf) format('truetype')}@font-face{font-family:"iconfont";font-display:swap;src:url(//font/iconfontvk.woff2) format('woff2'),url(//font/iconfontvk.woff) format('woff'),url(//font/iconfontvk.ttf) format('truetype')}.iconfont{font-family:"iconfont"!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-pinterest:before{content:"\e640"}.icon-linkedin:before{content:"\e6bf"}.icon-facebook:before{content:"\e685"}.icon-youtube:before{content:"\e612"}.icon-googleplus:before{content:"\e87a"}.icon-instagram:before{content:"\e664"}.icon-tiktok:before{content:"\e9e5"}.icon-twitter:before{content:"\e66a"}.icon-vkontakte:before{content:"\e863"}.icon-vkontakte1:before{content:"\e863"}
:root {
--color: #003894;
--fontcolor: #111111;
--fontsize12: 12px;
--fontsize13: 13px;
--fontsize14: 14px;
--fontsize15: 15px;
--fontsize16: 16px;
--fontsize17: 17px;
--fontsize18: 18px;
--fontsize20: 20px;
--fontsize22: 22px;
--fontsize24: 24px;
--fontsize26: 26px;
--fontsize28: 28px;
--fontsize30: 30px;
--fontbold3: 300;
--fontbold4: 400;
--fontbold5: 500;
--fontbold6: 600;
--fontbold7: 700;
--fontfamily: 'NHaasGroteskTXPro-Rg', 'Arial', 'Helvetica', 'sans-serif', 'Roboto', 'Lato', 'Open Sans', 'Poppins', 'Oswald', sans-serif
}
html,
body,
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
ruby,
samp,
section,
small,
span,
strike,
strong,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
tt,
ul,
var,
video {
padding: 0px;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
html {
margin: 0px;
padding: 0px
}
body {
margin: 0px auto;
padding: 0px;
max-width: 1920px;
font-size: var(--fontsize16);
line-height: 1.5;
font-family: var(--fontfamily)
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
font-weight: var(--fontbold6);
text-transform: capitalize
}
ol,
ul,
li {
list-style: none
}
a,
a:hover,
a:link,
a:visited {
color: var(--fontcolor);
text-decoration: none
}
img {
border: 0px;
max-width: 100%;
max-height: 100%;
height: auto
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote,
q {
quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: "";
content: none
}
input {
-webkit-appearance: none;
border-radius: 0
}
.flex {
display: flex;
justify-content: center;
align-items: center
}
.flex-wrapper,
.list-4 {
display: flex;
flex-wrap: wrap
}
.list-4 {
width: 100%
}
.lang2 {
display: none;
}
.gt_selector {
width: 6.25rem;
height: 1.875rem;
}
.uagb-block-067f95a6.wp-block-uagb-image .wp-block-uagb-image__figure img {
height: auto;
max-width: 100%;
width: 100%;
}
.list-4>li {
width: calc(25% - 15px);
height: 300px;
margin-right: 20px;
box-sizing: border-box;
border: 1px solid #000;
margin-bottom: 20px
}
.list-4>li:nth-of-type(4n) {
margin-right: 0px
}
.list-2 {
display: flex;
flex-wrap: wrap;
width: 100%
}
.list-2>li {
width: calc(50% - 15px);
height: 300px;
margin-right: 30px;
box-sizing: border-box;
border: 1px solid #000;
margin-bottom: 30px
}
.list-2>li:nth-of-type(2n) {
margin-right: 0px
}
.list-1 {
display: flex;
flex-wrap: wrap;
width: 100%
}
.list-1>li {
width: 100%;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
margin-bottom: 30px
}
.list-6 {
width: 100%;
display: flex
}
.list-6>li {
flex: 1;
box-sizing: border-box;
border: 1px solid #000;
margin-right: 20px
}
.list-6>li:after {
display: block;
content: "";
width: 100%;
padding-bottom: 100%
}
.card {
display: flex;
flex-direction: column
}
.common-wrapper {
width: 1600px;
margin: 0px auto
}
.banner {
width: 100%;
position: relative;
min-height: 100px;
background: var(--color, #000000)
}
.banner img {
width: 100%;
display: block
}
.banner-wrap {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1
}
.banner-title {
text-transform: uppercase;
font-size: var(--fontsize28, 28px);
color: #FFF;
margin-bottom: 22px
}
.bPosition {
position: absolute;
bottom: -1px;
right: 0px;
background: #FFF;
min-height: 30px;
line-height: 2;
color: var(--fontcolor);
font-size: var(--fontsize14);
padding: 0px 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden
}
.bPosition a,
.bPosition span {
color: var(--fontcolor)
}
.bPosition h1 {
font-weight: inherit;
font-size: inherit;
position: static;
display: inline
}
.common-main {
padding: 60px 0px 0px
}
.common-main article img {
margin: 0px auto;
max-width: 100%
}
.common-main article p {
margin-bottom: 20px;
line-height: 2
}
.common-left {
flex: 1
}
.head .head-nav #menu-mainnav>li:hover ul {
display: block;
transform: rotateX(0deg);
opacity: 1;
}
@media (min-width:1381px) {
.common-left {
width: calc(100% - 418px)
}
}
.common-right {
width: 350px;
margin-left: 68px
}
.common-pages {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 30px;
width: auto;
color: #3C3C3C;
margin-left: auto
}
.common-pages .tip {
margin-right: 10px
}
.common-pages .tol {
margin-left: 10px
}
.common-pages .tip,
.common-pages .tol {
padding: 0px;
opacity: 1;
border: none;
font-weight: var(--fontbold4);
background: 0 0
}
.common-pages a {
padding: 12px 16px;
display: flex;
justify-content: center;
align-items: center;
color: #3C3C3C;
font-weight: var(--fontbold6);
border-top: 1px solid #D7D7D7;
border-bottom: 1px solid #D7D7D7;
border-left: 1px solid #D7D7D7;
background: #FFF
}
.common-pages a:last-child {
border-right: 1px solid #D7D7D7;
}
.common-pages span:last-child {
border-left: none;
border-right: 1px solid #D7D7D7
}
.common-pages span {
opacity: .8
}
.common-pages .ctxt {
opacity: 1;
background: var(--color);
border-color: var(--color);
color: #FFF
}
.common-pages a:hover {
background-color: var(--color);
border-color: var(--color);
color: #FFF
}
.common-pages .last {
border-right: 1px solid #D7D7D7
}
.side-search {
width: 100%;
background: var(--color);
padding: 20px;
box-sizing: border-box;
position: relative
}
.side-search input {
width: 95%;
height: 40px;
outline: 0;
border: none;
padding-left: 14px
}
.side-search .btn {
position: absolute;
top: 21px;
right: 21px;
width: 40px;
height: 40px;
background: #000;
cursor: pointer
}
.side-search .btn i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF
}
.side>div {
margin-bottom: 30px
}
.side-title {
width: 100%;
height: 50px;
line-height: 50px;
font-size: var(--fontsize22);
font-weight: var(--fontbold6);
background-color: var(--color);
color: #FFF;
padding-left: 20px;
text-transform: capitalize;
box-sizing: border-box;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.side-cate>ul {
padding: 10px 20px;
background: #FFF;
font-size: var(--fontsize16)
}
.side-cate .type-active {
color: var(--color)
}
.side-cate>ul li {
position: relative;
border-bottom: 1px solid #EEE;
line-height: 45px
}
.side-cate>ul li:hover>a {
color: var(--color)
}
.side-cate>ul li a {
width: 100%;
height: 100%;
display: block;
padding-right: 50px;
transition: color .3s;
line-height: 45px;
box-sizing: border-box;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.side-cate>ul>li:last-child {
border: none
}
.side-cate>ul>li i {
position: absolute;
content: "";
top: 0px;
right: 0px;
width: 45px;
height: 45px;
cursor: pointer;
display: block
}
.side-cate>ul>li i:before {
position: absolute;
content: " ";
top: 16px;
right: 8px;
width: 8px;
height: 8px;
border: 2px solid #707070;
border-top: none;
border-left: none;
transform: rotate(45deg);
transition: transform .15s;
cursor: pointer
}
.side-cate>ul>li i.active:before {
transform: rotate(-45deg) rotateX(180deg)
}
.side-cate>ul>li>ul {
display: none
}
.side-cate>ul>li>ul li {
padding-left: 25px;
position: relative
}
.side-cate>ul>li>ul li:last-child {
border: none
}
.side-cate>ul>li>ul li:before {
content: "-";
position: absolute;
left: 15px
}
.side-cate>ul .pro-menu {
display: none
}
.side-pro {
background: #FFF
}
.side-pro li {
margin: 0px 10px;
padding: 10px;
display: flex;
height: 100px;
border-bottom: 1px solid #EEE
}
.side-pro .uagb-toc__list-wrap .uagb-toc__list {
width: 100%;
}
.side-pro .uagb-toc__list-wrap .uagb-toc__list li {
display: table;
height: auto;
}
.side-pro .uagb-toc__list-wrap .uagb-toc__list li a {
text-decoration: none;
}
.side-pro .uagb-toc__list-wrap .uagb-toc__list li ul {}
.side-pro li:last-child {
border: none
}
.side-pro li:hover img {
transform: scale(1.05)
}
.side-pro-img {
width: 40%
}
.side-pro-img img {
transition: transform .2s;
max-height: 100%;
max-width: 100%
}
.side-pro-info {
padding: 0px 0px 0px 10px;
width: 60%;
display: flex;
flex-direction: column;
justify-content: space-around
}
.side-pro-name {
color: #333;
font-size: var(--fontsize14);
display: -webkit-box;
max-height: 36px;
line-height: 18px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden
}
.side-pro-more,
.side-pro-more a {
color: var(--color);
font-size: var(--fontsize14)
}
.side-pro-more:hover {
color: var(--color)
}
.side-pro>a {
width: 100%;
height: 100%;
display: block
}
.proCateTags {
width: 100%;
padding: 0px;
box-sizing: border-box
}
.proCateTags span {
width: 100%;
height: 100%;
display: flex;
display: block
}
.proCateTags a {
background: #FFF;
border: 1px solid #E9E9E9;
padding: 5px;
color: grey;
margin: 5px;
font-size: var(--fontsize14);
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
transition: color .3s, border-color .3s
}
.proCateTags a:hover {
animation-name: hvr-pop;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: 1;
color: var(--color);
border-color: var(--color)
}
.common-link {
width: 100%;
display: flex
}
.common-link>div {
flex: 1;
display: flex;
align-items: center;
height: 50px;
font-size: var(--fontsize18);
padding-left: 20px
}
.common-link>div a {
height: 100%;
line-height: 50px;
max-width: 400px;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.common-link .prev {
background-color: var(--color);
color: var(--fontcolor)
}
.common-link .prev a {
color: var(--fontcolor)
}
.common-link .prev i {
margin-right: 20px
}
.common-link .next {
background-color: #000;
color: var(--color)
}
.common-link .next a {
color: var(--color)
}
.common-link .next i {
margin-left: 20px
}
#toast-container {
padding-top: 100px
}
.top-btn {
display: none;
border-radius: 50%;
width: 40px;
height: 40px;
background: #FFF;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .1);
transition: all .4s ease
}
.top-btn:hover {
cursor: pointer;
background: #CCC
}
.top-btn i {
position: relative;
transform: scale(1.4)
}
.sm-mask {
position: fixed;
width: 100vw;
bottom: 0px;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 8;
display: none;
top: 13.3333333333vw
}
.cu li {
line-height: 2;
font-size: var(--fontsize14);
color: #FFF
}
.cu li i,
.cu li em {
color: var(--color);
margin-right: 10px
}
.singglepic {
width: 550px !important;
height: 550px !important;
background: #FFF;
display: flex;
justify-content: center;
align-content: center;
cursor: pointer
}
.singglepic img {
display: block;
margin: auto
}
.singglepic.on img {
position: static !important;
max-width: 100% !important;
width: auto;
max-height: 100% !important
}
.share-btn-list {
margin: 20px 0px
}
.swiper .swiper-slide {
width: 100%;
display: flex;
justify-content: center
}
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after {
content: ""
}
.swiper .swiper-button-next i,
.swiper .swiper-button-prev i {
transform: scale(2);
color: #FFF
}
.swiper .swiper-pagination-bullet {
background: #FFF
}
.swiper .swiper-pagination-bullet-active {
background: var(--color)
}
.common-tip,
.common-title {
text-align: center;
margin-bottom: 10px
}
.common-title {
font-size: 40px;
text-transform: uppercase;
font-weight: var(--fontbold6)
}
.common-tip {
color: #4c4c4c;
line-height: 2
}
.que {
position: relative;
display: flex;
top: -5px;
z-index: 2
}
.que article {
font-size: var(--fontsize14);
line-height: 1.5;
margin: 20px 0px;
max-width: 448px
}
.que-item {
display: block;
flex: 1;
padding: 70px;
box-sizing: border-box;
position: relative
}
.que-item:first-of-type {
background: #24292f
}
.que-item:nth-of-type(2) {
background: var(--color)
}
.que-item:nth-of-type(2) .more-btn i:after,
.que-item:nth-of-type(2) .more-btn em:after {
border-color: var(--color)
}
.que-item:nth-of-type(3) {
background: #FBFBFB
}
.que-item:nth-of-type(3) .more-btn,
.que-item:nth-of-type(3) .que-num,
.que-item:nth-of-type(3) .que-title,
.que-item:nth-of-type(3) article {
color: #1F2B41
}
.que-item:nth-of-type(3) .more-btn i,
.que-item:nth-of-type(3) .more-btn em {
background: #1F2B41
}
.que-item:nth-of-type(3) .more-btn i::after,
.que-item:nth-of-type(3) .more-btn em::after {
border-color: #FFF
}
.que-item:nth-of-type(3):after,
.que-item:nth-of-type(3):before {
border-color: var(--color)
}
.que-item:before {
bottom: 0px;
transition: opacity .5s ease 0s, transform .5s ease 0s;
border-top: 2px solid #FFF;
border-bottom: 2px solid #FFF;
transform: scaleX(0);
-webkit-transform: scaleX(0)
}
.que-item:after,
.que-item:before {
content: "";
position: absolute;
width: 94%;
height: 92%;
top: 4%;
left: 3%;
opacity: 0;
box-sizing: border-box
}
.que-item:after {
transition: opacity .3s ease 0s, transform .3s ease 0s;
border-left: 2px solid #FFF;
border-right: 2px solid #FFF;
transform: scaleY(0);
-webkit-transform: scaleY(0)
}
.que-item:hover:after,
.que-item:hover:before {
opacity: 1;
transform: scale(1)
}
.que-item:hover .more-btn {
margin-left: 14px
}
.que-num {
font-size: var(--fontsize24);
color: #FFF;
margin-bottom: 20px
}
.que-num,
.que-title {
color: #FFF;
font-weight: var(--fontbold6)
}
.que-title {
font-size: 25px
}
.que .more-btn,
.que article {
color: #FFF
}
.que .more-btn {
font-size: var(--fontsize14);
text-transform: uppercase;
transition: margin .2s
}
.que .more-btn i,
.que .more-btn em {
display: inline-block;
width: 14px;
height: 14px;
background: #FFF;
position: relative;
top: 1.5px;
left: 3px
}
.que .more-btn i::after,
.que .more-btn em::after {
content: "";
display: inline-block;
position: absolute;
top: 4px;
left: 3px;
width: 4px;
height: 4px;
border-right: 2px solid #24292f;
border-bottom: 2px solid #24292f;
transform: rotate(-45deg)
}
.adv {
margin: 50px 0px
}
.advance-list {
margin-top: 30px
}
.advance-list .common-wrapper {
display: flex;
flex-wrap: wrap;
width: 1400px
}
.adv-item {
width: 33%;
box-sizing: border-box;
padding: 70px;
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow .2s
}
.adv-item img {
margin-bottom: 40px;
width: 90px;
height: 90px
}
.adv-item article {
color: #555;
line-height: 1.8;
font-size: var(--fontsize14);
display: -webkit-box;
max-height: 60px;
line-height: 20px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden
}
.adv-item:hover {
box-shadow: 0 1px 10px rgba(34, 25, 25, .15)
}
.adv-t {
font-size: var(--fontsize18);
font-weight: var(--fontbold6);
margin-bottom: 20px
}
.cate-list {
display: flex
}
.cate-item {
width: 25%;
position: relative
}
.cate-item:hover .cate-name,
.cate-item:hover .cate-num {
opacity: 0
}
.cate-item:hover .cate-btn {
opacity: 1;
transform: translateZ(0) scale(1)
}
.cate-name {
font-size: var(--fontsize26);
font-weight: var(--fontbold6);
margin-bottom: 24px
}
.cate-name,
.cate-num {
transition: opacity .3s
}
.cate-num {
font-size: var(--fontsize16)
}
.cate-img {
background-color: #000
}
.cate-img img {
opacity: .28
}
.cate-info {
position: absolute;
transition: top .4s ease;
top: 0px;
left: 0px;
width: 100%;
height: 100%
}
.cate-info a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
width: 100%;
height: 100%;
flex-direction: column
}
.cate-btn {
width: 160px;
height: 45px;
line-height: 45px;
background: var(--color);
border-radius: 3px;
position: absolute;
text-align: center;
transition: opacity .35s, transform .35s;
transform: translate3d(0, 20px, 0) scale(1.1);
opacity: 0;
bottom: 20%
}
.pro {
padding: 50px 0px;
background-color: #F4F4F4
}
.pro-img {
position: relative
}
.pro-img:after {
content: "";
display: block;
padding-top: 100%
}
.pro .img-wrap {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center
}
.pro-item {
width: calc(25% - 41.25px);
margin-right: 55px;
background-color: #FFF;
position: relative;
margin-bottom: 40px;
max-height: 530px;
overflow: hidden;
}
.pro-item:nth-of-type(4n) {
margin-right: 0px
}
.pro-item:hover {
margin-bottom: -18px;
transition: box-shadow .3s;
box-shadow: 0px 2px 10px 0px rgba(174, 175, 177, .55);
z-index: 2
}
.pro-item:hover .pro-name {
color: var(--color)
}
.pro-item .pro-btn {
opacity: 0
}
.pro-item:hover .pro-btn {
height: 50px;
transition: height .3s;
color: #FFF !important;
opacity: 1
}
.pro-info {
padding: 15px;
background-color: #FFF;
border-top: 1px solid #E5E5E5
}
.pro-info article {
color: #666;
font-size: var(--fontsize14);
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2
}
.pro-name {
font-size: var(--fontsize18);
color: #333;
margin-bottom: 15px
}
.pro-btn,
.pro-name {
font-weight: var(--fontbold6);
display: block
}
.pro-btn {
width: 100%;
background-color: var(--color);
text-align: center;
line-height: 50px;
color: transparent;
height: 0px;
text-transform: uppercase;
font-size: var(--fontsize14);
overflow: hidden
}
.pro-btn:hover {
color: #FFF
}
.pro-list {
margin-top: 50px;
display: flex;
flex-wrap: wrap;
align-items: flex-start
}
.pro .more-btn {
width: 200px;
height: 50px;
line-height: 50px;
text-transform: uppercase;
font-weight: var(--fontbold6);
color: #FFF;
display: block;
font-size: var(--fontsize14);
margin: 30px auto 0;
background: #282828;
border-radius: 3px;
text-align: center
}
.about {
width: 100%;
display: flex;
flex-wrap: wrap;
overflow: hidden
}
.about>div {
width: 50%
}
.about-tip {
font-size: var(--fontsize16);
margin-bottom: 20px
}
.about .about-con .about-title {
font-size: 34px;
font-weight: var(--fontbold6);
max-width: 500px;
text-transform: uppercase;
line-height: 1.3
}
.about article {
max-width: 630px;
font-size: var(--fontsize14);
color: #FFF;
margin: 30px 0px;
line-height: 1.8
}
.about-con {
background: url(//image/dot-map.webp) no-repeat;
background-size: cover;
display: flex;
justify-content: center;
color: #FFF;
flex-direction: column;
padding-left: 160px;
box-sizing: border-box
}
.about-img {
position: relative
}
.about-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
width: 73px;
height: 73px;
background: var(--color);
border-radius: 50%
}
.about-icon i,
.about-icon em {
position: relative;
left: 3px;
color: #FFF;
font-size: 45px
}
.about-icon:after {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
content: "";
border-radius: 50%;
display: block;
width: 95px;
height: 95px;
border: 2px solid var(--color)
}
.about-img img {
display: block
}
.about .about-sel {
display: inline-block;
margin-right: 24px
}
.about .about-sel img {
position: relative;
top: 3px
}
.about ul li {
font-size: var(--fontsize14);
margin-bottom: 20px
}
.about .more-btn {
width: 160px;
height: 45px;
line-height: 45px;
font-size: var(--fontsize14);
display: inline-block;
font-weight: var(--fontbold6);
text-align: center;
background: var(--color);
margin-top: 20px;
color: #FFF;
border-radius: 3px
}
.about-list {
padding: 50px 0px;
background: #FBFBFB;
box-sizing: border-box
}
.about-list .common-wrapper {
display: flex
}
.about-ri {
padding-left: 24px
}
.about-item {
width: 25%;
display: flex;
justify-content: center;
align-items: center
}
.about-num {
color: #09162a;
font-weight: var(--fontbold6);
font-size: 42px
}
.about-text {
text-transform: uppercase;
font-size: var(--fontsize14)
}
.about .about-list {
width: 100%
}
.news {
padding: 50px 0px
}
.news-title {
font-size: var(--fontsize20);
font-weight: var(--fontbold6);
color: var(--fontcolor);
margin-bottom: 10px;
display: block;
display: -webkit-box;
max-height: 48px;
line-height: 24px
}
.news article,
.news-title {
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden
}
.news article {
color: #666;
font-size: var(--fontsize14);
display: -webkit-box;
max-height: 100%;
line-height: 26px;
margin-bottom: 30px
}
.news-info {
padding: 20px;
border-top: none
}
.news-more {
text-transform: uppercase;
color: #0D0D0D;
font-size: var(--fontsize14);
padding: 10px 15px;
transition: background-color .3s;
border-radius: 3px
}
.news-more i {
font-size: var(--fontsize12);
margin-left: 12px;
position: relative;
top: -2px
}
.news-item:hover .news-more {
background-color: #111;
color: #FFF
}
.news-item:hover .news-more i {
color: #FFF
}
.news-date {
padding: 10px 22px;
background: var(--color);
color: #FFF;
font-size: var(--fontsize12);
display: inline-block;
position: absolute;
top: 0px;
left: 0px
}
.news-img {
position: relative
}
.news-img img {
display: block;
width: 100%
}
.news-item {
display: flex;
outline: 1px solid #DFDFDF;
box-sizing: border-box
}
.news-item:first-of-type {
width: 30%;
flex-direction: column;
height: 100%
}
.news-item:first-of-type .news-info {
height: 100%
}
.news-item:nth-of-type(2),
.news-item:nth-of-type(3) {
width: 66%;
height: 46%
}
.news-item:nth-of-type(2) .news-img,
.news-item:nth-of-type(3) .news-img {
flex: 1
}
.news-item:nth-of-type(2) .news-img img,
.news-item:nth-of-type(3) .news-img img {
height: 100%;
max-width: none;
object-fit: cover
}
.news-item:nth-of-type(2) .news-info,
.news-item:nth-of-type(3) .news-info {
flex: 1.5
}
.news-list {
margin: 50px 0px 20px;
display: flex;
height: 550px;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between
}
.news-l {
flex: .93;
margin-right: 46px
}
.news-r {
flex: 2;
flex-direction: column;
justify-content: space-between
}
.news-r,
.news-r .news-item {
display: flex
}
.news-r .news-info {
padding: 54px 40px;
border-top: 1px solid #DFDFDF
}
.news-r .news-img {
width: auto;
height: 100%
}
.news-r .news-img img {
height: 100%;
max-width: none
}
.part {
padding: 25px 0px;
border-top: 2px solid #F2F2F2
}
.part-item,
.part-list {
display: flex
}
.part-item {
padding: 25px 0px;
width: 16.66667%;
justify-content: center;
align-items: center;
transition: box-shadow .3s, transform .3s
}
.part-item:hover {
box-shadow: 0 1px 10px rgba(34, 25, 25, .15);
border-radius: 5px;
transform: translateY(-2px)
}
.part-item:hover img {
transform: scale(1.05)
}
.part-item img {
max-width: 100%;
max-height: 100%;
transition: transform .25s
}
#swiper-banner .swiper-button-next,
#swiper-banner .swiper-button-prev {
transition: background .3s ease
}
#swiper-banner .swiper-button-next:hover,
#swiper-banner .swiper-button-prev:hover {
background: var(--color)
}
#swiper-banner .swiper-slide img {
width: 100%
}
.prolist-0,
.prolist-0 .pro-item {
display: flex;
flex-direction: column
}
.prolist-0 .pro-item {
width: 100%;
height: 280px;
margin-right: 0px;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start
}
.prolist-0 .pro-item:hover {
margin-bottom: 40px
}
.prolist-0 .pro-item .pro-btn,
.prolist-0 .pro-item .pro-btn .arr {
line-height: 38px;
height: 38px;
color: #FFF !important;
cursor: pointer
}
.prolist-0 .pro-item .pro-btn {
width: 150px;
order: 1
}
.prolist-0 .pro-img {
width: 280px;
height: 280px;
margin-right: 50px
}
.prolist-0 .pro-img a {
display: flex;
width: 100%;
height: 100%
}
.prolist-0 .pro-img img {
display: block;
margin: auto
}
.prolist-0 .pro-img:after {
display: none
}
.prolist-0 .pro-info {
padding-left: 0px
}
.prolist-0 .pro-info article {
max-width: 800px
}
.prolist-1 {
display: flex;
flex-wrap: wrap
}
.prolist-1 .img-wrap {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center
}
.prolist-1 .pro-item {
width: calc(33% - 36px)
}
.prolist-1 .pro-item:nth-of-type(4n) {
margin-right: 54px
}
.prolist-1 .pro-item:nth-of-type(3n) {
margin-right: 0px
}
.prolist-1 .pro-info {
border-top: 1px solid #E5E5E5
}
.prolist-1 .pro-item:hover .pro-btn .arr {
transition: height .3s;
height: 50px
}
.prolist-1 .pro-btn {
position: relative;
cursor: pointer
}
.prolist-1 .pro-btn .arr {
position: absolute;
top: 0px;
right: 0px;
height: 0px;
width: 50px;
background: #000;
color: #FFF
}
.pro-item.checked {
outline: 2px solid var(--color)
}
.pro-main {
padding: 40px 0px 60px;
background: #FBFBFB
}
.pro-main .common-wrapper {
display: flex
}
.prolist-top {
display: flex;
justify-content: space-between
}
.prolist-top h1 {
height: 50px;
line-height: 50px;
font-size: var(--fontsize26);
font-weight: var(--fontbold6);
padding-left: 10px;
border-left: 4px solid var(--color);
max-width: 50%;
border-bottom: 1px solid #CCC;
overflow: hidden;
margin-bottom: 30px
}
.bottom-wrap {
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
border-radius: 5px;
padding: 10px;
line-height: 1.7em;
color: #2B2B2B;
background-color: #FFF
}
.content-list1 {
display: flex;
flex-wrap: wrap
}
.content-item {
width: calc(25% - 27.75px);
margin: 0px 37px 50px 0px
}
@keyframes hvr-wobble-horizontal {
16.65% {
transform: translateX(8px)
}
33.3% {
transform: translateX(-6px)
}
49.95% {
transform: translateX(4px)
}
66.6% {
transform: translateX(-2px)
}
83.25% {
transform: translateX(1px)
}
to {
transform: translateX(0)
}
}
.content-item:nth-of-type(4n) {
margin-right: 0px
}
.content-item:hover .content-more {
background: var(--color);
color: #FFF;
transform: translateX(0)
}
.content-title {
font-size: var(--fontsize18);
color: var(--fontcolor);
font-weight: var(--fontbold6)
}
.content-info {
padding-top: 15px
}
.content-info article {
color: #666;
font-size: var(--fontsize14);
margin-top: 15px;
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden
}
.content-more {
display: inline-block;
margin-top: 25px;
width: 150px;
height: 45px;
line-height: 45px;
text-align: center;
transform: translateX(-20px);
transition: transform .3s;
border-radius: 3px
}
.content-more i {
margin-left: 12px
}
.content-img {
position: relative
}
.content-img img {
width: 100%
}
.content-date {
position: absolute;
width: 116px;
height: 31px;
line-height: 31px;
text-align: center;
color: #FFF;
left: 10px;
top: 0px;
transform: translateY(-50%);
font-size: var(--fontsize12);
background: var(--color)
}
.content-bottom .common-pages {
justify-content: center
}
.content-main {
padding: 50px 0px;
background: #FBFBFB
}
.content-main .common-c-title {
margin: 10px 0px 30px;
color: var(--fontcolor);
font-size: var(--fontsize26);
position: relative
}
.content-main .common-c-title:after {
position: absolute;
top: 125%;
content: "";
display: block;
width: 100px;
height: 2px;
background: var(--color)
}
.content-main .content-top {
margin: 10px 0px
}
.content-main .content-c-date {
position: relative;
margin-right: 15px
}
.content-main .content-c-date:after {
content: "";
display: block;
position: absolute;
right: -10px;
height: 19px;
background: #D0D0D0;
width: 2px;
top: 0px
}
.content-main .content-c-date,
.content-main .content-c-view {
color: var(--color);
font-size: var(--fontsize14)
}
.content-main .content-c-view i,
.content-main .content-c-view em {
margin-right: 5px;
color: var(--fontcolor)
}
.content-main .common-content article p {
color: var(--fontcolor);
font-size: var(--fontsize16);
line-height: 1.8
}
.content-main .content-c-tit {
font-size: var(--fontsize26);
font-weight: var(--fontbold6);
margin: 30px 0px 10px
}
.link-wrap {
margin-top: 30px;
width: 100%;
display: flex;
height: 70px;
justify-content: space-between
}
.link-wrap .link-l,
.link-wrap .link-r {
width: 47%;
height: 100%;
background: #FBFBFB;
display: flex;
align-items: center;
box-sizing: border-box;
line-height: 1.3;
position: relative;
overflow: hidden
}
.link-wrap .link-l:after,
.link-wrap .link-r:after {
content: "";
position: absolute;
display: block;
border-bottom: 50px solid var(--color);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0px;
width: 120px
}
.link-wrap .link-sign {
position: absolute;
font-size: var(--fontsize14);
color: #FFF
}
.link-wrap .link-sign a {
color: #FFF
}
.link-wrap .link-l {
padding: 0px 78px 0px 130px
}
.link-wrap .link-l .link-sign {
left: 12px;
z-index: 1
}
.link-wrap .link-l:after {
left: -30px
}
.link-wrap .link-r {
padding: 0px 130px 0px 78px
}
.link-wrap .link-r .link-sign {
right: 12px;
z-index: 1
}
.link-wrap .link-r:after {
right: -30px
}
.contant-c-main .common-wrapper {
display: flex
}
.content-list0 {
display: flex;
flex-direction: column
}
.content-list0 .content-item {
width: 100%;
margin-bottom: 50px;
height: 230px;
display: flex
}
.content-list0 .content-img {
height: 100%
}
.content-list0 .content-img img {
width: auto;
height: 100%;
max-width: none
}
.content-list0 .content-info {
width: 100%;
padding: 30px 30px 30px 50px;
border: 1px solid #F1F1F1
}
.content-list0 .content-info article {
max-width: 800px
}
.content-list1 .content-title {
display: -webkit-box;
line-height: 1.5;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden
}
.content-list1 .content-info {
display: flex;
flex-direction: column
}
.content-list1 .content-more {
margin-top: 10px
}
.pro-c-main {
padding: 50px 0px;
background: #F8F8F8
}
.pro-c-top {
display: flex
}
.pro-c-info {
padding: 24px 200px 0px 55px;
box-sizing: border-box;
flex: 1;
margin-left: 50px;
background-color: #FFF
}
.pro-c-name {
color: var(--fontcolor);
font-size: var(--fontsize26);
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden
}
.pro-c-con {
color: #2B2B2B;
padding: 15px 0px;
line-height: 1.8;
border-top: 1px solid #DCDCDC;
border-bottom: 1px solid #DCDCDC;
margin: 14px 0px
}
.pro-c-main article {
padding: 0px 1.25rem
}
.pro-c-main article p,
.pro-c-main article li {
font-size: var(--fontsize18);
color: var(--fontcolor);
line-height: 1.7
}
.pro-c-main article p.productsTags a {
text-decoration: underline;
text-transform: lowercase
}
.pro-c-main article p.productsTags a:hover {
color: var(--color)
}
.pro-c-main .pro-rel-item {
flex-direction: column;
width: auto
}
.pro-c-main .pro-rel-item .img-wrap {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center
}
.pro-c-main .pro-rel-item .pro-info {
border-top: 1px solid #E5E5E5
}
.pro-c-art {
background: #FFF;
margin-top: 54px;
padding-bottom: 50px
}
.pro-c-art .link-wrap {
padding: 0px 1.25rem;
box-sizing: border-box
}
.pro-c-art .link-wrap .link-l:after,
.pro-c-art .link-wrap .link-r:after {
width: 135px
}
.pro-c-art .content-c-tit {
font-size: var(--fontsize24);
font-weight: var(--fontbold6);
margin: 30px 0px 0px
}
.pro-c-art .inquiry {
padding: 0px 1.25rem;
box-sizing: border-box
}
.pro-c-art article table {
margin: 10px 0px;
border-collapse: collapse;
overflow-x: scroll;
}
.pro-c-art article .table td {
padding: 5px;
border: 1px solid #CCC
}
.pro-art-tit {
width: 100%;
height: 60px;
line-height: 60px;
margin-bottom: 20px;
text-align: center;
color: var(--fontcolor);
font-size: var(--fontsize24);
font-weight: var(--fontbold6);
border-bottom: 1px solid #DCDCDC
}
.btn-list {
display: flex;
flex-wrap: wrap;
max-width: 360px;
justify-content: space-between
}
.addToCart,
.btn-list .btn {
cursor: pointer
}
.addToCart span {
display: inline-block;
background: url(//image/addtocart.webp) no-repeat right center;
background-size: 20px;
padding-right: 26px
}
.btn-list>* {
margin-bottom: 20px
}
.addToCart,
.btn-list .LayImAhrefNode,
.btn-list .btn,
.pdown1,
.pdown2,
.pdown3 {
width: 166px;
height: 50px;
line-height: 50px;
text-align: center;
background: #292929;
color: #FFF;
border-radius: 3px
}
.pdown1 a,
.pdown2 a,
.pdown3 a {
width: 100%;
height: 100%;
display: block;
color: #FFF
}
.hov-c {
transition: background .3s
}
.hov-c:hover {
background: var(--color)
}
.pro-rel-top {
margin: 48px 0px;
display: flex
}
.pro-rel-top .pro-rel-btn {
min-width: 50px;
display: flex;
justify-content: space-between;
align-items: center
}
.pro-rel-top .pro-rel-btn .rel-btn-l,
.pro-rel-top .pro-rel-btn .rel-btn-r {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
line-height: 100%;
cursor: pointer
}
.pro-rel-top .pro-rel-btn .rel-btn-l:active,
.pro-rel-top .pro-rel-btn .rel-btn-r:active {
transform: scale(.7)
}
.pro-rel-top .pro-rel-btn i {
font-weight: var(--fontbold6);
transform: scale(1.3)
}
.pro-rel-top .line {
position: relative;
flex: 1;
height: 1px;
background: #DCDCDC;
top: 15px;
margin: 0px 20px
}
.pro-rel-top .pro-rel-tit {
font-size: var(--fontsize24);
font-weight: var(--fontbold6);
color: var(--fontcolor)
}
.pro-rel-item .pro-info article {
padding: 0px
}
.pro-rel-img {
width: 100%;
background: #FFF;
position: relative
}
.pro-rel-img:after {
content: "";
display: block;
padding-bottom: 100%
}
.pro-rel-img a {
position: absolute;
display: block;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center
}
.contact-main,
.feedback-main {
background: #FBFBFB;
padding-bottom: 50px
}
.contact-box {
margin: 0px auto;
width: 100%;
height: 600px;
background-color: #FFF;
z-index: 1;
display: flex
}
.contact-box .box-l {
width: 100%;
padding: 40px 50px 56px 100px
}
.contact-box .box-r {
width: 190px;
height: 100%;
background-color: var(--color);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer
}
.contact-box .box-t {
display: block;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-transform: uppercase;
font-size: var(--fontsize26);
font-weight: var(--fontbold6);
color: #FFF;
width: 28px
}
.contact-box .box-icon {
width: 64px;
height: 64px;
background-color: #FFF;
position: relative;
border-radius: 50%;
margin-top: 33px
}
.contact-box .box-icon em,
.contact-box .box-icon i,
.contact-box .box-icon em {
color: var(--color);
position: absolute;
top: 45%;
font-weight: var(--fontbold6);
left: 50%;
font-size: var(--fontsize30, 30px);
transform: translate(-50%, -50%)
}
.contact-box .title-s {
color: var(--color);
line-height: 1
}
.contact-box .title-m {
font-size: 40px;
color: #0a0a0a;
font-weight: var(--fontbold6);
line-height: 1;
text-transform: uppercase
}
.contact-box .feedback-tips p {
color: #828282;
font-size: var(--fontsize16);
line-height: 1.5
}
.contact-wrap {
position: relative;
margin: 210px 0px 50px
}
.contact-list {
margin: 0px auto;
width: 100%;
height: 170px;
z-index: 1;
background-color: #F2F6F7;
display: flex
}
.contact-item {
width: 25%;
height: 100%
}
.contact-icon,
.contact-item {
display: flex;
justify-content: center;
align-items: center
}
.contact-icon {
width: 55px;
height: 55px;
background-color: var(--color)
}
.contact-info {
min-height: 55px;
padding-left: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around
}
.contact-t {
text-transform: uppercase;
color: var(--fontcolor);
font-weight: var(--fontbold6)
}
.contact-c {
color: #666;
font-size: var(--fontsize16)
}
#gmap {
width: 100%;
max-width: 1920px;
height: 440px;
position: absolute;
left: 0px;
top: 0px
}
.common-main {
position: relative
}
.about-main {
background-color: #F2F6F7
}
.feedback-main .contact-box {
margin-top: 50px;
height: auto
}
.feedback-main .contact-box p {
margin-bottom: 20px
}
.document-main {
padding: 40px 0px 60px
}
.document-main .common-wrapper {
display: flex
}
.document-main .video-list {
width: 100%;
display: flex;
flex-wrap: wrap
}
.document-main .video-list .video-img {
border-radius: 5px
}
.document-main .video-list .video-img a {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
overflow: hidden
}
.document-main .video-list .video-img img {
width: 100%;
display: block
}
.document-main .video-list .video-name {
color: #333;
margin-bottom: 12px
}
.document-main .video-list .video-info {
padding-top: 24px
}
.document-main .video-list .video-in {
font-size: var(--fontsize12);
color: #666
}
.document-main .video-list>li {
width: calc(33% - 36px);
margin-right: 55px;
margin-bottom: 30px
}
.document-main .video-list>li:nth-of-type(3n) {
margin-right: 0px
}
.document-main .video-content video {
width: 70%;
height: auto
}
.document-main .video-content p {
font-size: var(--fontsize20);
color: #333;
margin: 10px 0px
}
.document-main .download-list {
position: relative;
top: -40px
}
.document-main .download-item {
padding: 100px 0px
}
.document-main .download-item:nth-child(odd) {
background: #FFF
}
.document-main .download-item:nth-child(2n) {
background: #FBFBFB
}
.document-main .download-title {
font-size: var(--fontsize22);
font-weight: var(--fontbold6);
margin-bottom: 30px;
color: var(--fontcolor)
}
.document-main .download-title i {
color: var(--color);
margin-left: 20px
}
.document-main .download-info {
color: #8e8e8e;
line-height: 1.8
}
.document-main .project-list {
width: 100%;
display: flex;
flex-wrap: wrap
}
.document-main .project-item {
width: calc(25% - 30px);
margin-right: 40px
}
.document-main .project-item:nth-of-type(4n) {
margin-right: 0px
}
.document-main .project-item:hover .info-r {
background: var(--color)
}
.document-main .project-info {
padding: 30px 20px;
width: 90%;
display: flex;
justify-content: space-between;
margin: 0px auto;
border: 1px solid #e2e2e2;
box-sizing: border-box;
position: relative;
top: -34px;
background: #FFF
}
.document-main .project-info .info-r {
width: 40px;
height: 40px;
position: relative;
background: #24292f;
transition: background .3s
}
.document-main .project-info .info-r i {
position: absolute;
top: 50%;
left: 50%;
font-weight: var(--fontbold6);
transform: translate(-50%, -50%);
color: #FFF
}
.document-main .project-info .info-l p:nth-child(2) {
color: var(--color);
margin-top: 10px;
font-size: var(--fontsize14);
text-transform: uppercase
}
.document-main .project-img {
position: relative
}
.document-main .project-img:after {
content: "";
display: block;
padding-bottom: 100%
}
.document-main .img-wrap {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center
}
.document-main .faq-list {
display: flex;
flex-wrap: wrap
}
.document-main .faq-list .faq-item {
width: calc(50% - 25px);
margin-bottom: 40px;
margin-right: 50px
}
.document-main .faq-list .faq-item:nth-of-type(2n) {
margin-right: 0px
}
.document-main .faq-list .faq-title {
padding: 23px 20px 23px 44px;
border: 1px solid #E9E9E9;
cursor: pointer;
font-weight: var(--fontbold6);
line-height: 1.3;
position: relative
}
.document-main .faq-list .faq-title:after {
border: 6px solid transparent;
border-left: 7px solid #47494b;
width: 0px;
height: 0px;
position: absolute;
top: 30px;
right: 10px;
content: "";
transform-origin: center center;
transform: rotate(90deg)
}
.document-main .faq-list .faq-title:hover {
background: var(--color);
color: #FFF
}
.document-main .faq-list .faq-title:hover:after {
border-left: 7px solid #FFF
}
.document-main .faq-list .faq-title.active {
background: var(--color);
color: #FFF
}
.document-main .faq-list .faq-title.active:after {
transform: rotate(-90deg);
top: 23px;
border-left: 7px solid #FFF
}
.document-main .faq-list .faq-con {
padding: 34px 40px;
font-size: var(--fontsize14);
color: #898989;
line-height: 1.5;
background: #FBFBFB;
display: none
}
@keyframes hvr-icon-wobble-horizontal {
16.65% {
transform: translateX(6px)
}
33.3% {
transform: translateX(-5px)
}
49.95% {
transform: translateX(4px)
}
66.6% {
transform: translateX(-2px)
}
83.25% {
transform: translateX(1px)
}
to {
transform: translateX(0)
}
}
.hvr-icon-wobble-horizontal {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
transition-duration: .3s
}
.hvr-icon-wobble-horizontal .hvr-icon {
transform: translateZ(0)
}
.hvr-icon-wobble-horizontal:active .hvr-icon,
.hvr-icon-wobble-horizontal:focus .hvr-icon,
.hvr-icon-wobble-horizontal:hover .hvr-icon {
animation-name: hvr-icon-wobble-horizontal;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1
}
@keyframes hvr-pop {
50% {
transform: scale(1.05)
}
}
.hvr-pop {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent
}
.hvr-pop:active,
.hvr-pop:focus,
.hvr-pop:hover {
animation-name: hvr-pop;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: 1
}
.hvr-bounce-to-right,
.hvr-bounce-to-right-y {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
transition-property: color;
transition-duration: .5s
}
.hvr-bounce-to-right-y:before,
.hvr-bounce-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: var(--color);
transform: scaleX(0);
transform-origin: 0 50%;
transition-property: transform;
transition-duration: .5s;
transition-timing-function: ease-out;
border-radius: 3px
}
.hvr-bounce-to-right-y:hover,
.hvr-bounce-to-right:active,
.hvr-bounce-to-right:focus,
.hvr-bounce-to-right:hover {
color: #FFF
}
.hvr-bounce-to-right-y:hover:before,
.hvr-bounce-to-right:active:before,
.hvr-bounce-to-right:focus:before,
.hvr-bounce-to-right:hover:before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(.52, 1.64, .37, .66)
}
@keyframes hvr-bob {
0% {
transform: translateY(-8px)
}
50% {
transform: translateY(-4px)
}
to {
transform: translateY(-8px)
}
}
@keyframes hvr-bob-float {
to {
transform: translateY(-8px)
}
}
.hvr-bob {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent
}
.hvr-bob:active,
.hvr-bob:focus,
.hvr-bob:hover {
animation-name: hvr-bob-float, hvr-bob;
animation-duration: .3s, 1.5s;
animation-delay: 0s, .3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate
}
@keyframes hvr-wobble-vertical {
16.65% {
transform: translateY(8px)
}
33.3% {
transform: translateY(-6px)
}
49.95% {
transform: translateY(4px)
}
66.6% {
transform: translateY(-2px)
}
83.25% {
transform: translateY(1px)
}
to {
transform: translateY(0)
}
}
.hvr-wobble-vertical {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent
}
.hvr-wobble-vertical:active,
.hvr-wobble-vertical:focus,
.hvr-wobble-vertical:hover {
animation-name: hvr-wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1
}
.head {
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100px;
box-sizing: border-box;
z-index: 1002;
position: relative;
background-color: #FFF;
transition-property: height;
transition-duration: .2s;
transition-timing-function: ease;
max-width: 1920px;
margin: 0px auto
}
.head-wrapper {
width: 1600px;
margin: 0px auto;
display: flex;
justify-content: center;
align-items: center
}
.head-logo {
min-width: 140px;
height: 100%;
margin-right: 50px
}
.head-nav {
height: 100%;
width: 100%
}
.head-nav>ul {
height: 100%;
display: flex;
justify-content: flex-end
}
.head-nav>ul>li {
position: relative;
height: 100%
}
.head-nav>ul>li>a {
transition: color .3s ease;
transition: background-color .3s ease;
padding: 0px 18px;
height: 100%;
display: flex;
font-weight: var(--fontbold6);
align-items: center;
justify-content: center;
text-transform: uppercase;
white-space: nowrap
}
.head-nav>ul>li .inmenu_1,
.head-nav>ul>li:hover>a {
color: var(--color)
}
.head-nav>ul>li:hover>ul {
opacity: 1;
}
.head-nav>ul .submenu {
background-color: #FFF;
position: absolute;
transform-origin: top;
top: 100%;
transition: all .4s ease;
transform: rotateX(90deg);
opacity: 0;
z-index: 2;
display: none
}
.head-nav>ul>li:hover .submenu {
background-color: #FFF;
position: absolute;
transform-origin: top;
top: 100%;
transition: all .4s ease;
transform: none;
opacity: 1;
z-index: 2;
}
.head-nav>ul .submenu a {
display: block;
padding: 0px 20px;
line-height: 40px;
white-space: nowrap;
transition: all .4s ease
}
.head-nav>ul .submenu a:hover {
background-color: var(--color);
color: #FFF
}
.head-nav>ul .more {
display: none
}
.head-top {
z-index: 9999;
width: 100%;
height: 44px;
background: #ff9d46;
font-size: var(--fontsize14)
}
.head-top .common-wrapper {
height: 100%;
display: flex;
justify-content: space-between
}
.head-top .top-left {
height: 100%;
line-height: 40px
}
.head-top .top-right {
line-height: 40px
}
.head-top .top-right,
.head-top .top-right .search-wrap {
height: 100%;
display: flex;
align-items: center
}
.head-top .top-right .search-wrap:hover input {
padding-left: 14px;
width: 200px
}
.head-top .top-right input {
padding: 0px;
width: 0px;
border: none;
height: 75%;
outline: 0;
border-radius: 3px;
transition: width .3s
}
.head-top .top-right.active input {
padding-left: 14px;
width: 200px
}
.head-top .icon-email,
.head-top .icon-phone1 {
opacity: .8;
position: relative;
top: 1px
}
.head-top .search-btn {
padding: 0px 20px;
border-left: 1px solid #505050;
border-right: 1px solid #505050;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin-left: 10px
}
.head-contact {
display: flex;
min-width: 160px;
margin-left: 50px
}
.head-contact .phone {
margin-top: 10px;
white-space: nowrap
}
.head-contact p:first-of-type {
font-size: var(--fontsize12);
font-weight: var(--fontbold6)
}
.head-contact p:nth-of-type(2) {
font-size: var(--fontsize16)
}
.head-contact img {
width: 30px;
height: 30px;
position: relative;
top: 5px;
left: -20px
}
.head.active {
position: fixed;
top: 0px;
height: 70px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1)
}
.nav-btn {
display: none;
position: relative;
margin: auto 0px;
height: 4.2666666667vw;
width: 6vw
}
.nav-btn span {
border-radius: 2px;
position: absolute;
display: block;
width: 8vw;
height: .6666666667vw;
background-color: #000;
transition: top .2s .2s, transform .2s, background .2s, opacity 0s .2s
}
.nav-btn span:first-child {
top: .1vw
}
.nav-btn span:nth-child(2) {
top: 2.6333333333vw
}
.nav-btn span:nth-child(3) {
top: 4.7666666667vw
}
.toggle-animate span:first-of-type {
top: 1.6vw;
transform: rotate(45deg);
transition: top .2s, transform .2s .2s, background .2s
}
.toggle-animate span:nth-of-type(2) {
opacity: 0;
transition: opacity .2s
}
.toggle-animate span:nth-of-type(3) {
top: 1.6vw;
transform: rotate(-45deg);
transition: bottom .2s, transform .2s .2s, background .2s
}
.foot {
width: 100%
}
.foot .common-wrapper {
display: flex;
align-items: center
}
.foot .text {
width: 300px;
line-height: 60px
}
.mobile-bottom {
display: none;
z-index: 500;
width: 100%;
left: 0px;
bottom: 0px;
background: #FCFCFCFB;
justify-content: space-evenly;
box-shadow: 1px 2px 10px rgba(0, 0, 0, .1)
}
.foot-list {
background-color: #20232c
}
.foot-l {
width: 100%;
height: 100%;
display: flex
}
.foot-l .foot-u {
margin-top: 30px
}
.foot-l .foot-u .foot-cate a:before {
position: relative;
top: -2px;
content: "-";
margin-right: 10px
}
.foot-l .foot-u .foot-cate a:hover {
color: #FFF;
opacity: 1;
padding-left: 10px
}
.foot-l .foot-u li {
margin: 20px 0px
}
.foot-l .foot-u li a {
transition: all .3s ease;
color: #EEE;
opacity: .6;
font-size: var(--fontsize14);
line-height: 1.3
}
.foot-l .lfr,
.foot-l .lfr ul {
display: flex
}
@keyframes hvr-pulse-grow {
to {
transform: scale(1.1)
}
}
.foot-l .lfr li {
margin-right: 10px;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent
}
.foot-l .lfr li:last-child i,
.foot-l .lfr li:last-child em {
font-size: var(--fontsize24)
}
.foot-l .lfr li:first-child i,
.foot-l .lfr li:first-child em {
font-size: var(--fontsize22)
}
.foot-l .lfr li:active,
.foot-l .lfr li:focus,
.foot-l .lfr li:hover {
animation-name: hvr-pulse-grow;
animation-duration: .28s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate
}
.foot-l .lfr a {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center
}
.foot-l .lfr i,
.foot-l .lfr em {
color: #FFF;
font-size: var(--fontsize18)
}
.foot-l .lfr i:hover,
.foot-l .lfr em:hover {
color: var(--color);
font-size: var(--fontsize18)
}
.foot-item {
padding-top: 50px;
height: 100%;
width: 25%
}
.foot-title {
font-size: var(--fontsize20);
font-weight: var(--fontbold6);
color: #F3F3F3;
line-height: 1.5;
text-transform: uppercase;
position: relative
}
.foot-title:after {
content: "";
position: absolute;
width: 54px;
height: 3px;
background: var(--color);
top: 120%;
display: block;
left: 0px
}
.foot-cate,
.foot-nav {
padding-left: 100px
}
.foot-cate ul,
.foot-nav ul {
margin-top: 30px
}
.foot-cate ul li,
.foot-nav ul li {
margin: 10px 0px
}
.foot-cate ul li a,
.foot-nav ul li a {
transition: all .3s ease;
color: #FFF;
font-size: var(--fontsize14);
line-height: 2
}
.foot-cate ul li a:before {
position: relative;
top: -2px;
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
margin-right: 10px;
transform: rotate(-45deg)
}
.foot-cate ul li a:hover {
color: #FFF;
opacity: 1;
padding-left: 10px
}
.foot-right p a {
margin-left: 10px;
color: #D1D1D1
}
.foot-right {
width: 100%;
height: 60px;
background-color: #20232c;
color: #D1D1D1;
border-top: 1px solid #44464e
}
.foot-right .common-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%
}
.foot-right ul {
display: flex
}
.foot-right ul a {
padding: 0px 10px;
font-size: var(--fontsize14);
color: #D1D1D1;
text-transform: capitalize;
position: relative;
transition: color .3s ease
}
.foot-right ul a:after {
content: "";
position: absolute;
display: block;
right: 0px;
height: 10px;
width: 1px;
top: 6px;
background: #FFF;
opacity: .1
}
.foot-right ul a:hover {
color: #FFF
}
.foot-right ul li:last-child a:after {
display: none
}
.foot-intro {
color: #FFF;
font-size: var(--fontsize14);
line-height: 1.7;
margin: 20px 0px
}
.foot-intro+p {
margin-bottom: 20px;
color: #FFF
}
.foot-letter .send-letter {
margin-top: 30px
}
.foot-letter .send-letter p {
width: 250px;
font-size: var(--fontsize14);
color: #FFF;
line-height: 2
}
.foot-letter .send-letter input {
color: #FFF;
transition: border .3s ease
}
.foot-letter .send-letter input:focus {
outline: 0;
border: 1px solid var(--color)
}
.foot-letter .send-letter #nf-form-2-cont #nf-field-9,
.foot-letter .send-letter #nf-form-2-cont #nf-field-10,
.foot-letter .send-letter #nf-form-2-cont #nf-field-11 {
height: 40px;
background: #20232c;
border: 1px solid #505050;
box-sizing: border-box;
width: 280px;
padding-left: 14px
}
.foot-letter .send-letter #nf-form-2-cont #nf-field-9::-webkit-input-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-10::-webkit-input-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-11::-webkit-input-placeholder {
color: #898989;
font-size: var(--fontsize14)
}
.foot-letter .send-letter #nf-form-2-cont #nf-field-9:-moz-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-10:-moz-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-11:-moz-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-9::-moz-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-10::-moz-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-11::-moz-placeholder {
color: #898989;
font-size: var(--fontsize14)
}
.foot-letter .send-letter #nf-form-2-cont #nf-field-9:-ms-input-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-10:-ms-input-placeholder,
.foot-letter .send-letter #nf-form-2-cont #nf-field-11:-ms-input-placeholder {
color: #898989;
font-size: var(--fontsize14)
}
.foot-letter .send-letter #nf-field-8 {
width: 150px;
height: 40px;
background: var(--color);
box-sizing: border-box;
color: #FFF;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer
}
.foot-letter .send-letter #nf-field-8 i {
margin-left: 14px
}
.swiper-slide {
display: flex;
justify-content: center
}
.swiper-lazy-preloader {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
border: 2px solid #000 !important;
border-top-color: transparent !important
}
#tabs .tabs-item {
display: none
}
#tabs .current {
background-color: var(--color)
}
.tabs-top {
width: 100%;
display: flex
}
.tabs-title {
width: 25%;
height: 65px;
background: #111;
color: #FFF;
line-height: 65px;
text-align: center;
box-sizing: border-box;
border-right: 2px solid #FFF;
cursor: pointer;
transition: background-color .3s
}
.tabs-title:nth-of-type(4n) {
border-right: none
}
.tab-content {
border: 2px solid #E9E9E9;
padding: 48px 60px 18px
}
.preview-container {
position: relative;
width: 450px;
background: #FFF;
padding-bottom: 1px
}
.preview-container .small-box {
position: relative;
max-width: 450px;
width: 100%;
height: 450px;
border-bottom: 1px solid #EEE;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: #FFF;
cursor: move
}
.preview-container .small-box img {
border: 0px;
max-width: 100%;
max-height: 100%;
height: auto
}
.preview-container .small-box .hover {
position: absolute;
width: 180px;
height: 180px;
background-color: hsla(0, 0%, 80%, .6);
border: 1px solid #EEE;
display: none
}
.preview-container .thumbnail-box {
margin: 20px 0px;
position: relative;
width: 100%;
box-sizing: border-box;
background: #FFF
}
.preview-container .thumbnail-box .list {
width: 390px;
margin: 0px auto;
position: relative
}
.preview-container .thumbnail-box .list ul {
width: 10000px;
display: flex;
padding: 2px 0px
}
.preview-container .thumbnail-box .list ul .item {
width: 58px;
height: 58px;
display: flex;
justify-content: center;
align-items: center;
margin: 0px 10px;
box-sizing: border-box;
overflow: hidden;
border: 1px solid #CCC
}
.preview-container .thumbnail-box .list ul .item:hover {
cursor: pointer
}
.preview-container .thumbnail-box .list ul .item img {
max-width: 100%;
max-height: 100%;
display: block
}
.preview-container .thumbnail-box .list ul .item-cur {
border: none;
outline: 2px solid var(--color)
}
.preview-container .thumbnail-box .list .banner-page {
display: none;
justify-content: center;
align-items: center;
position: absolute;
height: 6.6666666667vw;
width: 13.3333333333vw;
border-radius: 5.3333333333vw;
background: rgba(0, 0, 0, .8);
bottom: 1.3333333333vw;
right: 1.3333333333vw;
z-index: 999
}
.preview-container .thumbnail-box .list .banner-page span {
color: #FFF;
font-size: 4vw
}
.preview-container .thumbnail-box .btn {
position: absolute;
top: 50%;
width: 22px;
height: 32px;
margin-top: -10px
}
.preview-container .thumbnail-box .btn-prev {
left: 0px;
background: url(//image/btn_prev.webp) no-repeat;
background-position: 10px 0px;
background-size: 10px
}
.preview-container .thumbnail-box .btn-next {
right: 0px;
background: url(//image/btn_next.webp) no-repeat;
background-size: 10px
}
.preview-container .thumbnail-box .btn_prev_disabled {
background: url(//image/btn_prev_disabled.webp) no-repeat;
background-position: 10px 0px;
background-size: 10px;
cursor: not-allowed
}
.preview-container .thumbnail-box .btn_next_disabled {
background: url(//image/btn_next_disabled.webp) no-repeat;
background-size: 10px;
cursor: not-allowed
}
.preview-container .big-box {
display: none;
overflow: hidden;
top: 0px;
left: 449px;
border: 1px solid #EEE;
position: absolute;
width: 550px;
height: 553.5px;
box-sizing: border-box;
background: #FFF;
z-index: 20
}
.preview-container .big-box img {
display: block;
max-width: none;
max-height: none;
width: 130%
}
.preview-container .big-box.act {
display: none !important
}
@media screen and (max-width:768px) {
.inquiry-form {
flex-direction: column
}
.inquiry-form .form-l,
.inquiry-form .form-r {
width: 100%
}
.form-l input {
margin-bottom: 4vw
}
.inquiry-form input {
width: 100%
}
}
.compare-action {
position: relative;
height: 37px;
margin-top: 15px;
left: -20px;
display: flex;
align-items: center;
cursor: pointer
}
.compare-action span {
display: inline-block;
color: var(--fontcolor);
-webkit-user-select: none;
-ms-user-select: none;
user-select: none
}
.compare-action .compare-action-check+label {
width: 16px;
height: 16px;
content: " ";
border: 1px solid #000;
border-radius: 1px;
margin-right: 10px;
cursor: pointer
}
.compare-action .compare-action-check:checked+label:before {
font-size: var(--fontsize16);
line-height: 16px;
content: "✓";
text-align: center;
color: var(--fontcolor);
position: relative;
left: 2px;
top: 1px
}
.compare-action input[type=checkbox] {
visibility: hidden
}
.product-price {
margin-bottom: 10px
}
.product-content-price {
margin-top: 10px
}
@media(max-width:768px) {
.compare-action {
position: relative;
margin: 5.3333333333vw 2.6666666667vw;
height: 8vw;
font-size: 3.2vw;
left: -10px;
justify-content: flex-start
}
.compare-action .compare-action-check+label {
margin-left: 0px;
margin-right: 5px
}
.products-content .pro-list .compare-action span {
margin: 0px
}
}
.inquiry-pro-list {
background: #FFF;
margin: 50px 0px;
display: none;
width: 100%;
box-sizing: border-box;
border: 1px solid #DDD;
padding: 0px 100px
}
.inquiry-pro-list a {
text-decoration: none;
color: var(--fontcolor)
}
.inquiry-pro-list .inquiry-pro-item {
width: 100%;
height: 100px;
border-bottom: 1px solid #DDD;
display: flex;
padding: 40px 10px;
margin-top: 0px;
box-sizing: content-box
}
.inquiry-pro-list .inquiry-pro-item .pro-item-img {
height: 100%;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.inquiry-pro-list .inquiry-pro-item .pro-item-img a {
width: 100%;
height: 100%
}
.inquiry-pro-list .inquiry-pro-item .pro-item-img img {
height: 100%
}
.inquiry-pro-list .inquiry-pro-item .pro-item-name {
padding-top: 30px;
margin-left: 50px;
font-size: var(--fontsize14)
}
.inquiry-pro-list .inquiry-pro-item .pro-item-name a {
font-size: var(--fontsize16)
}
.inquiry-pro-list .inquiry-pro-item .pro-item-name a:hover {
color: var(--color)
}
.inquiry-pro-list .inquiry-pro-item .pro-item-name p {
padding: 0px;
margin: 0px
}
.inquiry-pro-list .inquiry-pro-item .pro-item-del {
position: relative;
padding-top: 20px;
height: 100%;
width: 200px;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center
}
.inquiry-pro-list .inquiry-pro-item .pro-item-del .ic-close {
position: absolute;
width: 32px;
height: 32px;
left: -6px;
top: 43px
}
.inquiry-pro-list .inquiry-pro-item .pro-item-del .ic-close:after,
.inquiry-pro-list .inquiry-pro-item .pro-item-del .ic-close:before {
position: absolute;
left: 15px;
content: "";
height: 20px;
width: 2px;
background-color: #333
}
.inquiry-pro-list .inquiry-pro-item .pro-item-del .ic-close:before {
transform: rotate(45deg)
}
.inquiry-pro-list .inquiry-pro-item .pro-item-del .ic-close:after {
transform: rotate(-45deg)
}
.inquiry-pro-list .inquiry-pro-item .pro-item-del .ic-close:hover {
cursor: pointer
}
.inquiry-pro-list .inquiry-pro-item:last-child {
border: none
}
@media(max-width:768px) {
.inquiry-pro-list {
padding: 1vw 5vw
}
.inquiry-pro-list .inquiry-pro-item {
box-sizing: border-box;
padding: 3vw;
margin: 0px;
height: 20vw
}
.inquiry-pro-list .inquiry-pro-item .pro-item-del {
padding-top: 0px;
width: 10vw
}
.inquiry-pro-list .inquiry-pro-item .pro-item-del .ic-close {
right: 0px;
top: 4vw
}
.inquiry-pro-list .inquiry-pro-item .pro-item-name {
font-size: 3vw;
margin: 0px;
padding: 2vw 0px 0px;
max-width: 48vw
}
.inquiry-pro-list .inquiry-pro-item .pro-item-name p a {
font-size: 3.2vw;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical
}
.inquiry-pro-list .inquiry-pro-item .pro-item-img {
min-width: 24vw;
margin-right: 3vw;
width: auto
}
}
.load {
animation: loading 1.4s ease infinite;
background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
background-size: 400% 100%
}
img.lazy {
opacity: 0
}
img:not(.initial) {
transition: opacity 1s, transform .3s ease
}
img.error,
img.initial,
img.loaded {
opacity: 1
}
img:not([src]) {
visibility: hidden
}
@keyframes loading {
0% {
background-position: 100% 50%
}
to {
background-position: 0 50%
}
}
.ie {
background: #FBFBFB
}
.ie .adv-item article {
width: 100%
}
.ie .cate-btn {
left: 35%
}
.ie .banner {
margin-bottom: 80px
}
.ie .link-wrap .link-l .link-sign,
.ie .link-wrap .link-r .link-sign {
bottom: 20px
}
.ie .link-wrap .link-a {
margin-top: 40px
}
.ie .contact-icon {
position: relative
}
.ie .contact-icon img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.ie .contact-wrap {
margin-bottom: 50px
}
.ie .contact-info {
max-height: none
}
.ie .pro-c-main .common-wrapper {
margin-top: 50px
}
.ie10 .contact-box .box-l {
max-width: 1200px
}
.ie10 .btn-list .LayImAhrefNode,
.ie10 .btn-list .btn,
.ie10 .pdown1,
.ie10 .pdown2,
.ie10 .pdown3 {
display: block
}
.ie10 .link-wrap .link-l,
.ie10 .link-wrap .link-r {
background: 0 0
}
@media(max-width:1700px) {
.foot-list .links {
width: 1400px;
display: flex;
align-items: center;
color: #ffffff;
margin: 0 auto;
}
.foot-list .links ul {
display: inline-block;
}
.foot-list .links a {
color: #ffffff;
}
.advance-list .common-wrapper,
.common-wrapper,
.head-wrapper {
width: 1400px
}
.about-con {
padding-left: 100px
}
.news-r .news-info {
padding: 30px 20px
}
.pro-c-main .pro-rel {
max-width: 1400px;
margin: 0 auto;
}
}
@media(max-width:1500px) {
.head-logo {}
.advance-list .common-wrapper,
.common-main .common-wrapper,
.common-wrapper,
.head-wrapper {
width: 100%;
max-width: 1200px
}
.news-r .news-info {
padding: 20px 10px
}
.news-list .news-more {
padding: 8px
}
.news-l .news-info {
padding: 60px 28px
}
.pro-info {
padding: 16px;
max-width: 400px
}
.pro-name {
margin-bottom: 10px
}
.about .about-con {
padding: 30px 150px
}
.about .about-con,
.about .about-img {
width: 100%
}
.about .about-img {
max-height: 450px
}
.about .about-img img {
width: 100%;
object-fit: cover;
height: 100%;
}
.prolist-1 .pro-btn .arr {
width: 38px
}
.pro-btn {
line-height: 38px;
font-size: var(--fontsize12)
}
.pro-item:hover .pro-btn,
.prolist-1 .pro-item:hover .pro-btn .arr {
height: 38px
}
}
@media(max-width:1380px) {
.foot-letter .send-letter .eput {
width: 240px
}
.swiper-button-next,
.swiper-button-prev {
width: 50px;
height: 50px
}
.common-right {
display: none
}
.prolist-1 .pro-item {
width: calc(25% - 27.75px);
margin-right: 37px
}
.prolist-1 .pro-item:nth-of-type(3n) {
margin-right: 37px
}
.prolist-1 .pro-item:nth-of-type(4n) {
margin-right: 0px
}
.foot-l {
flex-wrap: wrap
}
.foot-l .foot-item {
width: 50%;
box-sizing: border-box
}
.foot-l .foot-item:nth-of-type(2n) {
padding-left: 50px
}
.foot-l .foot-cate,
.foot-l .foot-nav {
padding-left: 0px
}
.que-item {
padding: 30px
}
.pro-info {
max-width: none
}
.pro-c-info {
padding: 24px 50px 0px 55px
}
}
@media(max-width:1240px) {
.advance-list .common-wrapper,
.common-main .common-wrapper,
.common-wrapper,
.head-wrapper {
max-width: 99.8%
}
.head-wrapper {
justify-content: space-between
}
.news-l {
display: none
}
.adv-item {
width: 50%
}
.pro-item {
width: calc(50% - 20px);
margin-right: 40px
}
.pro-item:nth-of-type(2n) {
margin-right: 0px
}
.news-list {
height: auto
}
.news-item {
width: 100% !important;
margin-bottom: 40px
}
.news-item:first-of-type {
flex-direction: row
}
.news-item:first-of-type .news-img {
flex: 1
}
.news-item:first-of-type .news-img img {
height: 100%;
max-width: none
}
.news-item:first-of-type .news-info {
flex: 1.5
}
.part-list {
flex-wrap: wrap
}
.part-item {
width: 33%
}
.foot-right ul {
display: none
}
.content-item,
.document-main .project-item,
.prolist-1 .pro-item {
margin-right: 40px;
width: calc(33% - 30px)
}
.content-item:nth-of-type(4n),
.document-main .project-item:nth-of-type(4n),
.prolist-1 .pro-item:nth-of-type(4n) {
margin-right: 40px
}
.content-item:nth-of-type(3n),
.document-main .project-item:nth-of-type(3n),
.prolist-1 .pro-item:nth-of-type(3n) {
margin-right: 0px
}
.document-main .project-info {
padding: 15px
}
.pro-c-top {
flex-direction: row;
padding: 0.625rem;
}
.preview-container {}
.pro-c-info {
width: 100%;
margin: 0px 1.25rem;
padding: 1.25rem
}
.link-wrap .link-l {
margin-bottom: 30px
}
.link-wrap .link-l,
.link-wrap .link-r {
width: 100%;
height: 110px
}
.link-wrap {
height: auto;
flex-wrap: wrap
}
}
@media(max-width:1024px) {
.head-nav {
position: relative;
width: 60px;
height: 60px;
background: var(--color);
overflow: hidden
}
.head-nav:after {
content: "☰";
font-size: var(--fontsize16);
width: 1em;
line-height: 1;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
color: #FFF
}
.head-nav>ul {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
background: var(--color);
padding-top: 50px
}
.head-nav.active {
overflow: visible
}
.head-nav.active:after {
content: "✕"
}
.head-nav.active ul {
height: auto;
flex-direction: column;
left: auto;
right: 0px
}
.head-nav.active ul>li {
height: 44px
}
.head-nav.active ul>li>a {
color: #FFF
}
.head-nav.active ul>li .inmenu_1,
.head-nav.active ul>li>a:hover {
text-decoration: underline
}
.head-nav.active>ul .submenu {
left: 100%;
top: 0px;
padding-top: 0px
}
.head-nav.active>ul .submenu a {
color: #333;
line-height: 44px
}
.head-nav.active>ul .submenu a:hover {
color: #FFF
}
}
@media screen and (max-width:768px) {
.lang2 {
display: block;
}
.banner {
margin-top: 13.3333333333vw;
height: 40vw;
background-size: 100%
}
.banner img {
display: none
}
.banner-wrap {
padding-right: 4.5333333333vw;
align-items: flex-end;
box-sizing: border-box
}
.banner-title {
font-size: 36px
}
.about-main {
padding-top: 4vw
}
.about-main article .about-title {
margin: 4vw 0 0 !important;
font-size: var(--fontsize28, 28px) !important;
line-height: 1.3
}
.about-main article .a-line {
margin: 4vw auto !important
}
.tab-content {
padding: 5.3333333333vw
}
.tab-content p {
margin: 4vw 0 !important
}
.tab-content img {
margin-bottom: 4vw !important
}
.tabs-top {
flex-wrap: wrap
}
.tabs-title {
width: 50%;
border-bottom: 2px solid #FFF;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
padding: 2.6666666667vw;
height: auto;
line-height: 8.6666666667vw
}
#tabs {
margin-bottom: 4vw
}
.about-main article .adv-t {
line-height: 1.3
}
.head-contact,
.head-top {
display: none
}
.head-nav {
width: auto;
height: auto
}
.foot .common-wrapper {
width: 100%
}
.foot-l .foot-item .foot-logo,
.foot-l .foot-item .foot-intro {
display: none
}
.foot-letter .send-letter {
margin-top: 5.3333333333vw
}
.foot-l .foot-item,
.foot-l .foot-item:nth-of-type(2n) {
padding: 0px;
margin-bottom: 3vw;
width: 100%
}
.foot-l .foot-letter {
display: none
}
.foot-cate ul,
.foot-nav ul {
display: flex;
flex-wrap: wrap
}
.foot-cate ul li,
.foot-nav ul li {
margin: 1vw 0 1vw 3.2vw
}
.foot-l {
padding: 4vw 0px 0px
}
.cu li i,
.cu li em {
margin-right: 5px
}
.foot-title {
font-size: var(--fontsize18)
}
.foot-cate ul,
.foot-nav ul {
margin-top: 5.3333333333vw
}
.foot-letter .send-letter .eput {
margin: 10px 0px
}
.foot-list {
padding-bottom: 0px;
display: none;
}
.foot-right {
padding: 4vw 0;
height: auto
}
.foot-right p {
font-size: var(--fontsize12);
text-align: center;
width: 100%
}
.foot-right ul {
display: none
}
.foot {
padding-bottom: 55px
}
.bPosition {
padding-left: 4vw;
line-height: 1.4
}
.link-wrap .link-l,
.link-wrap .link-r {
height: 20vw
}
.search-wrap {
display: flex;
padding: 0vw;
margin: 4vw;
position: relative
}
.search-wrap input {
padding: 0px 0px 0px 10px;
width: 91vw;
height: 10.6666666667vw;
font-size: var(--fontsize16);
background-color: #FFF;
outline: 0;
border: 1px solid #CCC
}
.search-wrap .search-btn {
height: 100%;
position: absolute;
right: 1vw;
width: 10vw
}
.search-wrap .search-btn i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
#toast-container {
padding-top: 150px
}
.head-wrapper {
height: 100%
}
.head {
height: 13.3333333333vw;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
box-shadow: none;
z-index: 999;
border-bottom: solid 1px #EEE
}
.head-nav {
position: absolute
}
.head-nav>ul {
background-color: #FFF;
top: 13.3333333333vw;
right: -100vw;
left: unset;
position: fixed;
flex-direction: column;
width: 100vw;
overflow-y: auto;
overflow-x: hidden;
padding-top: 0px;
height: calc(100vh - 13.333vw);
justify-content: flex-start
}
.head-nav>ul>li {
position: relative;
height: auto;
margin: 0px;
display: block;
padding: 4vw;
border-bottom: 1px solid #EEE
}
.head-nav>ul>li a {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
color: var(--fontcolor);
font-size: var(--fontsize16);
padding: 0px
}
.head-nav>ul>li .inmenu_1 {
color: var(--color)
}
.head-nav>ul>li .inmenu_1:after {
content: none
}
.head-nav>ul>li:last-child {
border-bottom: none
}
.head-nav>ul>li i {
position: absolute;
box-sizing: border-box;
right: 4vw;
top: 4vw;
color: var(--fontcolor);
transform: scale(1.4) rotate(-90deg);
transform-origin: center center;
transition: all .3s
}
.head-nav>ul>li .slide-active {
transform: scale(1.4) rotate(90deg)
}
.head-nav>ul>li:hover>a,
.head-nav>ul>li:hover>i {
color: var(--fontcolor);
background-color: transparent
}
.head-nav>ul>li:hover>a:after,
.head-nav>ul>li:hover>i:after {
transform: translateX(-50%) rotateY(90deg)
}
.head-nav>ul>li:hover .sub-menu {
opacity:1;
transition: none;
position: relative;
width: 100%;
right: 0px;
transform-origin: top;
transform: rotateX(0);
height: auto;
background: #FFF;
top: 0px;
list-style-type: square;
display: none;
padding-top: 5px
}
.head-nav>ul .submenu {
transition: none;
position: relative;
width: 100%;
right: 0px;
transform-origin: top;
transform: rotateX(0);
opacity: 1;
height: auto;
background: #FFF;
top: 0px;
list-style-type: square;
display: none;
padding-top: 5px
}
.head-nav>ul .submenu li {
position: relative;
list-style-type: none;
padding: 1.3333333333vw 0 0;
margin: 0 0 0 4vw;
border-bottom: none
}
.head-nav>ul .submenu li a {
font-size: var(--fontsize16);
line-height: 24px;
padding: 0px
}
.head-nav>ul .submenu li a:hover {
background: 0 0
}
.nav-btn {
display: flex;
padding-right: 1em;
}
.head-wrapper {
justify-content: space-around;
position: relative;
margin: 0px
}
.head-logo {
width: 37.3333333333vw;
justify-content: flex-start
}
.mobile-bottom .mobile-bottom-item {
flex-direction: column;
justify-content: space-around;
width: 16vw;
height: 55px;
font-size: var(--fontsize12);
box-sizing: border-box;
position: relative
}
.mobile-bottom .mobile-bottom-item a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: #333
}
.mobile-bottom .mobile-bottom-item i {
font-size: var(--fontsize18);
line-height: 1.4
}
.table-responsive {
touch-action: auto;
width: 100%;
margin: 1.3333333333vw 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar
}
#gmap {
height: 59.0666666667vw;
position: relative;
top: 0px;
left: -4vw
}
.contact-wrap {
margin-top: 4vw
}
.contact-list {
flex-wrap: wrap;
height: auto;
padding: 4vw;
box-sizing: border-box
}
.contact-item {
width: 100%;
justify-content: flex-start;
margin-bottom: 4vw
}
.contact-box,
.contact-box .box-r {
flex-direction: column-reverse;
height: auto
}
.contact-box .box-r {
padding: 4vw 0;
width: 100%
}
.contact-box .box-t {
width: 100%;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
text-align: center;
margin-top: 4vw;
font-size: var(--fontsize20)
}
.contact-box .box-icon {
margin-top: 0px;
width: 10.6666666667vw;
height: 10.6666666667vw
}
.contact-box .box-icon i,
.contact-box .box-icon em {
font-size: var(--fontsize24)
}
.contact-box .box-l {
padding: 4vw;
box-sizing: border-box
}
.contact-box .title-m {
font-size: var(--fontsize22)
}
.contact-main {
padding-top: 0px
}
.common-main {
overflow-x: hidden
}
.feedback-main p {
line-height: 1.5
}
.document-main .video-list>li {
width: 100%;
margin-right: 0px
}
.document-main .video-list {
flex-direction: column
}
.document-main .video-list .video-info {
padding-top: 4vw
}
.document-main .download-item {
padding: 4vw 0px
}
.document-main .download-info {
font-size: var(--fontsize12);
display: -webkit-box;
max-height: 80px;
line-height: 16px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden
}
.document-main .download-title {
position: relative;
padding-right: 20px;
font-size: var(--fontsize14);
margin-bottom: 4vw;
line-height: 1.5
}
.document-main .download-title i {
position: absolute;
top: 5px;
right: 10px
}
.document-main .download-list {
top: 0px
}
.document-main {
padding: 4vw 0px
}
.document-main .project-list {
justify-content: space-between
}
.document-main .project-item {
width: 47%;
margin-right: 0px
}
.document-main .project-info .info-r {
min-width: 30px;
height: 30px
}
.document-main .project-info {
padding: 2vw
}
.document-main .project-info .info-l p:nth-child(2) {
display: none
}
.document-main .project-info .info-l .title {
font-size: var(--fontsize12);
display: -webkit-box;
max-height: 28px;
line-height: 14px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden
}
.document-main .faq-list .faq-item {
width: 100%;
margin-right: 0px;
margin-bottom: 4vw
}
.document-main .faq-list .faq-title {
padding: 4vw 5vw 4vw 4vw
}
.document-main .faq-list .faq-con {
padding: 4vw
}
.document-main .faq-list .faq-title:after {
top: 45%
}
.document-main .faq-list .faq-title.active:after {
top: 35%
}
.document-main .project-item:nth-of-type(4n) {
margin-right: 0px
}
.btn-list {
display: flex;
justify-content: space-between
}
.btn-list a,
.btn-list div {
width: 47%
}
}
@media screen and (max-width:768px) {
.advance-list .common-wrapper,
.common-main .common-wrapper,
.common-wrapper,
.head-wrapper {
width: 100%;
margin: 0px auto
}
.common-wrapper {
padding: 0vw 3vw;
box-sizing: border-box
}
.about .about-con .about-title {
font-size: var(--fontsize20)
}
#swiper-banner {
margin-top: 13.3333333333vw
}
#swiper-banner .swiper-button-next,
#swiper-banner .swiper-button-prev {
width: 20px;
background: 0 0
}
#swiper-banner .swiper-button-next i,
#swiper-banner .swiper-button-prev i {
color: var(--color)
}
#swiper-banner .swiper-button-next:hover,
#swiper-banner .swiper-button-prev:hover {
background: 0 0
}
#swiper-banner .swiper-button-next,
#swiper-banner .swiper-container-rtl .swiper-button-prev {
right: 5px
}
.que {
flex-wrap: wrap;
flex-direction: column
}
.adv {
padding: 0px;
margin: 5.3333333333vw 0
}
.advance-list .common-wrapper {
justify-content: space-between
}
.que-item {
width: 100%;
padding: 6.6666666667vw 4vw 10.6666666667vw
}
.que-num {
margin-right: 10px;
margin-bottom: 0px
}
.que-num,
.que-title {
display: inline-block;
font-size: var(--fontsize24)
}
.que-item:hover:after,
.que-item:hover:before {
opacity: 0
}
.common-title {
font-size: var(--fontsize26)
}
.adv-item {
width: 48%;
padding: 2.4vw;
border: 1px solid #e1e1e1;
margin-bottom: 4vw
}
.adv-t {
font-size: var(--fontsize14);
margin-bottom: 2.6666666667vw;
line-height: 1.3
}
.adv-item img {
width: 16vw;
height: 16vw;
margin: 5.3333333333vw 0
}
.adv-item article {
font-size: var(--fontsize12);
margin-top: auto;
display: -webkit-box;
max-height: 48px;
line-height: 16px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden
}
.cate {
display: none
}
.pro-list {
justify-content: space-between;
margin-top: 6vw
}
.pro-item {
width: 47%
}
.pro-item,
.pro-item:nth-of-type(4n) {
margin-right: 0px
}
.about-title {
font-size: var(--fontsize18)
}
.about .about-con {
padding: 66vw 4vw 4vw;
color: #151515
}
.about {
position: relative;
max-width:100%;
overflow: hidden;
}
.about article {
color: #151515;
margin: 4vw 0px
}
.about .more-btn {
display: inline-block
}
.about ul li {
font-size: var(--fontsize12);
background: url(//image/home-sel_blue.webp) no-repeat;
background-position: 10px;
margin-bottom: 8px;
line-height: 2
}
.about .about-sel img {
visibility: hidden
}
.about-title {
color: var(--color)
}
.about .about-img {
width: 92vw;
left: 4vw;
position: absolute;
top: 4vw
}
.con-wrap {
background: #FFF;
padding: 5.3333333333vw
}
.about-list .common-wrapper {
flex-wrap: wrap;
justify-content: space-between
}
.about-item {
width: 47%;
justify-content: flex-start;
margin-bottom: 4vw
}
.about-text {
font-size: var(--fontsize12);
color: #FFF
}
.about-num {
font-size: var(--fontsize20);
color: #FFF
}
.about-ic img {
width: 40px;
height: 40px
}
.about .about-list {
background: #24292f;
padding: 4vw 0px
}
.news article {
margin: 4vw 0px
}
.news {
padding: 6.6666666667vw 0 0
}
.news-item:first-of-type .news-info {
height: auto
}
.news-item:first-of-type .news-img,
.news-item:nth-of-type(2) .news-img,
.news-item:nth-of-type(3) .news-img {
flex: 1.3
}
.news-item:first-of-type .news-img img,
.news-item:nth-of-type(2) .news-img img,
.news-item:nth-of-type(3) .news-img img {
object-fit: cover
}
.news-item {
height: 30vw !important
}
.news-item .news-title {
white-space: pre-wrap;
font-size: var(--fontsize16);
display: -webkit-box;
max-height: 40px;
line-height: 20px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden
}
.news-item .news-info {
flex: 0;
width: 60%;
padding: 4vw;
height: auto
}
.news-item .news-info article {
display: none
}
.news-item .news-img {
flex: 1.3;
width: 40%
}
.news-item .news-img a {
display: block;
width: 100%;
height: 100%
}
.news-item .news-more {
font-size: var(--fontsize12)
}
.news-item .news-date {
padding: 2vw
}
.part {
padding: 0px
}
.part-item {
width: 33%;
padding: 4vw;
box-sizing: border-box
}
.part-list {
flex-wrap: wrap
}
}
@media screen and (max-width:768px) {
.content-item {
width: 47%;
margin-right: 0px
}
.content-list1 {
justify-content: space-between
}
.content-list0 .content-item {
width: 47%;
display: block;
margin-bottom: 50px
}
.content-item:nth-of-type(4n) {
margin-right: 0px
}
.content-list0 {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between
}
.content-list0 .content-info {
padding: 4vw 0px 0px
}
.content-main {
padding: 8vw 0px;
background: #FBFBFB
}
.content-date {
right: 10px
}
.content-info {
padding-top: 4vw
}
.content-title {
font-size: var(--fontsize16);
display: -webkit-box;
max-height: 40px;
line-height: 20px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden
}
.content-date {
padding: 1.3333333333vw 2.6666666667vw;
width: auto;
height: auto;
line-height: 16px
}
.content-more {
margin-top: 3vw;
padding: 3vw;
font-size: var(--fontsize12);
width: auto;
height: auto;
transform: translateX(0);
line-height: 18px;
background: #EBEBEB
}
.content-main .common-c-title {
font-size: var(--fontsize24);
line-height: 1.4
}
.link-wrap .link-l,
.link-wrap .link-r {
width: 100%
}
.link-wrap .link-l {
margin-bottom: 4vw;
padding: 0px 28px 0px 130px
}
.link-wrap .link-r {
padding: 0px 130px 0px 28px
}
.link-wrap {
flex-direction: column
}
.link-a,
.link-a a {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.contant-c-main {
background: #FFF
}
.content-list1 .content-info {
height: 40vw
}
}
@media screen and (max-width:768px) {
.pro-main {
padding: 4vw 0px
}
.prolist-top {
display: none
}
.prolist-0,
.prolist-1 {
justify-content: space-between
}
.prolist-0 {
flex-direction: row;
flex-wrap: wrap
}
.prolist-0 .pro-info {
padding: 4vw
}
.prolist-0 .pro-item .pro-btn {
width: 100%
}
.prolist-0 .pro-img {
width: 100%;
height: auto;
margin-right: 0px;
position: relative
}
.prolist-0 .pro-img:after {
display: block
}
.prolist-0 .img-wrap {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
justify-content: center;
align-items: center
}
.prolist-0 .pro-item {
display: flex;
flex-direction: column;
height: auto
}
.prolist-0 .pro-item:hover {
margin-bottom: 4vw
}
.prolist-0 .pro-item .pro-btn .arr {
display: none
}
.prolist-0 .pro-item,
.prolist-1 .pro-item {
width: 47%;
margin-right: 0px;
margin-bottom: 4vw
}
.prolist-1 .pro-item:nth-of-type(3n),
.prolist-1 .pro-item:nth-of-type(4n) {
margin-right: 0px
}
.common-left {
width: 100%
}
.common-pages {
width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: 4vw
}
.common-pages a,
.common-pages span {
margin-bottom: 4vw;
border-right: 1px solid #D7D7D7
}
.common-pages .last {
border-right: none
}
.common-pages .last a {
border-right: 1px solid #D7D7D7
}
.pro-item {
display: flex;
flex-direction: column
}
.pro-item .pro-btn {
height: 38px;
color: #FFF !important;
order: 1;
opacity: 1
}
.prolist-1 .pro-item .pro-btn .arr {
display: none
}
.pro-info {
padding: 4vw
}
.pro-name {
display: -webkit-box;
max-height: 40px;
line-height: 20px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden
}
.pro-c-main {
margin-top: 13.3333333333vw;
padding: 0px
}
.pro-c-main .common-wrapper {
padding: 0px
}
.pro-c-top {
flex-direction: column
}
.pro-c-top .pro-preview-left {
width: 100%;
min-width: 100%;
height: auto;
display: none;
}
.pro-c-top .pro-preview-left .preview-container {
visibility: hidden;
width: 100%
}
.pro-c-top .pro-preview-left .preview-container .small-box {
display: none
}
.pro-c-top .pro-preview-left .preview-container .thumbnail-box {
margin: 0px
}
.pro-c-top .pro-preview-left .preview-container .thumbnail-box a {
display: none
}
.pro-c-top .pro-preview-left .preview-container .thumbnail-box .list,
.pro-c-top .pro-preview-left .preview-container .thumbnail-box .list .wrapper {
width: 100%
}
.pro-c-top .pro-preview-left .preview-container .thumbnail-box .list .wrapper .item {
height: auto;
border: none;
margin: 0px;
outline: 0
}
.pro-c-top .pro-preview-left .preview-container .thumbnail-box .list .wrapper .item img {
width: 100%
}
.pro-c-top .pro-preview-left .preview-container .thumbnail-box .list .banner-page {
display: flex
}
.pro-c-top .pro-preview-right {
margin-bottom: 0px;
padding: 4vw 0px
}
.pro-c-top .pro-preview-right .pro-name {
font-size: 4vw
}
.pro-c-top .pro-preview-right .pro-price,
.pro-c-top .pro-preview-right .pro-views {
font-size: 4vw;
margin: 1.3333333333vw 0
}
.pro-c-top .pro-preview-right .share-btn-list {
margin: 4vw 0px
}
.pro-c-top .pro-preview-right article {
font-size: 3.2vw;
line-height: 4.8vw;
margin-right: 0px
}
.pro-c-top .pro-preview-right .btn-list {
justify-content: space-between;
margin-top: 4vw
}
.pro-c-top .pro-preview-right .btn-list .btn-list .LayImAhrefNode,
.pro-c-top .pro-preview-right .btn-list .btn-list .btn,
.pro-c-top .pro-preview-right .btn-list .pdown1,
.pro-c-top .pro-preview-right .btn-list .pdown2,
.pro-c-top .pro-preview-right .btn-list .pdown3 {
width: 47%
}
.pro-c-top .pro-preview-right .btn-list .btn,
.pro-c-top .pro-preview-right .btn-list .pdown2 {
height: 6.6666666667vw;
width: 40vw;
margin: 4vw 0px
}
.pro-c-top .pro-preview-right .btn-list .btn span,
.pro-c-top .pro-preview-right .btn-list .pdown2 span {
font-size: 4vw
}
.pro-c-top .singglepic {
width: 100% !important;
height: auto !important;
margin-bottom: 0 !important;
border: none !important
}
.pro-c-top .singglepic img {
border: 0px;
max-width: 100%;
max-height: 100%;
height: auto
}
.pro-c-info {
margin: 0px;
padding: 4vw
}
.pro-c-name {
font-size: var(--fontsize20);
margin: 4vw 0px
}
#gallery .swiper-pagination-bullet {
background: #000;
opacity: .2
}
#gallery .swiper-pagination-bullet-active {
background: var(--color);
opacity: 1
}
.pro-c-main article {
padding: 0 4vw
}
.pro-c-art {
margin-top: 4vw
}
.pro-c-art .inquiry,
.pro-c-art .link-wrap {
padding: 0 4vw
}
.pro-rel-top {
margin: 4vw 0px
}
.pro-c-art .content-c-tit,
.pro-rel-top .pro-rel-tit {
font-size: var(--fontsize20)
}
.pro-rel {
padding: 4vw
}
.preview-container {
margin-left: 0px
}
.pro-c-info {
width: 100%
}
.pro-c-con {
margin: 0px 0px 4vw
}
.pro-c-banner {
display: none
}
.product-content-price {
margin-bottom: 10px
}
.addToCart,
.btn-list .LayImAhrefNode,
.btn-list .btn,
.pdown1,
.pdown2,
.pdown3 {
width: 47%
}
.btn-list .LayImAhrefNode>a,
.btn-list .btn>a,
.pdown1>a,
.pdown2>a,
.pdown3>a {
width: 100%
}
}
.pro-rel-item .pro-name {
margin-bottom: 0px
}
.pro-c-main .pro-rel-item:hover {
transform: translatey(-5px);
transition: .3s transform;
box-shadow: -1px 1px 28px 0 rgb(174 175 177 / 55%)
}
.head-wrapper {
height: 100%
}
.head-logo img {
max-height: 100%
}
.head-logo a {
height: 100%;
display: block
}
.head-logo a {
display: flex;
align-items: center
}
.part-list {
flex-wrap: wrap
}
.prolist-top+.bottom-wrap {
margin-bottom: 35px
}
.singglepic {
width: 450px !important;
height: 450px !important
}
@media screen and (max-width:768px) {
.content-list0 .content-img {
height: auto
}
.content-list0 .content-img img {
width: 100%;
height: auto
}
.content-list0 .content-img a {
display: flex;
width: 100%;
height: 100%
}
.content-list0 .content-item {
height: auto
}
.content-list0 .content-more {
width: 100%;
box-sizing: border-box
}
}
.contact-icon {
min-width: 55px
}
.project-list {
display: flex;
flex-direction: column
}
.project-list li {
width: 100%;
display: flex;
height: 230px;
margin-right: 0px;
flex-wrap: wrap;
align-content: flex-start;
background: #FFF;
margin-bottom: 30px
}
.project-list li:hover {
transition: box-shadow .3s;
box-shadow: -1px 2px 32px 0 rgb(174 175 177 / 55%)
}
.project-list li .project-img {
width: 230px;
height: 230px;
margin-right: 30px
}
.project-info {
display: flex;
align-items: center
}
.project-info a {
padding: 24px;
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-evenly
}
.project-name {
font-size: var(--fontsize16);
color: #333;
font-weight: var(--fontbold6);
margin-bottom: 20px
}
.project-img a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center
}
.project-img a img {
max-height: 100%;
max-width: 100%
}
.head-nav>ul .submenu.nav1 ul {
display: none;
position: absolute;
left: 100%;
top: 0px
}
.head-nav>ul .submenu.nav1 ul li {
background: #FFF
}
.head-nav>ul .submenu.nav1>li {
position: relative
}
.head-nav>ul .submenu.nav1>li>a {
padding: 0px 25px 0px 10px
}
.head-nav>ul .submenu.nav1>li>a:after {
content: "";
transform: rotate(-45deg);
border: solid #000;
border-width: 0 1px 1px 0px;
display: inline-block;
padding: 3px;
position: absolute;
right: 10px;
top: 16px
}
.head-nav>ul .submenu.nav1>li>a:hover:after {
border-color: #FFF
}
.head-nav>ul .submenu.nav1>li:hover ul {
display: block
}
@media (max-width:1700px) {
.prolist-0 .pro-info article {
max-width: 600px
}
}
@media (max-width:1240px) {
.prolist-0 .pro-info article {
max-width: 450px
}
}
@media screen and (max-width:768px) {
.banner img {
display: block;
height: 100%;
object-fit: cover
}
}
@font-face {
font-family: addicon;
font-display: swap;
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAREAAsAAAAACEwAAAP3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqELINwATYCJAMMCwgABCAFhFsHOhtEB8geklQhwh5IAFAACkYcD1/7/c59u1+QxJC8mYUimoli2slirRMpVbJFpv+/z80e+EBdUnNLVyxLPqloSMWp2Ul1adfMaE97EtNeoGOENP29099454GtSRTSHFu76IMlGtBY0xJugwTkPcYm2P1cI4B67sYUM3PJ2aB2ssmUgJHMqA8QF8fJIUWAkNfh1mCCUMlvOzVjvQIPFHfsmwBe/O/HH3iGEBR4ibHK/F4MCWefa794w5H/l4P0AW6dAN0LoAQkYGBlhlirty3ghLEBiahMxsXsMi4W9qjB///xeaqCv+Y/HhtEmSFrBNAjLU6KbzMJ8P2GC3Lnb6fMF3gD8I+q5r7N2XM9Bj51zfhxHF/UM5sOs5pviHttFA4K3SH/6DOs5sDjyz3xV4NPgjzkVE6OQlexDeQ3RT2Bi47b9RbJcvajIFcqxb1JN8LO5MgfPhT1LDtedNT4MnpYzVbbgXplRdyrdLiizlFCBcixbcq6nocGO9Uie3BId0g/V6lcAWi5bP3oTesttofxcAh+H58+4LTDRtyrO2SotN2jOjqD5shR3X0htxKGlvR3OI0sKXJsej6c7pR7uXZyhMu7VdrR6s8v+I5t1zIUutjuEpKd7T+0zRJMrYONys3rPQZ014Qm/yTStSjD7+9+1tqG7o4uWkEnvZaMdSy4n0zt4iPrbOPDSYVhyuvUqEiajoxyTDH82eJeXxBKBQVRoQX17nMzhimO5ayNftw5YAktLYW1VWXMau1z2ekd79Sm5xw9/rjbOcf/isUlt/n6Tfs1r0ee6x46lnFg1y+rJ+0LiwlmiVa1Rc7Rbvz06O+ImNVQ9ZSlW69Z33tsbJzyQu5xX1+Zfr+xlPoaxPvYRZj1HfTI0iqHTQC10heOoHZ6x5H+9d/AwyPvto3qwV+rZIDPdTVRvrdWhvYG1ddhC/CP5etawmbVT8plPJtX40hKekYKoN7Ug59aCk2++gteJM91CGjHiAIYIRKwQGRgTyoRcyOVCQSS6jmZnN1A2wkOVq4DutwSEosaBYINDiA44ByCC+6QePR8kvjUfCaJ4MFaTsw2cqdpRDCIxDbXYPmS0hKp5WUIkpQKMxFVUUTQosDD4oiW5QcwD1f3XDIOlSC6+whZJeXJMFJMSpcWY7Hj7IaKikqxMrq0AEkY1zyGKQt0c5OW3cRVUloMUWgIgYGQMFtqYA5JlCohdUsZBBKpVGZCKBWKEI4ur5LKxCE0Gc+FxjCjhozUI+JkJW2qrmD0tUoUTzcYUpg9LCxVDDO3JgtShLFSmItySwGkxhiuDnpEygQaNuH22spc51UUPzcuV4OxfooiUmS86+OaMiSsOiAYGVFWBgAA') format('woff2'), url(https://css02.v15cdn.com/m405/fonts/addicon.woff?t=1630980291735) format('woff'), url(https://css02.v15cdn.com/m405/fonts/addicon.ttf?t=1630980291735) format('truetype')
}
.iconfont.icon-skype,
.iconfont.icon-whatsapp {
font-family: addicon !important
}
.icon-skype:before {
content: "\e713"
}
.icon-whatsapp:before {
content: "\e8ec"
}
.mobile-bottom .mobile-bottom-item a {
text-transform: capitalize
}
.project-info {
flex: 1
}
#index4-news .more-btn {
width: 200px;
height: 55px;
line-height: 55px;
text-transform: uppercase;
font-weight: var(--fontbold6);
color: #FFF;
display: block;
font-size: var(--fontsize14);
margin: 30px auto 0;
background: #282828;
border-radius: 3px;
text-align: center
}
#index4-news .news-item {
width: calc(25% - 41.25px) !important;
flex-direction: column !important;
height: auto !important
}
#index4-news .news-list {
height: auto;
flex-direction: inherit
}
#index4-news .news-item .news-img {
padding-bottom: 100%;
flex: inherit !important
}
#index4-news .news-img img {
height: 100%;
position: absolute;
top: 0px;
left: 0px;
object-fit: contain
}
#index4-news .news-item .news-info {
height: auto !important;
padding: 20px;
box-sizing: border-box
}
#index4-news .news-title {
margin-bottom: 10px
}
#index4-news .news article {
margin-bottom: 20px
}
#index4-news .news-more {
display: inline-block
}
@media screen and (max-width:1240px) {
#index4-news .more-btn {
margin: 0px auto 30px
}
#index4-news .news-item {
width: calc(50% - 20px) !important
}
}
@media screen and (max-width:768px) {
#index4-news .news-item {
margin-bottom: 20px
}
#index4-news .news-item .news-img {
width: 100%
}
#index4-news .news-item .news-info {
width: 100%;
padding: 15px
}
}
@media(max-width:768px) {
.pro-c-main article img,
.about-main article img {
height: auto !important
}
}
@media(max-width:768px) {
.mobile-bottom {
display: flex;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom)
}
.foot {
padding-bottom: calc(55px + constant(safe-area-inset-bottom));
padding-bottom: calc(55px + env(safe-area-inset-bottom))
}
iframe,
video {
max-width: 100%;
min-height: 240px;
height: auto
}
}
@media(max-width:1441px) {
img {
height: auto;
max-width: 100%
}
}
.download-list li {
padding-left: 20px;
box-sizing: border-box;
width: 100%;
height: 137px;
display: flex;
align-items: center;
background-color: #fbfbfb;
margin-bottom: 30px
}
.download-img {
height: 100%;
width: 228px;
display: flex;
align-items: center
}
.download-img img {
max-height: 100%;
max-width: 100%
}
.download-info {
display: flex;
align-items: center;
color: #777;
margin-left: 30px
}
.download-btn {
margin-left: auto;
margin-right: 30px;
width: 154px;
height: 40px;
background-color: var(--color);
color: #FFF;
display: flex;
justify-content: center;
align-items: center
}
.download-btn:hover {
color: #FFF
}
.video-list {
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap
}
.video-list li {
transition: .3s ease box-shadow, .3s ease transform;
width: calc(33.333% - 30px);
margin-right: 30px;
margin-bottom: 40px
}
.video-img {
width: 90px;
height: 90px;
display: flex;
justify-content: flex-start;
align-items: center
}
.video-list .video-img {
width: 100%;
height: auto
}
.video-list .video-img a {
width: 100%;
height: 100%
}
.video-img img {
max-height: 100%;
max-width: 100%;
display: block;
width: 100%
}
.video-info {
padding: 0px 10px 10px;
box-sizing: border-box
}
.video-name {
font-size: var(--fontsize18);
font-weight: var(--fontbold6);
color: #222;
line-height: 40px
}
.video-in {
font-size: var(--fontsize14);
color: #222
}
.video-in,
.video-name {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
#jljw_IM_GdImBox {
z-index: 900 !important
}
.compare-panel.is-bottom {
bottom: calc(55px + constant(safe-area-inset-bottom));
bottom: calc(55px + env(safe-area-inset-bottom))
}
.foot-right p {
font-size: var(--fontsize14)
}
.app {
font-size: var(--fontsize16)
}
.app p {
font-size: 1em;
line-height: 2em
}
.app h4 {
font-size: 1.5em;
margin-bottom: 1em
}
.app h5 {
font-size: 1em;
margin: 1em 0
}
.app .app-list {
display: -ms-flexbox;
display: flex
}
.app .app-list .list-item {
-ms-flex: 1;
flex: 1
}
.app .app-list .list-item h4 {
margin-bottom: 1em
}
.app .app-list li {
padding: 10px 0px 10px 35px;
background: url(https://css02.v15cdn.com/m405/about_li.webp) no-repeat;
background-position: 2px
}
.app {
font-size: var(--fontsize16)
}
.app .app-box {
display: -ms-flexbox;
display: flex
}
.app .box-l {
-ms-flex: 3.5;
flex: 3.5
}
.app .box-l img {
width: 100%
}
.app .box-r {
-ms-flex: 6.5;
flex: 6.5
}
.app .box-r {
padding-left: 40px
}
.support .support-item {
display: -ms-flexbox;
display: flex
}
.support .support-item>div {
-ms-flex: 1;
flex: 1;
margin-bottom: 60px
}
.support .item-r {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.support .item-l .item-con {
padding-right: 66px
}
.support .item-r .item-con {
padding-left: 66px
}
.support .item-con {
margin-top: 10px
}
.support .item-con p {
margin-top: 0.5em
}
.support .item-con h4 {
font-size: var(--fontsize24);
padding-bottom: 10px;
margin-bottom: 1em;
position: relative
}
.support .item-con h4::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0px;
height: 3px;
width: 40px;
background-color: #B0ACAC
}
.solution .icon-list {
display: -ms-flexbox;
display: flex;
position: relative
}
.solution .icon-list>div {
-ms-flex: 1;
flex: 1
}
.solution .icon {
width: 90px;
height: 90px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.solution .sol-icon {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
background-color: #FFF;
-ms-flex-align: center;
align-items: center;
position: relative;
margin: 0 6%
}
.solution .sol-icon:after {
content: '01';
font-size: 90px;
font-weight: var(--fontbold6);
position: absolute;
top: -8px;
left: 50%;
color: #888;
opacity: 0.1;
transform: translateX(-50%)
}
.solution .sol-icon:before {
content: '';
position: absolute;
top: 50%;
left: 100%;
width: 100%;
height: 30px;
background: url(https://css02.v15cdn.com/m405/sol_line.webp) no-repeat;
transform: translateY(-50%)
}
.solution .sol-icon:nth-child(2):after {
content: '02'
}
.solution .sol-icon:nth-child(3):after {
content: '03'
}
.solution .sol-icon:nth-child(4):after {
content: '04'
}
.solution .sol-icon:nth-child(4):before {
display: none
}
.solution h4 {
font-size: var(--fontsize24);
margin-bottom: 1em
}
.solution .sol-tab .tab-list {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center
}
.solution .sol-tab .tab-title {
padding: 10px 20px;
background-color: #EAEEEE;
color: #666;
cursor: pointer;
margin-right: 20px
}
.solution .sol-tab .tab-title:hover {
background-color: #B0ACAC;
color: #FFF
}
.solution .sol-tab .tab-title.is-active {
background-color: #B0ACAC;
color: #FFF
}
.solution .sol-tab .tab-title:nth-last-child(1) {
margin-right: 0px
}
.solution .sol-tab .tab-content .content-item {
display: none
}
.solution .tab-content {
margin-top: 40px
}
.solution .sol-box {
display: -ms-flexbox;
display: flex;
margin-bottom: 40px
}
.solution .sol-box>div {
width: 50%;
-ms-flex: auto;
flex: auto;
padding: 0px
}
.solution .sol-box>div img {
display: block;
width: 100%;
height: auto
}
.solution .sol-box .box-icon {
width: 86px;
height: 86px;
border-radius: 50%;
background-color: #B0ACAC;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.solution .sol-box .box-icon>img {
width: 40px;
height: auto
}
.solution .sol-box .con {
background-color: #F3F3F3;
padding: 4%;
box-sizing: border-box
}
.solution .sol-box .con-top {
display: -ms-flexbox;
display: flex;
margin-bottom: 20px
}
.solution .sol-box .con-top p {
margin-left: 30px;
margin-top: 10px;
font-size: var(--fontsize24);
line-height: 1.3em
}
.applic-list ul {
display: flex;
flex-wrap: wrap;
margin: 0px -10px
}
.applic-list ul li {
width: 33.3333%;
margin-bottom: 20px;
padding: 0px 10px;
box-sizing: border-box
}
.applic-list .applic-name {
padding: 10px 0px;
display: block;
text-align: center;
color: #222;
font-weight: var(--fontbold6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.applic-list .applic-img img {
display: block;
width: 100%;
height: auto
}
.support-item-img {
margin-bottom: 20px
}
.support-item-img img {
width: 100%;
height: auto
}
.ck-add .cp .cp-img img {
width: 100%;
height: auto
}
.ck-add .cp {
display: flex
}
.ck-add .cp>div {
width: 50%
}
.ck-add .cp-con {
padding-left: 40px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center
}
.ck-add .cp-con h4 {
font-size: var(--fontsize22);
font-weight: var(--fontbold6);
line-height: 1.2em;
margin-bottom: 14px
}
.ck-add .ps-img {
margin-bottom: 20px
}
.ck-add .ps-img img {
width: 100%;
height: auto
}
.ck-add .ps-con p {
line-height: 1.8em;
margin-bottom: 20px
}
.ck-add .ti {
display: flex;
flex-wrap: wrap;
align-items: center
}
.ck-add .ti .ti-tit {
white-space: nowrap;
font-size: var(--fontsize22);
font-weight: var(--fontbold6);
color: #222;
padding: 20px
}
.ck-add .ti .ti-con {
flex: 1
}
.ck-add .ti .ti-img {
width: 100%;
margin: 10px 0px
}
.ck-add .ti .ti-img img {
width: 100%;
height: auto
}
.ck-add .dh-con h4 {
text-align: center
}
.ck-add p {
margin-bottom: 20px;
line-height: 1.6em;
color: #222
}
.ck-add h4 {
font-size: var(--fontsize22);
margin-bottom: 20px;
font-weight: var(--fontbold6);
color: #222
}
.ck-add ul {
padding-left: 20px
}
.ck-add ul li {
position: relative;
color: #6E6E6E;
list-style: disc
}
.ck-add .ce-list {
display: flex
}
.ck-add .ce-list>div {
flex: 1
}
.ck-add .ce-list img {
width: 100%;
height: auto
}
.ck-add .ce-list {
margin: 0px -10px
}
.ck-add .ce-list .ce-item {
padding: 0px 10px;
box-sizing: border-box
}
.ck-add .ho .ho-item {
display: flex
}
.ck-add .ho .ho-item img {
display: block;
margin: 0px auto
}
.ck-add .ho .r .ho-right,
.ck-add .ho .l .ho-left {
flex: 4
}
.ck-add .ho .l .ho-right,
.ck-add .ho .r .ho-left {
display: flex;
flex-direction: column;
justify-content: center;
flex: 6;
padding: 0px 20px;
box-sizing: border-box
}
.ck-add .ho .ho-title {
font-weight: var(--fontbold6)
}
.ck-add .ho .ho-con {
margin-top: 30px
}
.ck-add .ca-img img {
width: 100%;
height: auto
}
.ck-add .ca-img {
margin-bottom: 20px
}
.ck-add .rd .rd-img-list {
display: flex
}
.ck-add .rd .rd-img {
padding: 0px 10px;
margin-bottom: 20px
}
.ck-add .rf .rf-con img {
float: left;
margin-right: 30px
}
.ck-add .cm-img img {
width: 100%;
height: auto
}
.ck-add .cm-img {
margin-bottom: 20px
}
.ck-add .cv img {
float: right
}
.ck-add .ch-item {
display: flex
}
.ck-add .ch-item>div {
width: 50%
}
.ck-add .ch-item.r {
flex-direction: row-reverse
}
.ck-add .ch-con {
display: flex;
padding: 20px;
box-sizing: border-box;
flex-direction: column;
justify-content: center
}
.ck-add .pe .pe-con .pe-img {
float: right
}
.ck-add .pe ul li {
list-style: none
}
.ck-add .pe ul {
padding-left: 0px
}
@media screen and (max-width:768px) {
.applic-list ul li {
width: 50%
}
.applic-list .applic-name {
font-size: var(--fontsize14)
}
.ck-add .cp {
flex-direction: column
}
.ck-add .cp>div {
width: 100%
}
.ck-add .ce-list {
flex-wrap: wrap
}
.ck-add .ce-list>div {
width: 100%;
flex: none
}
.ck-add .cp-con {
padding-left: 0px;
margin-top: 20px
}
.ck-add .ho .ho-con {
margin-top: 0px
}
.ck-add .ho .ho-item {
display: block
}
.ck-add .ho .ho-title {
margin: 10px 0px
}
.ck-add .rd .rd-img-list {
flex-direction: column
}
.ck-add .rd .rd-img {
padding: 0px
}
.ck-add .ch-item.r,
.ck-add .ch-item.l {
flex-direction: column
}
.ck-add .ch-item>div {
width: 100%
}
}
.faq-list .project-info {
flex-direction: column
}
.project-list.faq-list li {
padding: 40px 20px;
box-sizing: border-box;
height: auto
}
.faq-list .project-info {
flex-direction: column
}
@media screen and (max-width:768px) {
.app,
.ck-add,
.solution,
.support {
padding-top: 4vw
}
.app .app-box,
.app .app-list {
flex-direction: column
}
.app .box-l {
margin-bottom: 1em
}
.app .box-r {
padding-left: 0px
}
}
@media screen and (max-width:1500px) {
.solution .icon-list {
flex-wrap: wrap
}
.solution .icon-list>div {
flex: auto
}
.solution .sol-icon {
width: 50%;
margin: 0px;
margin-bottom: 4vw
}
.solution .sol-box {
flex-direction: column
}
.solution .sol-box>div {
width: 100%
}
}
@media screen and (max-width:768px) {
.head-nav>ul {
height: auto;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom)
}
}
@media screen and (max-width:768px) {
.app,
.case,
.solution,
.support {
padding: 4vw
}
.applic-list {
padding: 6vw 0vw
}
.app .app-box,
.app .app-list {
flex-direction: column
}
.app .box-l {
margin-bottom: 1em
}
.app .box-r {
padding-left: 0px
}
.app .list-item {
margin-bottom: 1em
}
.how-to-use ul>li {
width: 100%
}
.case ul>li {
width: 50%;
padding: 0 2vw
}
.case ul {
margin: 0 -2vw
}
}
@media screen and (max-width:1500px) {
.solution .tab-content {
margin-top: 10px
}
.solution .sol-box {
flex-direction: column
}
.solution .sol-box>div {
width: 100%
}
.solution .icon-list {
flex-wrap: wrap
}
.solution .icon-list>div {
flex: auto
}
.solution .sol-icon {
width: 50%;
margin: 0px;
margin-bottom: 4vw
}
.solution .sol-icon:before {
display: none
}
.solution .sol-tab .tab-list {
flex-wrap: wrap
}
.solution .sol-tab .tab-title {
width: 100%;
margin-right: 0px;
margin-bottom: 10px
}
.solution .sol-box .box-icon {
width: 65px;
height: 65px
}
.solution .sol-box .con-top p {
margin-top: 0px;
margin-left: 16px
}
}
@media screen and (max-width:1000px) {
.support .support-item {
flex-direction: column
}
.support .support-item img {
width: 100%
}
.support .item-l .item-con {
padding-right: 0px
}
.support .item-r .item-con {
padding-left: 0px
}
.support .support-item>div {
margin-bottom: 8vw
}
.support .item-con h4 {
font-size: var(--fontsize20)
}
}
@media screen and (max-width:768px) {
.project-list li .project-img {
width: 100%;
height: auto;
padding-left: 0px
}
}
@media screen and (max-width:768px) {
.project-list li .project-img {
width: 100%;
height: auto;
padding-left: 0px
}
}
@media screen and (max-width:768px) {
.project-list li .project-img {
margin-right: 0px
}
}
@media screen and (max-width:768px) {
.app,
.case,
.solution,
.support {
padding: 0px
}
.banner-wrap {
align-items: center
}
}
@media screen and (max-width:768px) {
.ck-add .ps-con p,
.common-main article p {
line-height: 1.6em
}
.ck-add .ho .l .ho-right,
.ck-add .ho .r .ho-left,
.ck-add .ti .ti-tit {
padding: 10px 0px
}
.ck-add .ce-list>div {
width: 50%;
margin-bottom: 10px
}
.ck-add .dh-con h4 {
text-align: left
}
.app,
.case,
.solution,
.support {
padding-top: 4vw
}
}
.project-list.faq-list li {
background: 0 0;
border-bottom: 1px solid #E8E8E8
}
.faq-list.project-list li:hover {
transition: box-shadow .3s;
box-shadow: none
}
.faq-list .project-info {
align-items: flex-start;
padding-left: 20px
}
.faq-list .project-content,
.faq-list .project-name {
position: relative
}
.faq-list .project-name:after {
content: "Q:";
font-weight: var(--fontbold4);
position: absolute;
left: -20px
}
.faq-list .project-content:after {
content: "A:";
position: absolute;
top: 0px;
left: -20px
}
.addToCart.is-active {
background: var(--color)
}
.addToCart.is-active span {
color: #FFF
}
@media screen and (max-width:768px) {
.cate {
display: block
}
.cate .cate-list {
flex-wrap: wrap
}
.cate .cate-item {
width: 50%
}
.cate-name {
font-size: var(--fontsize16);
padding: 0px 10px
}
.cate-btn {
width: auto;
height: auto;
line-height: initial
}
}
@media screen and (max-width:768px) {
.cate-btn {
padding: 10px
}
}
.cate-img {
min-height: 120px
}
.wmkc-base-table {
display: flex;
justify-content: space-between
}
.wmkc-base-box {
width: 23%;
background-color: #F6F6F6;
text-align: center
}
.wmkc-base-img img {
width: 100%
}
.wmkc-base h4 {
margin-bottom: 67px;
color: #0D0D0D;
text-align: center;
font-weight: var(--fontbold6);
font-size: 36px
}
.wmkc-base-si {
padding: 60px 0px 0px 0px
}
.wmkc-base-si p:nth-child(1) {
text-align: center;
font-size: var(--fontsize18)
}
.wmkc-base-p {
font-size: var(--fontsize14)
}
.wmkc-base-g {
margin: 0px auto;
margin-bottom: 40px;
width: 10%;
height: 2px;
background-color: #0D0D0D
}
.wmkc-history-table {
text-align: center
}
.wmkc-history-table p:nth-of-type(1) {
margin-bottom: 20px;
color: #222;
font-weight: var(--fontbold6);
font-size: var(--fontsize30, 30px)
}
.wmkc-history-table p:nth-of-type(2) {
margin-bottom: 20px;
color: #222;
line-height: 1.5
}
.wmkc-history-our {
display: flex;
align-items: center;
margin: 55px auto 0px
}
.wmkc-history-viode {
flex: 1
}
.wmke-history-size {
width: 50%
}
.wmke-history-size p:nth-child(1) {
color: #222;
font-size: var(--fontsize20)
}
.wmkc-history-p {
margin-right: 70px;
margin-bottom: 20px;
color: #222;
font-size: var(--fontsize16);
line-height: 1.5
}
.wmkc-history-h {
margin-top: 30px;
margin-bottom: 30px;
width: 10%;
height: 2px;
background-color: var(--color)
}
.wmkc-history-button {
margin-top: 40px;
padding: 20px 0px;
max-width: 160px;
background-color: var(--color);
color: #FFF;
text-align: center;
font-weight: var(--fontbold8)
}
.wmkc-history-img {
display: flex;
margin-top: 70px
}
.wmkc-history-all {
position: relative;
width: 33.3%
}
.wmkc-history-yy {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
opacity: .6
}
.wmkc-history-yy p {
margin-top: 43%;
color: #FFF;
font-weight: var(--fontbold6);
font-size: 25px;
opacity: 1
}
.wmkc-history-iopnt {
height: 100%
}
.wmkc-history-iopnt img {
width: 100%;
height: 100%
}
.wmkc-history-tab {
text-align: center
}
.wmkc-history-tab p:nth-of-type(1) {
margin-bottom: 20px;
color: #222;
font-weight: var(--fontbold6);
font-size: var(--fontsize30, 30px)
}
.wmkc-history-tab p:nth-of-type(2) {
margin-bottom: 20px;
color: #222;
line-height: 1.5
}
.wmkc-history-cul {
display: flex;
padding: 45px 60px;
background-color: #FFF;
justify-content: space-between
}
.wmkc-history-box {
width: 32%
}
.wmkc-history-ta {
margin-top: 60px;
margin-bottom: 60px
}
.wmkc-history-box p:nth-of-type(1) {
margin-bottom: 30px
}
.wmkc-history-box p:nth-of-type(2) {
margin-bottom: 20px;
font-size: var(--fontsize12)
}
.wmkc-history-box p:nth-of-type(3) {
margin-bottom: 30px;
font-size: var(--fontsize14);
line-height: 1.5
}
.wmkc-honor {
display: flex
}
.wmkc-box-iig {
margin-left: 6px;
width: 4%
}
.wmkc-box-iig img {
width: 100%
}
.wmkc-honor-patents {
margin-bottom: 50px;
color: #222;
text-align: center;
font-weight: var(--fontbold6);
font-size: var(--fontsize22)
}
#page-history,
#page-honor {
width: 80%
}
.wmkc-box-on {
position: relative
}
.wmkc-box-on .swiper-button-next,
.wmkc-box-on .swiper-button-prev {
width: 53px;
height: 53px;
border: 1px solid var(--color);
border-radius: 30px;
background-color: #FFF;
background-size: 15px;
color: var(--color);
text-align: center;
line-height: 50px
}
#page-history .swiper-slide,
#page-honor .swiper-slide {
display: flex;
padding: 0px 30px;
width: 250px;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
text-align: center
}
.wmkc-honor img {
margin: auto;
width: 100%
}
#page-history .swiper-slide p,
#page-honor .swiper-slide p {
margin-top: 30px;
text-align: center;
font-size: var(--fontsize15)
}
.wmkc-box-ra {
width: 15px;
height: 15px;
border: 3px solid #EBEBEB;
border-radius: 30px;
background-color: #F2F6F7
}
.wmkc-box-rb {
width: auto;
height: 2px;
background-color: #EAEAEA
}
.wmkc-box-rd p:nth-of-type(1) {
color: var(--color);
text-align: left;
font-weight: var(--fontbold8);
font-size: var(--fontsize28, 28px)
}
.wmkc-box-rd p:nth-of-type(2) {
margin-top: 10px;
margin-bottom: 20px;
font-size: var(--fontsize16);
line-height: 1.5;
text-align: left
}
.wmkc-honor-bit p {
margin-bottom: 70px;
font-size: var(--fontsize28, 28px);
text-align: center
}
@media (max-width:768px) {
.wmkc-base-table,
.wmkc-history-cul,
.wmkc-history-img,
.wmkc-history-our {
flex-direction: column
}
.wmkc-history-box,
.wmke-history-size {
width: 100%
}
.wmkc-history-p {
margin-right: 0px
}
.wmkc-history-button {
margin: 10px 0px 20px
}
.wmkc-history-all {
width: 100%
}
.wmkc-history-box {
margin-top: 20px;
margin-bottom: 20px
}
.wmkc-history-table p:nth-of-type(1) {
margin-top: 20px;
font-size: var(--fontsize24)
}
.wmkc-history-tab p:nth-of-type(1) {
font-size: var(--fontsize24)
}
#page-history .swiper-slide,
#page-honor .swiper-slide {
padding: 0px
}
.wmkc-honor img {
width: 60%
}
.wmkc-base-box {
width: 100%;
margin-bottom: 40px
}
.wmkc-history-cul {
padding: 45px 10px
}
.wmkc-box-rd p:nth-of-type(2) {
padding: 10px 30px
}
.wmkc-honor-bit {
margin-top: 30px
}
.wmkc-base,
.wmkc-base-si,
.wmkc-honor-patents {
padding-top: 30px
}
}
@media (max-width:415px) {
#page-history .swiper-slide,
#page-honor .swiper-slide {
width: 100%
}
.wmkc-box-on .swiper-button-next,
.wmkc-box-on .swiper-button-prev {
width: 30px;
height: 30px;
background-size: 12px
}
}
@media (max-width:320px) {
.wmkc-base-table,
.wmkc-history-cul,
.wmkc-history-img,
.wmkc-history-our {
flex-direction: column
}
.wmkc-history-table {
margin-top: 10px
}
.wmkc-base-box {
margin-bottom: 30px
}
.wmkc-base h4 {
margin-top: 20px;
margin-bottom: 20px;
font-size: var(--fontsize24)
}
.wmkc-history-all,
.wmkc-history-box,
.wmke-history-size {
width: 100%
}
.wmkc-history-button {
margin: auto;
margin-bottom: 30px;
width: 50%
}
.wmke-history-size p:nth-child(1) {
text-align: center;
font-size: var(--fontsize16)
}
.wmkc-history-table p:nth-of-type(1) {
font-size: var(--fontsize24)
}
.wmkc-history-cul {
padding: 20px 10px
}
.wmkc-history-h {
margin: auto;
margin-top: 10px;
margin-bottom: 10px
}
.wmkc-history-yy p {
font-size: var(--fontsize20)
}
}
@media(max-width:1280px) {
.head-contact {
display: none
}
}
@media (min-width:769px) {
.head-nav>ul .submenu {
display: block
}
}
#swiper-banner .swiper-slide img {
height: auto
}
@media(min-width:769px) {
.contact-box {
height: auto
}
.contact-box .box-r {
height: 600px
}
}
@media(max-width:1024px) {
.prolist-top {
display: none
}
.mobcate-main {
flex-wrap: wrap;
flex-direction: column-reverse
}
.mobcate-main .common-right {
display: block;
width: 100%;
max-width: 100%;
margin: 0px
}
.mobcate-main .common-right .side-pro,
.mobcate-main .common-right .side-search,
.mobcate-main .common-right .side-tag {
display: none
}
.mobcate-main .side-cate {
position: relative;
margin-bottom: 15px
}
.mobcate-main .side-cate .sf-menu {
position: absolute;
top: 110%;
left: 0px;
right: 0px;
padding: 0px 10px;
z-index: 20;
display: none;
background-color: #FFF;
box-shadow: rgb(0 0 0 / 20%) 0 2px 16px
}
.mobcate-main .side-cate .side-title {
color: var(--fontcolor);
margin: 0px;
padding: 0px;
cursor: pointer;
background: url(//image/cate-btn.webp) right center/24px no-repeat;
border-bottom: 1px solid #CCC
}
}
h4.cate-h4,
h4.pro-h4 {
clear: both;
font-weight: var(--fontbold6)
}
ul.cate-ulli,
ul.pro-ulli {
clear: both;
padding: 10px 0px 10px 20px
}
ul.cate-ulli li,
ul.pro-ulli li {
list-style-type: disc;
line-height: 1.7
}
ol.cate-ulli,
ol.pro-ulli {
clear: both;
padding: 10px 0px 10px 30px
}
ol.cate-ulli li,
ol.pro-ulli li {
list-style-type: decimal;
line-height: 1.7
}
.prohome-content {
clear: both;
margin: 0px auto 20px;
padding: 0px;
max-width: 1600px;
line-height: 1.6;
box-sizing: border-box
}
.prolist-bottom {
clear: both;
margin: 0px auto 20px;
padding: 0px;
max-width: 1600px;
line-height: 1.6;
box-sizing: border-box
}
.prolist-bottom a {
text-decoration: underline;
text-transform: lowercase
}
.prolist-bottom a:hover {
color: var(--color)
}
@media(max-width:768px) {
.prohome-content {
clear: both;
margin: 0px auto 20px;
padding: 0px 15px;
max-width: 1600px;
line-height: 1.6;
box-sizing: border-box
}
.prolist-bottom {
clear: both;
margin: 0px auto 20px;
padding: 0px 15px;
max-width: 1600px;
line-height: 1.6;
box-sizing: border-box
}
}
.prolist-content {
clear: both;
margin: 0px auto 15px;
line-height: 1.6
}
.ck-widget-toc {
display: table;
border: 1px solid #A2A9B1;
background-color: #F8F9FA;
padding: 10px 20px 10px 10px;
font-size: 95%;
margin: 15px 0px;
min-width: 300px;
max-width: 100%
}
.ck-widget-toc ol {
padding: 0px 0px 0px 30px;
counter-reset: item
}
.ck-widget-toc ol li {
display: block;
position: relative;
list-style: none
}
.ck-widget-toc ol li:before {
content: counters(item, ".");
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px
}
.ck-widget-toc-title {
text-align: left;
font-weight: var(--fontbold7);
margin: 0px;
margin-bottom: 5px;
padding: 0px;
padding-left: 5px
}
.ck-widget-pt {
padding-top: 100px;
margin-top: -100px
}
.ck-widget-toc1 {
display: table;
border: 1px solid #A2A9B1;
background-color: #F8F9FA;
padding: 10px 20px 10px 10px;
font-size: 95%;
margin: 15px 0px;
min-width: 300px;
max-width: 100%
}
.ck-widget-toc1 ol {
padding: 0px 0px 0px 30px;
counter-reset: item
}
.ck-widget-toc1 ol li {
display: block;
position: relative;
list-style: none
}
.ck-widget-toc1 ol li:before {
content: counters(item, ".");
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px
}
.banner-wrap {
max-width: 1600px;
transform: translateX(-50%);
left: 50%
}
@media(max-width:1700px) {
.banner-wrap {
max-width: 1400px
}
}
@media(max-width:1500px) {
.banner-wrap {
max-width: 1200px
}
}
@media(max-width:1240px) {
.banner-wrap {
max-width: 92%
}
}
.vPlay {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
z-index: 999;
display: none
}
.lang {
width: auto;
position: relative;
z-index: 9999;
text-align: left;
margin-left: 15px
}
.lang-icon {
display: flex;
align-items: center;
width: 100%;
height: 30px;
border: none;
cursor: pointer;
font-size: var(--fontsize14);
user-select: none;
white-space: nowrap
}
.lang-icon>img {
margin-right: 5px;
margin-top: 3px
}
.lang-icon span {
position: relative;
padding-right: 18px
}
.lang-icon span::before {
content: "";
position: absolute;
right: 4px;
top: 21px;
width: 8px;
height: 1px;
background: #FFF;
transform: rotate(50deg)
}
.lang-icon span::after {
content: "";
position: absolute;
right: 0px;
top: 21px;
width: 8px;
height: 1px;
background: #FFF;
transform: rotate(-50deg)
}
.lang-drop {
position: absolute;
top: calc(100% + 26px);
right: 50%;
transform: translateX(50%);
background: #FFF;
border: 1px solid #EBEEF5;
border-radius: 4px;
box-shadow: 0px 2px 12px 0 rgba(0, 0, 0, .1);
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: opacity .3s, top .3s
}
.lang-drop.lang-flex {
transform: translateX(25%)
}
.lang-drop.lang-flex .lang-arrow {
left: 75%
}
.lang-drop.active {
visibility: visible;
opacity: 1;
top: calc(100% + 12px)
}
.lang-arrow {
display: block;
width: 10px;
height: 10px;
background-color: #FFF;
border-top: 1px solid #EBEEF5;
border-left: 1px solid #EBEEF5;
transform: translateX(-50%) rotate(45deg);
position: absolute;
top: -6px;
left: 50%
}
.lang-wrap {
width: 140px;
padding: 8px 0px;
box-sizing: border-box
}
.lang-flex .lang-wrap {
width: 340px;
display: flex;
flex-wrap: wrap;
padding: 8px
}
.lang-wrap li {
width: 100%;
padding: 8px 16px;
line-height: 1.1;
box-sizing: border-box;
transition: background-color .3s
}
.lang-flex .lang-wrap li {
width: 33%;
padding: 8px 6px
}
.lang-wrap li.lang-active,
.lang-wrap li:hover {
background-color: #EEE
}
.lang-wrap li a {
display: block;
font-size: var(--fontsize12);
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.lang-wrap li img {
display: inline-block;
width: 24px;
height: 16px;
vertical-align: -.25em;
margin-right: 4px
}
@media (max-width:1024px) {
.lang {
margin-left: auto;
position: fixed;
top: 11px;
right: 65px;
transition: all .2s linear;
display: none;
}
.lang-icon span {
display: none
}
.lang-icon>img {
width: 36px;
height: 24px;
margin-top: 0px
}
.lang-drop.lang-flex {
right: auto;
left: 50%;
transform: translateX(-50%);
top: 60px !important;
position: fixed;
width: calc(100vw - 20px)
}
.lang-drop.lang-flex.active {
top: 54px !important
}
.lang-flex .lang-wrap {
width: 100%
}
.lang-drop.lang-flex .lang-arrow {
left: 80%
}
.lang-drop {
display: none
}
.lang-drop.active {
display: block
}
}
@media(max-width:768px) {
.top-btn {
display: none !important
}
.mobile-bottom-item .top-btn {
display: flex !important;
position: absolute;
bottom: auto;
right: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: none;
background: none
}
}
table td,
table tr {
padding: 5px;
border: 1px solid #CCC
}
.mediaplay {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
z-index: 99;
width: 50px !important;
height: 50px !important;
cursor: pointer;
display: none
}
@media(max-width:768px) {
.mediaplay {
top: 50%
}
}
#media {
width: 100%;
height: 100%;
background: #EEE;
object-fit: contain;
z-index: 99;
position: relative
}
@media(max-width:768px) {
.head-nav>ul .submenu.nav1>li>a:after {
display: none
}
.head-nav>ul .submenu.nav1 ul {
display: block;
position: static;
padding-left: 10px
}
}
#filterlist .filterlist-ul li {
display: flex;
align-items: center;
margin: 10px 0px 20px;
line-height: 1;
cursor: pointer;
user-select: none
}
#filterlist .filterlist-ul li:nth-child(n+21) {
display: none
}
#filterlist .filterlist-ul li.act {
color: var(--color)
}
#filterlist .filterlist-ul li.act .input::after {
transform: translate(-50%, -50%) scale(1)
}
#filterlist .filterlist-ul li .input {
width: 16px;
height: 16px;
margin-right: 10px;
border: 1px solid #666;
position: relative
}
#filterlist .filterlist-ul li .input::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 9px;
height: 9px;
background: var(--color);
transition: all .1s linear
}
#filterlist .filterlist-ul li span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden
}
#filterlist .viewmore-filter {
color: var(--color);
text-transform: uppercase;
cursor: pointer
}
#filterlist .viewmore-filter:hover {
text-decoration: underline
}
.pagesbanner {
position: relative;
z-index: 1
}
.pagesbanner>a {
z-index: 1;
position: relative;
display: block
}
.pagesbanner video,
.pagesbanner img {
width: 100%;
height: auto;
object-fit: cover;
min-height: 160px
}
.pagesbanner .pagesbanner-animate {
width: 100%;
padding: 0px 20px;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFFFFF;
text-align: center;
margin-top: 20px;
opacity: 0;
animation: pagesbanner 1s .5s forwards;
box-sizing: border-box
}
.pagesbanner .pagesbanner-animate .p1 {
font-size: var(--fontsize30);
font-weight: var(--fontbold5, 500);
line-height: 1.2
}
.pagesbanner .pagesbanner-animate .p2 {
margin-top: 20px;
font-size: var(--fontsize18);
font-weight: var(--fontbold4, 400)
}
@keyframes pagesbanner {
0% {
margin-top: 20px;
opacity: 0
}
100% {
margin-top: 0px;
opacity: 1
}
}
@media (max-width:1024px) {
.pagesbanner .pagesbanner-animate .p1 {
font-size: var(--fontsize26)
}
.pagesbanner .pagesbanner-animate .p2 {
margin-top: 10px;
font-size: var(--fontsize16)
}
}
@media (max-width:768px) {
.pagesbanner .pagesbanner-animate .p1 {
font-size: var(--fontsize20)
}
.pagesbanner .pagesbanner-animate .p2 {
font-size: var(--fontsize14)
}
}
.uagb-toc__list-wrap .uagb-toc__list {
margin-left: 0em;
}@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper,swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide,swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification,swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}@media (min-width:769px){.adv-item article{-webkit-line-clamp:inherit;overflow:visible;max-height:80px}.adv-item{padding:40px}}@media (max-width:768px){.adv-item article{display:block;max-height:none;margin-top:initial}}.common-main article p{margin-bottom:2px}.pro-c-name,.side-pro-name,.adv-item article,.content-info article,.news-title,.news article,.pro-info article{word-break:break-word}.contact-wrap{margin:0}@media (max-width:1500px) and (min-width:769px){.about-img iframe{width:100%;height:600px}.about .about-img{max-height:none}}.pro-c-info{padding-right:0}.pro-c-main .common-left{width:calc(100% - 500px)}.pro-c-main .common-wrapper{display:flex}main.pro-c-main.pro-showroom-main .common-wrapper{display:block}@media (max-width:1380px) and (min-width:1281px){.common-right{display:block}.common-right{width:270px;margin-left:30px}.pro-c-main .common-left{width:calc(100% - 300px)}}@media (max-width:1280px){.pro-c-main .common-left{width:100%}}iframe{max-width:100%}.about .about-img iframe{width:100%;height:100%;display:block}.about .about-con{padding:50px 90px}.about ul li{position:relative;padding-left:40px;line-height:1.7}.about .about-sel{position:absolute;left:0;top:-2px}@media screen and (max-width:1500px) and (min-width:1151px){.about .about-con,.about .about-img{width:50%}.about .about-con{padding:40px 60px}}@media screen and (max-width:1500px){.about .about-img{max-height:100%}}@media screen and (max-width:1150px){.about .about-img iframe{height:590px}}@media screen and (max-width:768px){.about .about-img iframe{height:100%}.about .about-con{padding:66vw 4vw 4vw}.about .about-img{max-height:inherit;width:100%;left:0;padding:0 4vw;box-sizing:border-box;height:62vw}}.part{padding:0;border:none}@media(min-width:1200px){.pro-info article{max-height:100%;-webkit-line-clamp:6}}.common-title{text-transform:capitalize}@font-face{font-family:"iconfont";font-display: swap;src:url() format('truetype')}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-yingyong:before{content:"\f0174"}.que-item:first-of-type{background:#505358}