:root {
--viewheight:var(-webkit-fill-available)
}

::-webkit-scrollbar {
width:5px;
height:5px;
overflow:visible
}

::-webkit-scrollbar-track {
background-color:#f0f0f0
}

::-webkit-scrollbar-thumb {
background-color:#0b76be;
border-radius:3px
}

::-webkit-scrollbar-button {
display:none
}

* {
margin:0;
padding:0
}

@font-face {
font-family:'icons';
src:url(../fonts/icons.eot);
src:url(../fonts/icons.eot?#iefix) format("embedded-opentype"),url(../fonts/icons.ttf) format("truetype"),url(../fonts/icons.woff) format("woff"),url(../fonts/icons.woff2) format("woff2"),url(../fonts/icons.svg#icons) format("svg");
font-weight:400;
font-style:normal;
font-display:swap
}

body {
font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Microsoft YaHei UI,Microsoft YaHei,PingFang SC,Source Han Sans CN,sans-serif;
font-size:16px;
line-height:1.4;
font-weight:400;
color:#333;
text-align:left;
background:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
scroll-behavior:smooth
}

a {
color:inherit;
text-decoration:none;
transition:color .2s linear,background .2s linear
}

.animg img{ height:270px !important;}
img,video {
max-width:100%;
height:auto!important;
max-height:100%!important;
vertical-align:bottom
}
.listprdimg{ height:242px !important; }

ul,ol {
list-style:none;
list-style-position:inside
}

h1 {
font-size:2em;
line-height:1.2;
font-weight:600
}

h2 {
font-size:1.8em;
line-height:1.2;
font-weight:600
}

h3 {
font-size:1.5em;
line-height:1.2;
font-weight:600
}

h4 {
font-size:1.3em;
line-height:1.2;
font-weight:600
}
.frame h4{ color:#fff;}

h5 {
font-size:1.125em;
line-height:1.2;
font-weight:600
}

h6 {
font-size:1em;
line-height:1.2;
font-weight:600
}

input,textarea,select {
border:none;
outline:none;
border-radius:none;
appearance:none;
-webkit-appearance:none;
vertical-align:bottom
}

::placeholder {
font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Microsoft YaHei UI;
color:grayscale(1)
}

strong,b {
font-weight:600
}

em,i {
font-style:italic
}

iframe {
border:none;
vertical-align:bottom
}

:before,:after,[class*='icon-'] {
font-family:icons;
font-size:1em;
color:inherit;
user-select:none;
-webkit-user-select:none;
vertical-align:bottom
}

[role=button] {
user-select:none;
-webkit-user-select:none;
cursor:pointer
}

[data-href]:not([data-href=""]) {
cursor:pointer
}

[data-href]:not([data-href=""]) > * {
pointer-events:none
}

[data-video]:not([data-video=""]) {
position:relative;
cursor:pointer
}

[data-video]:not([data-video=""]) > * {
pointer-events:none
}

[data-video]:not([data-video=""]):before {
content:'\e90a';
display:block;
position:absolute;
z-index:10;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:60px;
color:#fff
}

[data-video]:not([data-video=""]) img {
filter:brightness(0.5)
}

.wrap {
box-sizing:border-box;
width:100%
}

.container {
box-sizing:border-box;
width:1272px;
height:100%;
margin-left:auto;
margin-right:auto
}

.grid-2 {
display:grid;
grid-template-columns:1fr 1fr;
grid-gap:24px
}

.grid-3 {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:24px
}

.grid-4 {
display:grid;
grid-template-columns:repeat(4,1fr);
grid-gap:24px;
margin-top:30px
}

.grid-4 .technical {
height:80px!important;
padding:0 10px!important;
font-size:14px
}

.grid-4 .technical p {
margin-bottom:10px!important
}

.grid-4 .action a {
text-align:center!important
}

.grid-4 h3 {
text-align:center!important
}

.grid-5 {
display:grid;
grid-template-columns:repeat(5,1fr);
grid-gap:24px
}

.grid-6 {
display:grid;
grid-template-columns:repeat(6,1fr);
grid-gap:24px
}

.grid-8 {
display:grid;
grid-template-columns:repeat(8,1fr);
grid-gap:24px
}

.grid-10 {
display:grid;
grid-template-columns:repeat(10,1fr);
grid-gap:24px
}

.grid-12 {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap:24px
}

.clearfix {
clear:both
}

.head-navigation {
height:40px;
line-height:40px;
font-size:12px;
color:#b2b2b2;
background:#151c30
}

.head-navigation .links {
float:left
}

.head-navigation .links li {
display:inline-block;
margin-right:15px
}

.head-navigation .links li a {
padding-right:15px;
border-right:1px solid #b2b2b2
}

.head-navigation .links li:nth-last-child(1) a {
padding-right:0;
border-right:none
}

.head-navigation .info {
float:right;
user-select:none
}

.head-navigation .info > li {
position:relative;
float:left;
display:inline-block;
margin-left:24px;
cursor:pointer
}

.head-navigation .info > li:before {
float:left;
display:block;
width:24px;
color:#0b76be;
text-align:center
}

.head-navigation .tel:before {
content:'\e901'
}

.head-navigation .hreflang:before {
content:'\e900'
}

.head-navigation .login:before {
content:'\e906'
}

.head-navigation .hreflang ul {
position:absolute;
z-index:60;
top:40px;
left:0;
box-sizing:border-box;
width:105px;
padding:0 7.5px;
line-height:34px;
color:#666;
text-align:center;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35);
max-height:0;
overflow:hidden;
transition:max-height .3s
}

.head-navigation .hreflang ul:before {
content:'';
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
border:6px solid #fff;
border-top-color:transparent;
border-left-color:transparent;
border-right-color:transparent
}

.head-navigation .hreflang ul.sliderdown {
max-height:160px;
overflow:visible
}

.head-navigation .hreflang li {
width:100%;
border-bottom:1px solid #f0f0f0
}

.head-navigation .hreflang li:hover {
color:#0b76be
}

.head-navigation .login span {
pointer-events:none
}

.head-navigation .login-status {
position:absolute;
top:40px;
right:0;
z-index:60;
max-width:300px;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35);
white-space:nowrap;
max-height:0;
overflow:hidden;
transition:max-height .3s
}

.head-navigation .sliderdown {
max-height:300px
}

.head-navigation .user-info {
display:flex;
place-items:center;
height:40px;
padding:20px 40px 0;
font-size:16px;
color:#333
}

.head-navigation .user-avatar {
margin-right:10px;
border-radius:3px
}

