html, body {
background-color:#ffffff;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
.gray-bg {
width:100%;
display:block;
background-color:#eeeeee;
position: relative;
}
.gray-bg:after {
content: '';
position: absolute;
width:100%;
height:35px;
top:50%;
right:0;
margin:0;
background-image: url(../images/piano_wire_spec_bg_line.png);
z-index:0;
}
img.cube {
content: '';
position: absolute;
width:75px;
top:35%;
right:10%;
margin:0;
animation: rotate 7s linear infinite;
-o-animation: rotate 7s linear infinite;
-webkit-animation: rotate 7s linear infinite;
-moz-animation: rotate 7s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate { /* Safari and Chrome */
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@media screen and (max-width: 640px) {
img.cube {
width:40px;
top:33%;
right:8%;
}
.gray-bg:after {
display:none;
}
}
/*breadcrumb begin*/
.breadcrumb {
max-width: 98%;
}
/*breadcrumb end*/
/*specail title font begin*/
.page-title {
display:block;
text-align:center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
ol.font-transform {
display:table;
padding:0;
margin:0;
list-style-type:none;
}
ol.font-transform li {
display:table-cell;
vertical-align:middle;
}
ol.font-transform li.text-demonstration {
position:relative;
background:url('../images/dark_middle_frame.png') right 0px top 5px repeat-x;
}
ol.font-transform li label {
position:relative;
top:-2px;
color:#222222;
letter-spacing:2px;
font-size:72px;
padding:0 12px 0 10px;
}
@media screen and (max-width: 900px) {
.history-large-banner ul {
position: inherit;
}
.page-title {
margin:0;
}
ol.font-transform li label {
top: -1px;
font-size:46px;
padding:0 8px 0 6px;
}
ol.font-transform li.text-demonstration {
background:url('../images/dark_middle_frame.png') right 0px top 0px repeat-x;
}
}
@media screen and (max-width: 768px) {
.knowledge-pic {
display:block;
width:45%;
margin:0 auto;
}
.title-aside {
display:block;
width:100%;
margin:0 auto;
}
ol.font-transform {
margin:10px auto;
}
.title-aside {
display:block;
width:100%;
padding:0;
}
.knowledge-feature {
max-width:100%;
}
.knowledge-section {
padding:0;
}
}
@media screen and (max-width: 480px) {
.history-large-banner ul {
position: inherit;
padding: 12px 0;
}
.large-pic {
display:none;
}
.small-pic {
display:block;
}
ol.font-transform {
margin:0 auto;
}
.knowledge-pic {
width:130px;
}
.knowledge-feature {
margin:10px 0 0 0;
background-size:40%;
padding:20px 130px 20px 20px;
}
.gird-bg {
background:#f0f0f0;
}
}
@media screen and (max-width: 400px) {
ol.font-transform li label {
font-size:30px;
padding:0 8px 0 6px;
}
}
/*specail title font end*/
.breadcrumb ul {
position:relative;
z-index:1;
padding: 20px 0;
}
/*product-spec begin*/
.product-spec {
position:relative;
display:block;
width:100%;
max-width:1200px;
margin:0 auto;
padding:4% 0 3% 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
z-index:1;
}
.product-spec h1 {
display:block;
margin:0 0 20px 0;
color:#222222;
font-size:48px;
text-transform:uppercase;
font-weight:700;
letter-spacing:0.5px;
line-height:90%;
}
.product-spec p {
display:block;
margin:3% auto;
color:#707070;
font-size:15px;
letter-spacing:0.5px;
line-height:140%;
}
.spec-picture {
display:inline-block;
width:35%;
}
.spec-picture ul {
display:inline-block;
list-style-type:none;
margin:20px 0 0 0;
padding:0;
background-color:#cccccc;
-webkit-box-shadow:0px 16px 36px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 16px 36px rgba(0, 0, 0, .3);
box-shadow:0px 16px 36px rgba(0, 0, 0, .3);
}
.spec-picture ul li {
display:block;
margin:0;
padding:0;
}
.spec-picture ul li img {
display:block;
width:100%;
max-width:370px;
}
.spec-aside {
display:inline-block;
width:55%;
padding:0 0 0 7%;
vertical-align:top;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.spec-aside p {
display:block;
margin:4% auto;
color:#707070;
font-size:15px;
letter-spacing:0.5px;
line-height:140%;
}
@media screen and (max-width: 1000px) {
.spec-aside {
padding:0 0 0 7%;
}
}
.spec-aside h5 {
display:block;
margin:20px 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color:#222222;
font-size:21px;
text-transform:uppercase;
font-weight:600;
}
@media screen and (max-width: 640px) {
.spec-aside h5 {
font-size: 19px;
}
}
.spec-aside ul {
display:inline-block;
width:100%;
margin:0;
padding:0 0 0 18px;
}
.spec-aside ul li {
margin:0;
color:#707070;
font-size:15px;
letter-spacing:0.5px;
line-height:160%;
}
.spec-aside ul li div {
display:inline-block;
float:right;
width:120px;
margin:0 5% 0 0;
}
@media screen and (max-width: 1210px) {
.breadcrumb ul {
padding: 20px 0 20px 22px;
}
.product-spec {
padding:4.5% 0 6% 22px;
}
}
@media screen and (max-width: 768px) {
.spec-aside h1 {
font-size:40px;
}
.product-spec h1 {
font-size:36px;
margin:5% 0;
}
.product-spec p {
margin:5% auto 12% auto;
}
}
@media screen and (max-width: 640px) {
.product-spec {
padding:0 0 6% 0;
width: 90%;
}
.spec-aside h1 {
font-size:36px;
}
.spec-aside {
display:inline-block;
width:100%;
padding:8% 0 0 0;
}
.spec-picture {
display:block;
width:100%;
margin:0 auto;
}
.spec-picture ul li {
display:table-cell;
width:50%;
}
.spec-picture ul {
margin:0;
}
}
@media screen and (max-width: 400px) {
.product-spec h1 {
font-size:30px;
}
.spec-aside ul li {
line-height: 140%;
}
.spec-aside ul li div {
display:block;
float:none;
width:auto;
font-weight:bold;
margin: 0px 5% 10px 0px;
}
}
/*product-spec end*/
/*category tab begin*/
.spec-left {
display:block;
width:100%;
margin:0 2% 0 0;
vertical-align:top;
}
.spec-left ul {
display:block;
list-style-type:none;
margin:0 auto;
padding:0;
}
.spec-left ul li {
display:inline-block;
width:110px;
text-align:center;
background-color:#f6f6f6;
}
.spec-left ul li label {
display:block;
width:100%;
padding:10px 0;
font-size:15px;
color:#444444;
background-color:#eeeeee;
font-weight:600;
}
.category-item {
display:block;
width:100%;
max-width:76px;
margin:0 auto;
padding:15px 0;
}
@media screen and (max-width: 1220px) {
.category-section {
padding:0;
}
}
@media screen and (max-width: 768px) {
.spec-left ul li {
width:28%;
}
.category-item {
padding: 10px 0;
}
}
@media screen and (max-width: 1065px) {
.tab-btn {
padding:20px 10px;
text-align: left;
}
}
@media screen and (max-width: 900px) {
.spec-right {
width:45%;
}
}
@media screen and (max-width: 640px) {
.spec-right, .spec-left {
display:block;
width:90%;
margin:0;
padding:0;
}
}
@media screen and (max-width: 480px) {
.spec-right, .spec-left {
width:100%;
}
}
@media screen and (max-width: 440px) {
.spec-left ul li {
width:48%;
}
.product-spec {
width:85%;
}
}
/*category tab end*/
/*Table begin*/
.spec-table {
display:block;
width:100%;
padding:0 0 7% 0;
}
.spec-title {
display:block;
width:100%;
max-width:1200px;
padding: 20px 0 20px 20px;
margin:0 auto;
color: #222222;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
border-bottom:2px solid #222222;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
@media screen and (max-width:1200px) {
.spec-table {
padding:0;
}
}
@media screen and (max-width:500px) {
.spec-title {
font-size: 21px;
padding:15px 0 15px 5%;
}
}
/*Table end*/
/*Table horA*/
#horA {
width:100%;
max-width:1200px;
border-collapse: collapse;
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
margin:0 auto;
font-size:14px;
background-color:#ffffff;
}
#horA th {
font-weight: bold;
color: #000;
padding:15px 4px 15px 5px;
border-bottom: 2px solid #222222;
text-align: left;
font-size:24px;
text-transform:uppercase;
}
#horA td {
color: #868686;
padding:15px 4px 15px 5px;
border-bottom: 1px solid #cccccc;
}
#horA td a:link {
color:#678BA5;
text-decoration: none
}
#horA td a:visited {
color:#678BA5;
text-decoration: none
}
#horA td a:hover {
color:#000;
text-decoration: underline;
}
#horA .odd {
background: #FAFAFA;
font-weight:bold;
}
/*Table horA end*/
ul.product-bottom-pic {
display:table;
width:100%;
list-style-type:none;
margin:0 0 -4px 0;
padding:0;
}
ul.product-bottom-pic li {
display:table-cell;
width:33.33%;
vertical-align:top;
}
ul.product-bottom-pic li img {
display:block;
width:100%;
}
/*process-step begin*/
.gird-bg {
display:block;
width:100%;
padding:4% 0 0 0;
background-image: url(../images/gird_bg.gif);
}
ul.process-step {
display:block;
width:100%;
margin:0 auto;
padding:5% 0 5% 7%;
list-style-type:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
ul.process-step li {
position:relative;
display:inline-block;
width:32.5%;
padding:7% 5%;
margin:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
vertical-align:top;
}
.step-number {
position:absolute;
top:0;
left:0;
display:block;
width:100px;
height:100px;
border-radius:100px;
background-color:#d7eefa;
text-align:center;
}
.step-number label {
display:block;
padding:30px 0 0 0;
font: 400 27px 'Open Sans Condensed', 'Helvetica Narrow', arial, helvetica, sans-serif;
color: #222;
text-transform: uppercase;
vertical-align:middle;
}
ul.process-step li h3 {
display: block;
margin:10px 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #222222;
font-size: 18px;
text-transform: uppercase;
font-weight:600;
}
ul.process-step li p {
display: block;
margin:0;
color: #707070;
font-size: 14px;
line-height: 140%;
}
.step-img {
display: block;
width:100%;
max-width:270px;
}
.step-large-img {
display: block;
width:100%;
max-width:690px;
}
.step-arrow {
position:absolute;
right:0;
top:0;
display:block;
width:20%;
max-width:64px;
margin:35% -20px 0 0;
}
@media screen and (max-width: 1200px) {
ul.process-step {
padding:5% 0 5% 5%;
}
}
@media screen and (max-width: 900px) {
.step-number {
width:70px;
height:70px;
}
.step-number label {
padding:23px 0 0 0;
font: 400 18px 'Open Sans Condensed', 'Helvetica Narrow', arial, helvetica, sans-serif;
}
}
@media screen and (max-width: 640px) {
ul.process-step li {
width:48%;
padding:8% 2% 8% 3%;
}
.step-arrow {
display:none;
}
}
@media screen and (max-width: 500px) {
ul.process-step li {
width:48%;
padding:10% 2% 8% 3%;
}
.step-number {
width:55px;
height:55px;
}
.step-number label {
padding:17px 0 0 0;
font: 400 15px 'Open Sans Condensed', 'Helvetica Narrow', arial, helvetica, sans-serif;
}
}
@media screen and (max-width: 430px) {
ul.process-step li {
width:100%;
padding:8% 0 15% 0;
}
.step-img {
margin:0 auto;
}
}
/*process-step end*/
#particles-js {
position:fixed;
width: 100%;
height:100%;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 0;
}
.product-bottom-pic,
.gird-bg,
.copyright,
.footer-info {
position: relative;
z-index: 2;
}
.quality-span {
z-index: 2;
display: block;
width: 30%;
max-width: 250px;
position: absolute;
top: 0;
right: 0;
margin: -1px -1px 0 0;
}
@media screen and (max-width: 1024px) {
.quality-span {
display: none;
}
}
/*animate begin*/
@media screen and (min-width: 900px) {
.view-poll.first-child.in-view{
position: relative;
animation: feature_item 1s;
z-index: 5;
}
@keyframes feature_item{
0% { right:-40px;opacity: 0;}
40% { right:-40px;opacity: 0; }
99% { right:-1px;opacity: 1; }
100% { right:0px;opacity: 1; }
}
@-webkit-keyframes feature_item{
0% { right:-40px;opacity: 0;}
40% { right:-40px;opacity: 0; }
99% { right:-1px;opacity: 1; }
100% { right:0px;opacity: 1; }
}
@-moz-keyframes feature_item{
0% { right:-40px;opacity: 0;}
40% { right:-40px;opacity: 0; }
99% { right:-1px;opacity: 1; }
100% { right:0px;opacity: 1; }
}
@-o-keyframes feature_item{
0% { right:-40px;opacity: 0;}
40% { right:-40px;opacity: 0; }
99% { right:-1px;opacity: 1; }
100% { right:0px;opacity: 1; }
}
}
@media screen and (min-width: 900px) {
.view-poll.zero-child.in-view{
animation: zero_item 1s;
}
@keyframes zero_item{
0% { opacity: 0;}
40% { opacity: 0; }
99% { opacity: 1; }
100% { opacity: 1; }
}
@-webkit-keyframes zero_item{
0% { opacity: 0;}
40% { opacity: 0; }
99% { opacity: 1; }
100% { opacity: 1; }
}
@-moz-keyframes zero_item{
0% { opacity: 0;}
40% { opacity: 0; }
99% { opacity: 1; }
100% { opacity: 1; }
}
@-o-keyframes zero_item{
0% { opacity: 0;}
40% { opacity: 0; }
99% { opacity: 1; }
100% { opacity: 1; }
}
}
@media screen and (min-width: 900px) {
.view-poll.awards-child.in-view{
position: relative;
animation: about_item 1.5s;
}
.view-poll.awards-pic-child.in-view{
position: relative;
animation: aboute_item 1s;
z-index: 5;
}
@keyframes aboute_item{
0% { left:-80px;opacity: 0;}
40% { left:-80px;opacity: 0; }
99% { left:-1px;opacity: 1; }
100% { left:0px;opacity: 1; }
}
@-webkit-keyframes aboute_item{
0% { left:-80px;opacity: 0;}
40% { left:-80px;opacity: 0; }
99% { left:-1px;opacity: 1; }
100% { left:0px;opacity: 1; }
}
@-moz-keyframes aboute_item{
0% { left:-80px;opacity: 0;}
40% { left:-80px;opacity: 0; }
99% { left:-1px;opacity: 1; }
100% { left:0px;opacity: 1; }
}
@-o-keyframes aboute_item{
0% { left:-80px;opacity: 0;}
40% { left:-80px;opacity: 0; }
99% { left:-1px;opacity: 1; }
100% { left:0px;opacity: 1; }
}
}
@media screen and (min-width: 900px) {
.view-poll.last-area.in-view{
position: relative;
animation: last_item 1s;
z-index: 1;
}
@keyframes last_item{
0% { bottom:-80px;opacity: 0;}
40% { bottom:-80px;opacity: 0; }
99% { bottom:-1px;opacity: 1; }
100% { bottom:0px;opacity: 1; }
}
@-webkit-keyframes last_item{
0% { bottom:-80px;opacity: 0;}
40% { bottom:-80px;opacity: 0; }
99% { bottom:-1px;opacity: 1; }
100% { bottom:0px;opacity: 1; }
}
@-moz-keyframes last_item{
0% { bottom:-80px;opacity: 0;}
40% { bottom:-80px;opacity: 0; }
99% { bottom:-1px;opacity: 1; }
100% { bottom:0px;opacity: 1; }
}
@-o-keyframes last_item{
0% { bottom:-80px;opacity: 0;}
40% { bottom:-80px;opacity: 0; }
99% { bottom:-1px;opacity: 1; }
100% { bottom:0px;opacity: 1; }
}
}
/*animate end*/
.content-slogon.font-en h1{
animation: banner_item 1.5s ease-out;
}
@keyframes banner_item{
0% { transform: scale(1.15, 1.15);opacity: 0;}
100% { transform: scale(1, 1);opacity: 1; }
}
@-webkit-keyframes banner_item{
0% { transform: scale(1.15, 1.15);opacity: 0;}
100% { transform: scale(1, 1);opacity: 1; }
}
@-moz-keyframes banner_item{
0% { transform: scale(1.15, 1.15);opacity: 0;}
100% { transform: scale(1, 1);opacity: 1; }
}
@-o-keyframes banner_item{
0% { transform: scale(1.15, 1.15);opacity: 0;}
100% { transform: scale(1, 1);opacity: 1; }
}