.head-navigation .user-name {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.head-navigation .user-links {
display:grid;
grid-template-rows:repeat(4,1fr);
grid-auto-flow:column;
gap:10px 20px;
padding:0 40px 20px;
margin-top:20px;
font-size:14px;
line-height:1.4em;
color:#666
}

.head-navigation .user-links a:hover {
color:#0b76be
}

.primary-navigation {
	position: sticky;
	top: 0;
	z-index: 50;
	height: 80px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.35);
	transition: all .26s ease
}
.primary-navigation .logo {
	float: left;
	display: flex;
	width: 300px;
	height: 100%;
	place-items: center;
	transition: place-items .1s
}
.primary-navigation .logo img {
	vertical-align: middle
}
.primary-navigation .icon-searchbtn {
	position: relative;
	float: right;
	width: 30px;
	height: 30px;
	font-size: 1.2em;
	line-height: 30px;
	margin: 25px 10px;
	text-align: center
}
.primary-navigation .icon-searchbtn:before {
	content: '\e908';
	position: absolute;
	top: 0;
	left: 0;
	filter: opacity(1);
	visibility: visible;
	transition: all .1s .15s ease
}
.primary-navigation .icon-searchbtn:after {
	content: '\e91f';
	position: absolute;
	top: 0;
	left: 0;
	filter: opacity(0);
	visibility: hidden;
	transition: all .1s ease
}
.primary-navigation .icon-searchbtn.close:before {
	filter: opacity(0);
	visibility: hidden;
	transition: all .1s ease
}
.primary-navigation .icon-searchbtn.close:after {
	filter: opacity(1);
	visibility: visible;
	transition: all .1s .15s ease
}
.primary-navigation .icon-menubtn {
	float: right
}
.primary-navigation .primary-menu {
	float: right
}
.primary-navigation .primary-menu > ul > li {
	display: inline-block;
	width: 92px;
	margin-left: 40px
}
.primary-navigation .primary-menu > ul > li > a {
	position: relative;
	display: block;
	line-height: 80px;
	font-weight: 600;
	text-align: center;
	transition: line-height .3s .31
}
.primary-navigation .primary-menu > ul > li > a:after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 0;
	height: 5px;
	margin: 0 auto;
	border-radius: 1px;
	background: #0b76be;
	transition: width .3s .1s, transform .3s .1s, left .3s .1s
}
.primary-navigation .primary-menu >ul > li > a:hover:after {
	width: 100%;
	left: 0;
	transform: translateX(0)
}
.primary-slider-navigation {
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	height: 500px;
	max-height: 0;
	background: linear-gradient(to right, rgba(54,163,218,.99) calc(50% - 336px), rgba(255,255,255,.95) calc(50% - 336px), rgba(255,255,255,.95) 100%);
	overflow: hidden;
	will-change: max-height, box-shadow;
	transition: box-shadow .05s .1s, max-height .3s .15s
}
.primary-slider-navigation .container {
	display: flex;
	flex-wrap: nowrap
}
.primary-slider-navigation .category {
	width: 300px;
	margin-top: 60px
}
.primary-slider-navigation .category h4 {
	position: relative;
	line-height: 30px
}
.primary-slider-navigation .category h4:before {
	content: '';
	position: absolute;
	bottom: -20px;
	display: block;
	width: 90px;
	height: 5px;
	background: #0b76be
}
.primary-slider-navigation .category h4:after {
	content: '';
	position: absolute;
	left: 90px;
	bottom: -20px;
	border: 2.5px solid #0b76be;
	border-top-color: transparent;
	border-right-color: transparent
}
.primary-slider-navigation .category h4 .icon-arrow:before {
	content: '\e916';
	float: right;
	margin-right: 10px;
	font-weight: 400;
	color: #0b76be
}
.primary-slider-navigation .category ul {
	margin-top: 40px
}
.primary-slider-navigation .category li {
	width: 100%;
	height: 40px;
	line-height: 40px;
	transition: all .3s
}
.primary-slider-navigation .category li.active {
	background: #fff
}
.primary-slider-navigation .category a {
	display: block;
	padding-left: 10px
}
.primary-slider-navigation .contents {
	position: relative;
	width: calc(100% - 300px)
}
.primary-slider-navigation .summary {
	display: flex;
	justify-content: space-between;
	margin-left: 132px;
	padding-top: 60px
}
.primary-slider-navigation .summary h5 {
	position: relative;
	line-height: 30px
}
.primary-slider-navigation .summary h5 a:after {
	content: '\e91b';
	margin-left: 5px;
	font-weight: 400
}
.primary-slider-navigation .inquiry {
	position: absolute;
	bottom: 18px;
	white-space: nowrap;
	font-size: 0
}
.primary-slider-navigation .inquiry a {
	display: inline-block;
	width: 172px;
	line-height: 40px;
	margin-left: 22px;
	font-size: 1rem;
	text-align: center; color:#FFF;
}
.primary-slider-navigation .inquiry a:before {
	margin-right: 5px
}
.primary-slider-navigation .inquiry a:nth-child(1):before {
	content: '\e90e'
}
.primary-slider-navigation .inquiry a:nth-child(2):before {
	content: '\e90f'
}
.primary-slider-navigation .inquiry a:nth-child(3):before {
	content: '\e910'
}
.primary-slider-navigation .inquiry a:nth-child(4):before {
	content: '\e905'
}
.primary-slider-navigation .inquiry a:nth-child(5):before {
	content: '\e901'
}
.primary-slider-navigation .summary h5:before {
	content: '';
	position: absolute;
	bottom: -20px;
	width: 80px;
	height: 5px;
	background: #0b76be
}
.primary-slider-navigation .summary h5:after {
	content: '';
	position: absolute;
	left: 80px;
	bottom: -20px;
	border: 2.5px solid #0b76be;
	border-top-color: transparent;
	border-right-color: transparent
}
.primary-slider-navigation .summary a:hover {
	color: #0b76be
}
.primary-slider-navigation .summary ul {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(8, 1fr);
	grid-column-gap: 48px;
	grid-row-gap: 2px;
	margin-top: 40px;
	line-height: 30px
}
.primary-slider-navigation .inquiry a {
	background: #0b76be
}
.primary-slider-navigation .inquiry a:hover {
	background: #dcf088
}
.secondary-slider-navigation {
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	background: rgba(255,255,255,.95);
	max-height: 0;
	overflow: hidden;
	transition: box-shadow .05s .1s, max-height .3s .15s;
	will-change: max-height, box-shadow
}
.search-container {
box-shadow:0 5px 5px #000
}

.search-container:before {
content:'';
position:absolute;
z-index:99;
top:0;
width:100%;
height:10px;
background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,0))
}

.search-container .searchform {
box-sizing:border-box;
width:calc(100% - 300px);
padding-top:86px
}

.search-container form {
margin:15px 0
}

.search-container input[type=text] {
float:left;
width:720px;
height:46px;
border:1px solid #f0f0f0;
border-right:none;
text-indent:10px
}

.search-container input[type=submit] {
width:155px;
height:48px;
font-size:1.2em;
font-family:icons;
color:#fff;
background:#0b76be;
cursor:pointer
}

.search-container .popular-search {
margin-top:15px;
color:#999
}

.search-container .popular-search a {
margin:0 2px;
color:#333
}

.search-container .popular-search a:hover {
text-decoration:underline
}

.search-container.sliderdown {
max-height:500px
}

.mobile-slider-navigation {
line-height:50px
}

.mobile-slider-navigation:before {
content:'';
position:absolute;
z-index:99;
top:0;
width:100%;
height:10px;
background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,0))
}

.mobile-slider-navigation > ul {
width:100%;
margin-top:10px
}

.mobile-slider-navigation li ul {
max-height:0;
overflow:hidden;
transition:all .3s ease
}

.mobile-slider-navigation li {
box-sizing:border-box;
width:100%;
padding:0 20px;
border-bottom:2px solid #f0f0f0
}

.mobile-slider-navigation li:nth-last-child(1) {
border-bottom:none
}

.mobile-slider-navigation a {
display:block
}

.mobile-slider-navigation a:after {
content:'\e916';
float:right;
display:block
}

.mobile-slider-navigation span {
position:relative;
display:block;
cursor:pointer;
pointer-events:none
}

.mobile-slider-navigation span:before {
content:'';
position:absolute;
top:17px;
right:7.5px;
display:block;
width:2px;
height:16px;
border-radius:2px;
background:#333;
transition:all .6s
}

.mobile-slider-navigation span:after {
content:'';
position:absolute;
top:24px;
right:0;
display:block;
width:16px;
height:2px;
border-radius:2px;
background:#333;
transition:all .6s
}

.mobile-slider-navigation.sliderdown {
max-height:calc(100vh - 100px);
overflow-y:auto
}

.mobile-slider-navigation li.sliderdown ul {
max-height:500px;
border-top:2px solid #f0f0f0;
overflow-y:auto
}

.mobile-slider-navigation li.sliderdown span:before {
transform:rotate(270deg)
}

.mobile-slider-navigation li.sliderdown span:after {
transform:rotate(180deg)
}

.primary-navigation .primary-menu > ul > li > div:before {
content:'';
position:absolute;
z-index:99;
top:0;
width:100%;
height:10px;
background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,0))
}

.primary-navigation .primary-menu > ul > li:hover > div {
z-index:50;
max-height:600px;
box-shadow:0 5px 5px rgba(0,0,0,.15);
transition:max-height .3s .1s,box-shadow .05s .2s
}

.primary-navigation.sticky-state {
height:60px;
background:rgba(255,255,255,.95)
}

.primary-navigation.sticky-state .icon-searchbtn {
margin:15px 10px
}

.primary-navigation.sticky-state .primary-menu > ul > li > a {
line-height:60px
}

.primary-navigation.sticky-state .secondary-slider-navigation,.primary-navigation.sticky-state .primary-slider-navigation {
top:60px
}

.footer-navigation {
padding:80px 0;
font-size:14px;
line-height:1.8em;
color:#999;
background:#151c30
}

.footer-navigation .container {
display:flex;
flex-wrap:wrap;
justify-content:space-between
}

.footer-navigation h5 {
margin-bottom:30px;
color:#fff
}

.footer-navigation a:hover {
color:#0b76be
}

.footer-navigation .quick-navigation ul {
display:grid;
grid-auto-flow:column;
grid-template-rows:repeat(8,1fr);
grid-column-gap:25px
}

.footer-navigation .followus {
margin-top:10px
}

.footer-navigation .followus i {
display:inline-block;
width:80px;
font-style:normal;
text-align:center;
cursor:pointer;
transition:all .1s .1s
}

.footer-navigation .followus i:before {
content:'\e927';
display:block;
width:48px;
height:48px;
margin:10px auto;
line-height:48px;
font-size:1.4em;
border:1px solid #999;
border-radius:50%;
color:#888;
text-align:center;
transition:all .1s .1s
}

.footer-navigation .followus .icon-tiktokofficialaccount:before {
content:'\e92a'
}

.footer-navigation .followus .icon-wetchatservice:before {
content:'\e927'
}

.footer-navigation .followus i:hover {
color:#fff;
border-color:#0b76be
}

.footer-navigation .followus i:hover:before {
color:#fff;
background:#0b76be;
border-color:#0b76be
}

.footer {
height:80px;
color:#666;
font-size:14px;
background:#21283b
}

.footer .container {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
place-items:center
}

.footer .company {
color:#0b76be;
margin-right:10px
}

.footer a {
margin-right:10px
}

.footer .sns span {
margin:0 3px;
font-size:1.4em;
font-family:icons
}

.footer .sns span:hover {
color:#0b76be
}

.dialog {
position:fixed;
z-index:100;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,1);
max-width:-webkit-fill-available;
max-height:-webkit-fill-available;
transition:background .15s linear
}

.dialog.fadein {
background:rgba(0,0,0,.5)
}

.dialog-modal {
position:absolute;
top:50%;
left:50%;
max-width:100%;
max-height:100%;
border-radius:5px;
transform:translate(-50%,-50%);
background:#fff;
pointer-events:auto
}

.dialog-modal .dialog-modal-header {
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
align-items:flex-start;
padding:1rem;
font-size:1.2em;
border-bottom:1px solid #f0f0f0
}

.dialog-modal .dialog-modal-title {
font-weight:600
}

.dialog-modal .dialog-modal-close {
cursor:pointer
}

.dialog-modal .dialog-modal-body {
padding:40px 0;
text-align:center
}

.dialog-modal .dialog-modal-body .qrcode {
width:400px;
height:160px;
margin:10px auto
}

.dialog-modal .dialog-modal-body .message {
display:flex;
flex-direction:column;
justify-content:center;
width:160px;
height:140px;

margin:10px auto;
color:#6c757d;
background:#e9ecef;
cursor:pointer
}

.dialog-modal .agreement {
margin-top:10px;
font-size:14px;
color:#666
}

.dialog-modal .dialog-modal-content strong,.dialog-modal .dialog-modal-content a {
color:#0b76be
}

.tooltip {
position:absolute;
box-sizing:border-box;
max-width:200px;
padding:5px;
border-radius:3px;
font-size:12px;
transform:translate(-50%,-100%);
background:#fff;
box-shadow:0 0 1px 1px #f0f0f0;
vertical-align:bottom
}

.tooltip:after {
content:'';
position:absolute;
z-index:-1;
left:50%;
bottom:-10px;
display:block;
width:10px;
height:10px;
border-bottom:1px solid #f0f0f0;
border-right:1px solid #f0f0f0;
background:#fff;
transform:rotate(45deg) translateX(-50%)
}

.float-contact {
position:fixed;
z-index:50;
top:50%;
right:10px;
transform:translateY(-50%);
width:52px;
padding:15px 0;
color:#fff;
background:#0b76be
}

.float-contact .icon-wechat {
display:block;
width:52px;
line-height:52px;
font-size:1.6em;
text-align:center;
cursor:pointer
}

.float-contact .wechat-service-qrcode {
position:absolute;
left:-12px;
bottom:-20px;
transform:translateX(-100%);
box-sizing:border-box;
width:110px;
padding:8px 8px 2px;
border:1px solid #f0f0f0;
font-size:14px;
text-align:center;
color:#333;
background:#fff;
box-shadow:0 0 3px #f0f0f0;
filter:opacity(0);
visibility:hidden;
transition:all .16s ease-in
}

.float-contact .wechat-service-qrcode:after {
content:'';
position:absolute;
z-index:1;
right:-5.5px;
top:50%;
display:block;
width:13px;
height:13px;
border:1px solid #f0f0f0;
background:#fff;
box-shadow:0 0 3px #f0f0f0;
transform:translateY(-50%) rotate(-45deg);
clip-path:polygon(18px 0,18px 18px,0 18px);
filter:inherit;
visibility:inherit;
transition:all .06s
}

.float-contact .icon-wechat:hover {
background:#0b76be
}

.float-contact .icon-wechat:hover ~.wechat-service-qrcode {
filter:opacity(1);
visibility:visible
}

.float-contact a {
display:block;
white-space:nowrap;
width:52px;
height:52px;
overflow:hidden
}

.float-contact a:hover {
width:fit-content;
transform:translateX(calc(52px - 100%));
background:linear-gradient(90deg,#0b76be,#0b76be 50%,#016ad1);
transition:all .26s .1s ease
}

.float-contact a:before {
content:'\e903';
display:inline-block;
width:52px;
line-height:52px;
font-size:1.6em;
text-align:center;
background-image:linear-gradient(90deg,#0b76be,#fff 50%,#0b76be);
background-repeat:no-repeat;
background-position:center bottom;
background-size:40px 1px;
transition:width .2s .1s ease,background-position 10s 10s
}

.float-contact .callus:before {
content:'\e901'
}

.float-contact a span {
display:inline-block;
height:52px;
padding-right:20px;
line-height:52px
}

.float-contact a:hover:before {
background:none
}

.gotopbtn {
position:fixed;
right:10px;
bottom:10px;
display:block;
width:52px;
line-height:52px;
font-size:1.4em;
font-family:icons;
text-align:center;
background:#f0f0f0;
opacity:0;
visibility:hidden;
transition:all .3s ease
}

.gotopbtn:hover {
color:#fff;
background:#0b76be
}

.gotopbtn.fadein {
opacity:1;
visibility:visible
}

.float-notify {
position:fixed;
z-index:60;
top:20%;
left:50%;
transform:translate(-50%,0);
box-sizing:border-box;
max-width:100%;
width:500px;
padding:20px 120px;
font-weight:600;
text-align:center;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.15);
filter:opacity(0);
transition:filter .3s
}

.float-notify.fadein {
filter:opacity(1)
}

.float-confirm {
position:fixed;
z-index:60;
top:20%;
left:50%;
transform:translate(-50%,0);
box-sizing:border-box;
max-width:100%;
width:500px;
padding:20px;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.15);
filter:opacity(0);
transition:filter .3s
}

.float-confirm.fadein {
filter:opacity(1)
}

.float-confirm .confirm-close {
position:absolute;
top:10px;
right:10px;
font-family:icons;
color:#666;
cursor:pointer;
transition:color .3s
}

.float-confirm .confirm-close:hover {
color:#333
}

.float-confirm .confirm-content {
margin:20px 0;
color:#666
}

.float-confirm .confirm-action span {
float:right;
display:inline-block;
width:90px;
line-height:30px;
margin-left:12px;
text-align:center;
background:#f0f0f0;
cursor:pointer
}

.float-confirm .confirm-action .confirm-accept {
color:#fff;
background:#0b76be
}

.float-video {
position:fixed;
z-index:10;
top:50%;
left:0;
transform:translate(calc(50vw - 50%),-50%);
max-width:80vw;
max-height:80vh;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.15);
transition:all .26s ease-in-out
}

.float-video .video-close {
position:absolute;
z-index:20;
top:15px;
right:15px;
color:#666;
cursor:pointer;
transition:color .3s
}

.float-video .video-close:hover {
color:#333
}

.float-video .video-close:before {
content:'\e91f'
}

.float-video .video-foot {
box-sizing:border-box;
margin-top:10px;
padding:0 10px;
line-height:50px
}

.float-video .video-name {
float:left;
font-size:20px;
font-weight:600
}

.float-video .more {
float:right
}

.float-video .more:after {
content:'\e913';
margin-left:10px
}

.underscore-section-title {
position:relative;
display:block;
padding-bottom:15px
}

.underscore-section-title:before {
content:'';
position:absolute;
bottom:0;
left:0;
width:80px;
height:5px;
background:#0b76be
}

.underscore-section-title:after {
content:'';
position:absolute;
left:80px;
bottom:0;
border:2.5px solid #0b76be;
border-top-color:transparent;
border-right-color:transparent
}

.underscore-slogan-title {
position:relative;
display:block;
padding-bottom:20px;
font-size:20px;
font-weight:600;
white-space:pre-line
}

.underscore-slogan-title:before {
content:'';
position:absolute;
bottom:0;
left:0;
width:187px;
height:5px;
background:#0b76be
}

.underscore-slogan-title:after {
content:'';
position:absolute;
left:187px;
bottom:0;
border:2.5px solid #0b76be;
border-top-color:transparent;
border-right-color:transparent
}

.underscore-head-title {
position:relative;
display:block;
padding-bottom:16px
}

.underscore-head-title:before {
content:'';
position:absolute;
bottom:0;
left:0;
width:187px;
height:5px;
background:#0b76be
}

.underscore-head-title:after {
content:'';
position:absolute;
left:187px;
bottom:0;
border:2.5px solid #0b76be;
border-top-color:transparent;
border-right-color:transparent
}

.section {
margin-top:40px
}

.entry-content {
line-height:1.8
}

.entry-content p,.entry-content div {
margin:12px 0
}

.entry-content h2 {
margin:20px 0 16px
}

.entry-content h3 {
margin:16px 0 14px
}

.entry-content h4 {
margin:14px 0 12px
}

.entry-content h5,.entry-content h6 {
margin:12px 0
}

.entry-content ul {
margin:8px 0 0 8px;
line-height:1.5;
list-style:inside disc
}

.entry-content ol {
margin:8px 0 0 8px;
line-height:1.5;
list-style:inside decimal
}

.entry-content li {
margin:5px 0
}

.entry-content li::marker {
margin-right:5px
}

.entry-content dl dt {
margin:12px 0;
font-weight:600
}

.entry-content dl dd {
margin:8px 0 0 16px
}

.entry-content table {
margin:10px auto;
border-collapse:collapse
}

.entry-content table td {
padding:5px;
border:1px solid #ccc;
word-break:break-all
}

.entry-content table tr:nth-child(2n+1) {
background:#eee
}

.entry-content a {
color:#549ccf
}

.entry-content .content-navigation {
float:right;
max-width:500px;
margin-top:0;
margin-left:20px;
padding:10px 10px 15px;
font-size:.9rem;
line-height:1.2em;
background:#f6f5f5
}

.entry-content .content-navigation h2 {
margin:10px 0 0;
font-size:1.2rem;
text-align:center
}

.entry-content .content-navigation ul {
counter-reset:item
}

.entry-content .content-navigation li {
display:table;
counter-increment:item;
margin-top:10px
}

.entry-content .content-navigation li:before {
content:counters(item,".") ". ";
display:table-cell;
padding-right:.2em;
font-family:Arial;
vertical-align:inherit
}

.entry-content .content-navigation li li:before {
content:counters(item,".") " "
}

.loadmore {
display:block;
width:190px;
line-height:45px;
margin:10px auto;
text-align:center;
background:#f0f0f0;
transition:all .16s;
cursor:pointer
}

.loadmore:hover {
background:#0b76be
}

.breadcrumbnav {
border-bottom:1px solid #f0f0f0;
font-size:14px;
line-height:1;
color:#999
}

.breadcrumbnav .container {
padding:15px 0;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden
}

.breadcrumbnav a:hover {
text-decoration:underline
}

.post-meta {
width:100%;
margin-top:30px;
line-height:20px;
padding-bottom:15px;
color:#999
}

.post-meta > span {
margin-right:20px
}

.post-meta > span:nth-child(n+2):before {
margin-right:2px
}

.post-meta .post-date:before {
content:'\e95d'
}

.post-meta .post-views:before {
content:'\e907'
}

.post-meta .post-likes:before {
content:'\e934'
}

.post-action {
position:relative;
z-index:10;
width:100%;
font-size:14px;
text-align:center;
white-space:nowrap
}

.post-action > span {
box-sizing:border-box;
display:inline-block;
padding:0 20px;
line-height:46px;
margin:0 5px;
border:2px solid #f0f0f0;
cursor:pointer;
transition:all .3s;
pointer-events:auto
}

.post-action > span:hover {
border-color:#0b76be
}

.post-action .post-like.liked {
color:#0b76be;
border-color:#0b76be
}

.post-action .post-favorite.favorited {
color:#0b76be;
border-color:#0b76be
}

.post-action > span:before {
margin-right:5px
}

.post-action .post-like:before {
content:'\e934'
}

.post-action .post-like.liked:before {
content:'\e935'
}

.post-action .post-favorite:before {
content:'\e94f'
}

.post-action .post-share:before {
content:'\e931'
}

.post-share-container {
position:absolute;
top:60px;
box-sizing:border-box;
width:140px;
padding:15px;
text-align:center;
color:#666;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35)
}

.post-share-container:before {
content:'';
position:absolute;
z-index:-1;
top:-6px;
left:50%;
transform:translateX(-50%) rotate(45deg);
display:block;
width:15px;
height:15px;
box-shadow:0 0 5px rgba(0,0,0,.35)
}

.post-share-container:after {
content:'';
position:absolute;
z-index:1;
top:-5px;
left:50%;
transform:translateX(-50%) rotate(45deg);
display:block;
width:15px;
height:15px;
background:#fff
}

.post-share-container span {
display:block
}

.post-share-container .copy-url {
cursor:pointer
}

.post-share-container .copy-url:before {
content:'\e91b';
margin-right:5px;
color:#0b76be
}

.post-share-container .qrcode {
margin-top:10px;
line-height:2
}

.component-interactive {
position:relative;
z-index:40;
display:flex;
flex-wrap:nowrap;
font-size:14px;
color:#999
}

.component-interactive > div {
padding-left:24px;
cursor:pointer;
transition:all .2s
}

.component-interactive .liked {
color:#0b76be
}

.component-interactive .applets:before {
content:'\e932';
margin-right:5px
}

.component-interactive .follows:before {
content:'\e933';
color:#0b76be;
margin-right:5px
}

.component-interactive .share:before {
content:'\e931';
margin-right:5px
}

.component-interactive .like:before {
content:'\e935'
}

.component-interactive .interactivebox {
position:absolute;
top:30px;
box-sizing:border-box;
padding:10px 15px;
text-align:center;
color:#666;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35)
}

.component-interactive .interactivebox.qrcodes {
display:flex
}

.component-interactive .interactivebox:before {
content:'';
position:absolute;
z-index:-1;
top:-6px;
left:50%;
transform:translateX(-50%) rotate(45deg);
display:block;
width:15px;
height:15px;
box-shadow:0 0 5px rgba(0,0,0,.35)
}

.component-interactive .interactivebox:after {
content:'';
position:absolute;
z-index:1;
top:-5px;
left:50%;
transform:translateX(-50%) rotate(45deg);
display:block;
width:15px;
height:15px;
background:#fff
}

.component-interactive .interactivebox span {
display:block
}

.component-interactive .interactivebox .copy-url {
margin-top:5px;
cursor:pointer
}

.component-interactive .interactivebox .copy-url:before {
content:'\e91b';
margin-right:5px;
color:#0b76be
}

.component-interactive .interactivebox .qrcode {
width:110px;
margin-top:10px;
line-height:2
}

.component-interactive .interactivebox.qrcodes .qrcode {
width:80px;
margin:10px
}

.section-feedback-brochure {
	display: flex;
	flex-wrap: wrap;
	place-items: center;
	width: 100%;
	height: 500px
}
.section-feedback-brochure .map-container {
	width: 50%;
	height: 100%;
	background: #f0f0f0
}
.section-feedback-brochure .brochure {
	box-sizing: border-box;
	width: 636px;
	padding-right: 60px;
	margin-left: calc(50% - 636px)
}
.section-feedback-brochure .brochure-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	place-items: center
}
.section-feedback-brochure .brochure-screenshot {
	width: 350px;
	margin-top: 20px
}
.section-feedback-brochure .cover {
	box-sizing: border-box;
	width: 350px;
	height: 310px;
	border: 5px solid #f0f0f0
}
.section-feedback-brochure .brochure-name {
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 600
}
.section-feedback-brochure .brochure-summary {
	width: 200px
}
.section-feedback-brochure .brochure-key {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 20px
}
.section-feedback-brochure .brochure-key li {
	box-sizing: border-box;
	width: 45%;
	margin-top: 10px
}
.section-feedback-brochure .brochure-key li:before {
	content: '\e924';
	margin-right: 5px;
	color: #8ab923
}
.section-feedback-brochure .brochure-dowloadbtn {
	display: block;
	line-height: 50px;
	font-weight: 600;
	text-align: center;
	background: #0b76be
}
.section-feedback-brochure .brochure-dowloadbtn:before {
	content: '\e936';
	margin-right: 10px
}
.section-feedback-brochure .feedback {
	width: 50%;
	height: 100%;
	background: #0b76be
}
.section-feedback-brochure .frame {
	box-sizing: border-box;
	width: 636px;
	padding-top: 70px;
	padding-left: 40px
}
.section-feedback-brochure .frame h4{ color:#fff;}
.section-feedback-brochure .prompt {
	margin: 15px 0 20px 0;
	font-size: 14px;
	color: #e5e5e5
}
.section-feedback-brochure form p {
	margin: 8px 0
}
.section-feedback-brochure input[type=text] {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	border: 1px solid #0f9fff;
	text-indent: 10px;
	background: #0d87d9;
	color:#e5e5e5;
}

.section-feedback-brochure input:input-placeholder{ color:#ccc !important;}
.section-feedback-brochure ::-webkit-input-placeholder{ color:#ccc !important;}
.section-feedback-brochure :-moz-placeholder{ color:#ccc !important;}
.section-feedback-brochure::-moz-placeholder{ color:#ccc !important;}
.section-feedback-brochure :-ms-input-placeholder{ color:#ccc !important;}


.section-feedback-brochure input[type=text]:placeholder{
	color:#e5e5e5;
} 
.section-feedback-brochure textarea {
	box-sizing: border-box;
	width: 100%;
	height: 100px;
	border: 1px solid #0f9fff;
	padding: 10px;
	background: #0d87d9;
	transition: filter .16s;
	resize: none
}
.section-feedback-brochure input[type=submit] {
	width: 110px;
	margin-top: 2px;
	line-height: 40px;
	color: #fff;
	background: #00d2ff;
	filter: brightness(.9);
	cursor: pointer
}
.section-feedback-brochure input[type=submit]:hover {
	filter: brightness(1)
}

.extend-section strong.underscore-section-title {
display:block;
font-size:1.8em
}

.extend-section .items {
margin-top:30px
}

.extend-section .carousel-prev,.extend-section .carousel-next {
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
display:inline-block;
width:35px;
height:70px;
line-height:70px;
font-family:icons;
text-align:center;
color:#fff;
background:rgba(11,118,190,.5);
cursor:pointer;
transition:all .16s
}

.extend-section .carousel-prev {
transform:translateY(-50%) rotate(180deg);
right:auto;
left:0
}

.extend-section .carousel-prev:hover,.extend-section .carousel-next:hover {
background:rgba(186,226,16,1)
}

.extend-section-popular-products .item {
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
place-items:center;
padding-bottom:24px;
border-bottom:2px solid #f0f0f0
}

.extend-section-popular-products .figure {
box-sizing:border-box;
width:calc(50% - 12px);
text-align:center;
padding:0 10px
}

.extend-section-popular-products .content {
width:calc(50% - 12px);
line-height:1.6
}

.extend-section-popular-products .name {
display:block;
margin-bottom:12px
}

.extend-section-popular-products .more,.extend-section-popular-products .chat {
display:block;
font-size:14px
}

.extend-section-popular-products a:hover {
color:#0b76be
}

.extend-section-popular-products .more:before {
content:'\e911';
margin-right:10px;
color:#0b76be
}

.extend-section-popular-products .chat:before {
content:'\e923';
margin-right:10px;
color:#0b76be
}

.extend-section-related-projects .item {
padding-bottom:20px;
text-align:center;
background:#f0f0f0;
transition:all .26s .1s ease
}

.extend-section-related-projects .item strong:before {
content:'';
display:block;
width:70px;
height:5px;
margin:20px auto;
background:#dcdcdc;
transition:all .26s .1s ease
}

.extend-section-related-projects .item p {
padding:10px 80px;
font-size:14px;
line-height:2;
color:#666
}

.extend-section-related-projects .item:hover {
background:#0b76be
}

.extend-section-related-projects .item:hover strong:before {
background:#9fbf19
}

.extend-section-related-projects .item:hover p {
color:#333
}

.extend-section-related-products .item {
padding-bottom:20px;
border-bottom:2px solid #f0f0f0;
text-align:center
}

.extend-section-related-products img {
width:50%
}

.extend-section-related-products .name {
display:block;
margin-top:20px
}

.extend-section-related-videos img {
filter:brightness(0.5)
}

.extend-section-topics .item strong {
display:block;
margin:20px 0 10px;
font-size:18px
}

.extend-section-topics .item p {
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
font-size:14px;
color:#999
}

.extend-section-related-posts {
overflow:hidden
}

.extend-section-related-posts .items {
display:flex;
flex-flow:column;
justify-content:space-between
}

.extend-section-related-posts .items li {
position:relative;
padding-left:15px;
padding-bottom:8px;
margin-bottom:8px;
border-bottom:1px solid #f0f0f0
}

.extend-section-related-posts .items li:before {
content:'\e924';
position:absolute;
top:5px;
left:0;
display:inline-block;
font-size:6px;
text-align:center;
color:#8ab923
}

.extend-section-related-posts .items a {
display:block;
width:calc(100% - 84px);
font-size:18px;
color:#666;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.extend-section-related-posts .views {
position:absolute;
right:10px;
top:5px;
font-size:14px;
color:#999
}

.extend-section-related-posts .views:before {
content:'\e907';
margin-right:5px
}

.extend-section-related-posts .summary {
margin-top:5px;
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#999
}

.extend-section-topic-posts {
display:grid;
grid-template-columns:2fr 1fr;
grid-gap:24px
}

.extend-section-topic-posts .items {
margin-top:20px
}

.extend-section-topic-posts .item strong {
display:block;
font-size:18px
}

.extend-section-topic-posts .section-topics .item strong {
margin:20px 0 10px
}

.extend-section-topic-posts .section-topics p {
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
font-size:14px;
color:#999
}

.extend-section-project-video {
padding:60px 0 50px;
text-align:center;
background:url(../images/project-video-bg.jpg) no-repeat center top
}

.extend-section-project-video strong.underscore-section-title {
display:inline-block
}

.extend-section-project-video .project-container {
position:relative;
margin-top:50px
}

.extend-section-project-video .project-items {
width:100%;
white-space:nowrap;
overflow:hidden
}

.extend-section-project-video .project-items .item {
display:inline-block;
box-sizing:border-box;
width:calc(34% - 24px);
margin-right:24px;
vertical-align:top
}

.extend-section-project-video .project-items p {
margin:10px 0
}

.extend-section-project-video div[role=button] {
top:45%
}

.extend-section-project-video .video-items {
margin-top:30px;
white-space:nowrap;
overflow-x:auto
}

.extend-section-project-video .video-items .item {
display:inline-block;
width:calc((100% - 72px) / 4);
margin-right:24px
}

.extend-section-project-video .video-items .item:nth-last-child(1) {
margin-right:0
}

.extend-section-carousel-project {
padding-bottom:30px;
background:#f0f0f0
}

.extend-section-carousel-project .carousel-container {
position:relative;
margin-top:30px
}

.extend-section-carousel-project .carousel-scroll {
white-space:nowrap;
overflow:hidden
}

.extend-section-carousel-project .carousel-scroll .item {
display:inline-flex;
flex-wrap:wrap;
justify-content:space-between;
place-items:center;
box-sizing:border-box;
width:100%;
padding:10px;
vertical-align:bottom;
background:#fff
}

.extend-section-carousel-project .carousel-scroll .figure {
width:calc(50% - 24px)
}

.extend-section-carousel-project .carousel-scroll .content {
width:calc(50% - 24px);
white-space:normal
}

.extend-section-carousel-project h4 {
display:inline-block
}

.extend-section-carousel-project h4:after {
content:'';
display:block;
width:120%;
height:2px;
margin-top:10px;
background:#0b76be
}

.extend-section-carousel-project .summary {
margin-top:20px;
line-height:1.6;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.extend-section-carousel-project .review {
margin-top:20px;
line-height:1.6
}

.extend-section-carousel-project .review p {
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden
}

.extend-section-carousel-project .more {
display:inline-block;
margin-top:30px;
padding:0 15px;
font-size:14px;
line-height:35px;
background:#0b76be
}

.extend-section-carousel-project .more:after {
content:'\e914';
margin-left:10px;
font-size:12px
}

.extend-section-carousel-project .carousel-indicator {
position:absolute;
bottom:-40px;
width:100%;
text-align:center
}

.extend-section-carousel-project .carousel-indicator span {
display:inline-block;
width:84px;
height:10px;
margin:0 12px;
background:#aeb0b6;
cursor:pointer;
transition:all .16s
}

.extend-section-carousel-project .carousel-indicator span.carousel-indicator-active {
background:#0b76be
}

.extend-section-main-products .extend-section-main-product-head {
height:270px;
font-weight:600;
background:url(..images/main-products-head-bg.png) no-repeat bottom center
}

.extend-section-main-products .title {
float:right;
margin-top:90px;
font-size:20px;
line-height:1.8;
text-align:right;
color:#fff
}

.extend-section-main-products h2 {
color:#0b76be
}

.extend-section-main-products ul {
margin-top:40px
}

.extend-section-main-products li {
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
place-items:center;
padding:30px 0;
border-bottom:2px solid #f0f0f0
}

.extend-section-main-products .figure {
box-sizing:border-box;
width:calc(50% - 12px);
text-align:center;
padding:0 10px
}

.extend-section-main-products .content {
width:calc(50% - 12px);
line-height:1.6
}

.extend-section-main-products .name {
display:block;
margin-bottom:12px
}

.extend-section-main-products .more,.extend-section-main-products .chat {
display:block;
font-size:14px
}

.extend-section-main-products a:hover {
color:#0b76be
}

.extend-section-main-products .more:before {
content:'\e911';
margin-right:10px;
color:#0b76be
}

.extend-section-main-products .chat:before {
content:'\e923';
margin-right:10px;
color:#0b76be
}

.extend-section-material .item {
position:relative;
padding-top:200%;
background:#f0f0f0;
overflow:hidden;
transition:all .16s .05s ease
}

.extend-section-material .item img {
position:absolute;
top:0;
bottom:50%;
display:block;
transition:all .6s .05s ease
}

.extend-section-material .item span {
position:absolute;
top:50%;
bottom:0;
box-sizing:border-box;
width:100%;
padding:4px;
display:flex;
justify-content:center;
place-items:center;
text-align:center
}

.extend-section-material .item:hover {
background:#0b76be
}

.extend-section-material .item:hover img {
transform:scale(1.1)
}

.business-banner {
position:relative;
overflow:hidden
}

.business-banner .presentation {
position:absolute;
z-index:10;
top:50%;
left:calc(50% - 636px);
transform:translateY(-50%);
color:#fff;
white-space:pre-line
}

.section-material {
margin-top:40px;
margin-bottom:40px
}

.section-material .items {
margin-top:30px
}

.business-body {
margin-bottom:40px
}

.business-body .category {
display:grid;
grid-template-columns:repeat(4,1fr);
box-sizing:border-box;
line-height:80px;
padding:0 20px;
font-size:20px;
font-weight:600;
background:#f0f0f0;
text-align:center
}

.business-body .category a {
display:block;
box-sizing:border-box;
width:100%;
transition:background .16s
}

.business-body .category a:hover {
border-top:4px solid #0b76be;
background:#fff;
line-height:74px
}

.business-body .product-category {
margin-top:60px
}

.business-body .headline {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
place-items:baseline
}

.business-body .headline .description {
width:calc(100% - 367px);
color:#666
}

.business-body .headline .description p strong {
text-decoration:underline
}

.business-body .items {
margin-top:30px;
font-size:14px;
text-align:center
}

.business-body .item {
position:relative;
padding:40px 0 20px;
border:2px solid #f0f0f0
}

.business-body .item .figure {
display:flex;
place-items:end;
justify-content:space-around;
place-items:center;
width:90%;
height:auto;
padding:40px 5%;
border-bottom:2px solid #f0f0f0
}
.prdlistico img{ height:242px !important;}

.business-body .item .technical {
height:38px;
margin-top:30px;
line-height:1.6;
 text-align:left;
}

.business-body .item .technical p {
padding:0 1px
}

.business-body .item .technical p .name {
font-weight:700
}

.business-body .item .technical p:nth-child(3) {
display:none
}

.business-body .action {
margin-top:30px;
font-size:14px;
overflow:hidden
}

.business-body .action a {
float:left;
display:block;
box-sizing:border-box;
width:calc(50% - 30px);
line-height:46px;
border:2px solid #f0f0f0;
margin-left:20px;
transition:all .16s ease
}

.business-body .action .chat {
border-color:#0b76be
}

.business-body .action .mobile {
width:calc(98% - 30px)!important;
background:#0b76be;
margin-top:10px;
font-size:16px;
font-weight:700; color:#FFF;
}

.business-body .action .mobile:before {
content:'\e903';
font-size:1.6em;
padding-right:10px
}

.business-body .action .more:hover {
background:#0b76be;
border-color:#0b76be
}

.business-body .item:hover,.business-body .item:hover .figure {
border-color:#0b76be
}

.business-body #matching {
position:relative
}

.business-body #matching .items {
padding-top:30px;
margin-top:0;
white-space:nowrap;
overflow:hidden
}

.business-body #matching .item {
display:inline-block;
width:calc((100% - 72px)/4);
min-width:260px;
margin-right:24px;
vertical-align:top
}

.business-body #matching span[role=button] {
position:absolute;
top:50%;
transform:translateY(-50%);
display:block;
width:40px;
line-height:80px;
font-family:icons;
font-size:30px;
background:rgba(240,240,240,.7);
text-align:center
}

.business-body #matching .carousel-prev {
left:2px;
transform:translateY(-50%) rotate(180deg)!important
}

.business-body #matching .carousel-next {
right:2px
}

.business-body #matching span[role=button]:active {
color:#0b76be
}

@media(max-width:1272px) {
h1 {
font-size:1em
}

h2 {
font-size:1.45em
}

h3 {
font-size:1.35em
}

h4 {
font-size:1.25em
}

h5 {
font-size:1.15em
}

.container {
width:calc(100% - 20px);
margin-left:10px;
margin-right:10px
}

.grid-2 {
grid-template-columns:1fr 1fr
}

.grid-3 {
grid-template-columns:repeat(3,1fr)
}

.grid-4 {
grid-template-columns:repeat(4,1fr)
}

.grid-5 {
grid-template-columns:repeat(5,1fr)
}

.grid-6 {
grid-template-columns:repeat(6,1fr)
}

.grid-8 {
grid-template-columns:repeat(6,1fr);
grid-gap:12px
}

.grid-10 {
grid-template-columns:repeat(8,1fr);
grid-gap:12px
}

.grid-12 {
grid-template-columns:repeat(10,1fr);
grid-gap:12px
}

.head-navigation {
display:none
}

.primary-navigation {
position:fixed;
z-index:60;
top:0;
height:60px;
background:rgba(255,255,255,.2)
}

.primary-navigation .primary-menu {
display:none
}

.primary-navigation .icon-searchbtn {
margin:15px!important;
color:#fff
}

.primary-navigation.sticky-state .icon-searchbtn {
color:#333
}

.primary-navigation .icon-menubtn {
position:relative;
top:18px;
display:block;
width:24px;
height:1.6px;
padding:10px 0;
background-color:#fff;
background-clip:content-box;
transition:all .3s ease
}

.primary-navigation .icon-menubtn:before {
content:'';
position:absolute;
top:0;
display:block;
width:100%;
height:1.6px;
background:inherit;
transition:transform .16s ease
}

.primary-navigation .icon-menubtn:after {
content:'';
position:absolute;
bottom:0;
display:block;
width:100%;
height:1.6px;
background:inherit;
transition:transform .16s ease
}

.primary-navigation.sticky-state .icon-menubtn {
background-color:#333
}

.primary-navigation .icon-menubtn.close {
background-color:transparent
}

.primary-navigation .icon-menubtn.close:before {
background-color:#333;
transform:translateY(10px) rotate(45deg)
}

.primary-navigation .icon-menubtn.close:after {
background-color:#333;
transform:translateY(-10px) rotate(-45deg)
}

.secondary-slider-navigation {
top:60px;
background:rgba(255,255,255,.95)
}

.search-container .searchform {
width:90%;
min-width:280px;
padding:40px 0;
margin:0 auto
}

.search-container input[type=text] {
width:calc(100% - 102px)
}

.search-container input[type=submit] {
width:100px
}

.secondary-slider-navigation .links {
display:none
}

.footer-navigation {
padding-top:60px;
padding-bottom:20px
}

.footer-navigation .quick-navigation {
display:none
}

.footer-navigation h5 {
margin-bottom:20px
}

.footer {
display:none
}

.float-contact {
right:0
}

.main {
width:100%
}

.sidebar {
display:none
}
}

@media(max-width:1024px) {
.grid-3 {
grid-template-columns:repeat(2,1fr);
grid-gap:12px
}

.grid-4 {
grid-template-columns:repeat(3,1fr);
grid-gap:12px
}

.grid-5 {
grid-template-columns:repeat(5,1fr);
grid-gap:12px
}

.grid-6 {
grid-template-columns:repeat(4,1fr);
grid-gap:12px
}
}

@media(max-width:800px) {
[data-video]:not([data-video=""]):before {
font-size:40px
}

.grid-2 {
grid-template-columns:repeat(2,1fr)
}

.grid-3 {
grid-template-columns:repeat(2,1fr)
}

.grid-4 {
grid-template-columns:repeat(2,1fr)
}

.grid-6 {
grid-template-columns:repeat(3,1fr)
}

.grid-8 {
grid-template-columns:repeat(4,1fr)
}

.grid-10 {
grid-template-columns:repeat(5,1fr)
}

.grid-12 {
grid-template-columns:repeat(6,1fr)
}

.footer-navigation .product-navigation {
display:none
}

.footer {
display:block;
height:50px;
line-height:50px
}

.footer a,.footer span {
display:none
}

.footer .company {
display:inline-block
}
}

@media(max-width:640px) {
.grid-2,.grid-3,.grid-4 {
grid-template-columns:1fr
}

.grid-6 {
grid-template-columns:repeat(2,1fr)
}

.grid-8 {
grid-template-columns:repeat(3,1fr)
}

.grid-10 {
grid-template-columns:repeat(4,1fr)
}

.grid-12 {
grid-template-columns:repeat(4,1fr);
grid-gap:12px
}

.primary-navigation {
height:50px!important
}

.primary-navigation .logo {
width:160px
}

.primary-navigation .icon-searchbtn {
margin:10px!important
}

.primary-navigation .icon-menubtn {
top:14px
}

.secondary-slider-navigation {
top:50px!important
}

.search-container .popular-search {
display:none
}

.footer-navigation {
display:none
}

.float-contact {
width:42px;
padding:10px 0
}

.float-contact a {
width:42px;
height:42px
}

.float-contact a:before {
width:42px;
height:42px;
line-height:42px;
font-size:1.4em
}

.float-contact a:hover {
width:100%!important;
transform:none;
background:none;
transition:none
}

.float-contact a:hover:before {
background-image:linear-gradient(90deg,#0b76be,#fff 50%,#0b76be);
background-repeat:no-repeat;
background-position:center bottom;
background-size:40px 1px;
transition:none
}

.float-contact a span {
height:42px;
line-height:42px
}

.float-contact .icon-wechat {
width:42px;
line-height:42px;
font-size:1.4em
}

.float-video {
max-width:100vw;
padding:10px
}

.gotopbtn {
width:42px;
line-height:42px;
right:5px;
bottom:5px
}
}

@media(max-width:1272px) {
.extend-section .items {
margin-top:20px
}

.extend-section .carousel-prev,.extend-section .carousel-next {
display:none
}

.section-feedback-brochure {
height:auto
}

.section-feedback-brochure .map-container,.section-feedback-brochure .brochure {
display:none
}

.section-feedback-brochure .feedback {
width:100%
}

.section-feedback-brochure .frame {
box-sizing:border-box;
width:100%;
padding:40px 15px
}

.extend-section-project-video {
padding-top:30px
}

.extend-section-project-video .project-container {
margin-top:20px
}

.extend-section-project-video .project-items .item {
width:260px;
margin-right:12px
}

.extend-section-project-video .video-items {
margin-top:0
}

.extend-section-project-video .video-items .item {
width:200px!important;
margin-right:12px
}

.extend-section-main-products .extend-section-main-product-head {
width:100%;
height:auto;
background:none
}

.extend-section-main-products .title {
float:none;
margin-top:0;
text-align:left
}

.extend-section-main-products .title h2 {
position:relative;
padding-bottom:15px;
color:#333
}

.extend-section-main-products .title h2:before {
content:'';
position:absolute;
bottom:0;
left:0;
width:80px;
height:5px;
background:#0b76be
}

.extend-section-main-products .title h2:after {
content:'';
position:absolute;
left:80px;
bottom:0;
border:2.5px solid #0b76be;
border-top-color:transparent;
border-right-color:transparent
}

.extend-section-main-products .title p {
display:none
}

.extend-section-carousel-project .review {
display:none
}

.extend-section-topic-posts {
grid-template-columns:1fr
}
}

@media(max-width:800px) {
.extend-section-carousel-project .carousel-scroll .figure {
width:calc(50% - 10px)
}

.extend-section-carousel-project .carousel-scroll .content {
width:calc(50% - 10px)
}

.extend-section-carousel-project .summary {
margin-top:10px
}

.extend-section-carousel-project .more {
margin-top:10px
}
}

@media(max-width:640px) {
.extend-section-carousel-project .carousel-scroll .item {
flex-wrap:wrap;
vertical-align:top
}

.extend-section-carousel-project .carousel-scroll .figure {
width:100%
}

.extend-section-carousel-project .carousel-scroll .content {
width:100%;
margin:20px 0
}

.extend-section-carousel-project .summary {
white-space:normal
}
}

@media(max-width:1272px) {
.business-banner .presentation {
top:60%;
left:12px
}
}

@media(max-width:1024px) {
.business-banner {
height:300px
}

.business-banner video {
position:absolute;
top:0;
bottom:0;
max-width:none!important
}
}

@media(max-width:800px) {
.business-banner {
height:200px
}

.business-body .product-category {
margin-top:30px
}

.business-body .headline .description {
width:100%;
margin-top:20px
}

.business-body #matching .item {
margin-right:12px
}

.business-body #matching span[role=button] {
display:none
}
}

@media(max-width:640px) {
.business-banner {
height:150px
}

.business-body .category {
display:none
}
}

.pages {
padding:0 0 15px;
width:100%;
text-align:center;
clear:both;
margin-top:20px
}

.pages a {
color:#666;
padding:0 10px;
margin:3px;
background:#fff;
border:1px solid #edebeb
}

.pages * {
display:inline-block;
vertical-align:middle;
line-height:34px;
padding-bottom:1px
}

.pages span {background:#0b76be;
border-color:#0b76be;padding: 0 10px;
    margin: 3px; color:#fff;}
.pages a:hover,.pages .hover {
display:inline-block;
color:#fff;
background:#0b76be;
border-color:#0b76be
}

.page-num-current {
color:#fff!important;
background:#0b76be!important;
border-color:#0b76be!important
}

.category-nav {
text-align:center;
margin-top:20px
}

.category-nav a {
display:inline-block;
width:200px;
line-height:50px;
margin:0 10px;
font-weight:600;
background:#f0f0f0
}

.category-nav a:hover,.post-body .category-nav a.selected {
color:#fff;
background:#0b76be
}

.selected {
color:#fff;
background:#0b76be
}

.category-nav {
padding-bottom:5px;
white-space:nowrap;
overflow-x:auto
}

.category-nav a {
width:180px
}