@media screen and (min-width:1400px){ body, html{font-size:100%;} } @media screen and (min-width:1200px) and (max-width:1399px){ body, html{font-size:95%;} } @media screen and (min-width:768px) and (max-width:1199px){ body, html{font-size:90%;} } @media screen and (min-width:640px) and (max-width:767px){ body, html{font-size:85%;} } @media only screen and (min-width: 480px) and (max-width:639px){ body, html{font-size:80%;} } @media only screen and (min-width: 384px) and (max-width:479px){ body, html{font-size:75%;} } @media only screen and (max-width:383px){ body, html{font-size:70%;} } img{ max-width:100%; border:none; border:0; vertical-align:top;} .rd_img { text-align: center;} .rd_img img {max-width:100%;} .rd_title{font-size:2em; color:#101010; padding:0 0 3%; text-align: center;font-family: "LATO-MEDIUM";} .rd_title-White{font-size: 2em; color:#FFFFFF; padding:0 0 3%; text-align: center; font-weight: 600;} @media screen and (min-width:1366px){ .lj_rd_text {left: 12.5%;width:1440px; top:35%;} .lj_rd_text h3 { font-size: 3em; font-weight: 100; } .lj_rd_text .small {font-size:1.125em; width:50%; padding-top:1.8%; line-height: 1.8em; } .lj_rd_text h3::after {width:4%;height: 5px;} } @media screen and (min-width:960px) and (max-width:1365px){ .lj_rd_text {left: 12.5%;width:1440px; top:35%;} .lj_rd_text h3 { font-size: 3em; font-weight: 100; } .lj_rd_text .small {font-size:1.125em; width:45%; padding-top:1%; line-height: 1.5em; } .lj_rd_text h3::after {width:4%;height: 5px;} } @media screen and (min-width:768px) and (max-width:959px){ .lj_rd_text {left: 12.5%;width:1440px; top:25%;} .lj_rd_text h3 { font-size: 3em; font-weight: 100; } .lj_rd_text .small {font-size:1.125em; width:45%; padding-top:1%; line-height: 1.5em; } .lj_rd_text h3::after {width:4%;height: 5px;} } @media screen and (min-width:480px) and (max-width:767px){ .lj_rd_text {left:6.5%;width:100%; top:15%;} .lj_rd_text h3 { font-size:2.5em; } .lj_rd_text .small {font-size:1.3em; width:80%;padding-top:1%; line-height:1.3em; } .lj_rd_text h3::after {width:4%;height: 5px;} } @media screen and (max-width:479px){ .lj_rd_text {left:4.5%;width:100%; top:10%;} .lj_rd_text h3 { font-size: 2em; } .lj_rd_text .small {font-size:1.4em; width:90%; line-height:1.2em; } .lj_rd_text h3::after {width:10%;height: 2px;} } .lj_rd_banner{ position: relative;} .lj_rd_text {position: absolute; margin: auto; color: #fff;text-align: left;} .lj_rd_text h3 { padding-bottom: 2.3%; text-align: left; font-family: "LATO-MEDIUM";} @media screen and (min-width:769px){ .lj-Table{display: table;} .lj-Table .Table-Row{display: table-row;} .lj-Table .Table-Row .Table-Cell{display: table-cell;} .lj_w { width:88%;} } /*研发团队*/ .rd_team_bg { background:#f5f5f5; padding: 3% 0;} .rd_team_w { margin: auto;background: #fff; padding: 3%;} @media screen and (min-width:1400px){ .rd_team_w {width:69%;} } @media screen and (max-width:1399px){ .rd_team_w {width:90%;} } .rd_team_title {font-size: 2em; text-align: center; color: #101010; font-family: "LATO-MEDIUM";} @media screen and (min-width:800px){ .rd_team_sm { width:60%;} } @media screen and (max-width:799px){ .rd_team_sm { width:96%; line-height: 1.5em;} } .rd_team_sm { text-align: center; color: #737373; margin: auto; padding: 3% 0; } .rd_team_icon li { width:25%; float: left; padding: 2% 0; height: 120px;} .rd_team_big {color: #333; padding: 2% 0; font-weight: 600; } @media screen and (min-width:1048px){ .rd_f {float:left;} .rd_team_t {width:54%; padding-left: 6%;} .rd_team_icon li { width:25%;} } @media screen and (min-width:768px) and (max-width:1047px){ .rd_f { margin: auto; text-align: center; width:100%; height: 100px;} .rd_f img {max-width:80%;} .rd_team_icon li { width:25%;} } @media screen and (max-width:767px){ .rd_f { margin: auto; text-align: center; width:100%; height: 100px;} .rd_team_sm,.rd_team_big,.rd_team_t {font-size:1.2em; line-height: 1.5em;} .rd_f img {max-width:50%;} .rd_team_icon li { width:49.5%;} } /*211快速交付*/ .rd_two_pay { background:#f5f5f5; padding: 3% 0;} .rd_two_img { text-align: center; font-size: 2em; color: #101010; padding-bottom: 3%;font-family: "LATO-MEDIUM";} @media screen and (min-width:1400px){ .rd_img_b {width:1400px; } } @media screen and (max-width:1399px){ .rd_img_b {width:96%; } } .rd_img_b { margin: auto; position: relative; padding:0.8% 0;} .rd_pay_text { position: absolute;} .rd_font_i {color: #fff; } .rd_pay_r {float: left;width:40%; } @media screen and (min-width:1400px){ .rd_pay_text { left: 10%;top:22%;} .rd_pay_r img {max-width:100%;} .rd_font_i { width:30%; } } @media screen and (min-width:1000px) and (max-width:1399px){ .rd_pay_text { left: 5%;top:22%;} .rd_pay_r img {max-width:90%;} .rd_font_i { padding:2% 0 0 0; width:30%; } } @media screen and (min-width:768px) and (max-width:999px){ .rd_pay_text { left: 5%;top:12%;} .rd_pay_r img {max-width:90%;} .rd_font_i { padding:2% 0 0 0; width:30%; } } @media screen and (min-width:480px) and (max-width:767px){ .rd_pay_text { left: 5%;top:8%;} .rd_pay_r img {width:90%;} .rd_font_i { padding:2% 0 0 0; width:30%;line-height: 1.8em; } } @media screen and (max-width:479px){ .rd_pay_text { left: 5%;top:8%;} .rd_pay_r img {width:90%;} .rd_font_i { padding:2% 0 0 0; width:40%; line-height: 1.5em; } } /*研发流程*/ .n_rd_process{padding:3.2% 0;} @media screen and (min-width:1366px){ .n_process_w {width:73%; margin: auto;} .n_pro_img01 {} .n_pro_img02 {display: none;} .n_pro_img03 {display: none;} } @media screen and (min-width:768px) and (max-width:1365px){ .n_process_w {width:73%; margin: auto;} .n_pro_img01 {display: none;} .n_pro_img02 { width:100%; margin: auto;} .n_pro_img03 {display: none;} } @media screen and (max-width:767px){ .n_process_w {width:96%; margin: auto;} .n_pro_img01 {display: none;} .n_pro_img02 {display: none;} .n_pro_img03 { width:100%; margin: auto;} } /*211快速交付*/ .n_rd_bg {background: url( ../../images/RDCenter/n_rd_bg_16.jpg) no-repeat;width:100%;height:100%; padding:4% 0;} @media screen and (min-width:769px){ .n_rd_tl2{font-size:30px;} .n_rd_tl2 i {width:37px;height:33px;top:-20px;} } @media screen and (max-width:768px){ .n_rd_tl2{font-size:18px;} .n_rd_tl2 i {width:20px;height:17px;top:-5px;} } @media screen and (min-width:1000px){ .n_rd_fast {width:63.5%; margin: auto; } .n_rd_text {padding: 20% 0 4.8% 20%;} .n_rd_text01 {padding: 5% 0 0 10%;} } @media screen and (min-width:640px) and (max-width:999px){ .n_rd_fast {width:96%; margin: auto; } .n_rd_f_s01,.n_rd_f_s{line-height:22px;} .n_rd_text {padding: 20% 0 4.8% 20%;} .n_rd_text01 {padding: 5% 0 0 10%;} } @media screen and (max-width:639px){ .n_rd_fast {width:96%; margin: auto; } .n_rd_f_s01,.n_rd_f_s {display: none;} .n_rd_text {padding:5% 0 26.9% 10%;} .n_rd_text01 {padding: 5% 0 5% 10%;} } .n_rd_tl2 {color: #fff;font-weight:bold;text-align:center;position:relative; } .n_rd_tl2 i{display:inline-block;position:absolute;margin-left:17px;} .n_rd_fast img {width:100%; display: block;} .n_rd_l { background: #fff; float: left; width:35%;} .n_rd_l img {width:100%; display: block;} .n_rd_text h4 {font-size:1.5em; color:#012853; padding-bottom:4%; } .n_rd_text01 h4 {font-size:1.5em; color:#012853; padding-bottom: 5%; } .n_rd_line {width:40px; background: #27aeee; height: 3px;} .n_rd_f_s {font-size: 1em; color: #404040; margin: 4% 0 20%;} .n_rd_c {background: #fff; float: left; width:30%;} .n_rd_c img {width:100%; display: block;} .n_rd_f_s01 {font-size: 1em; color: #404040; margin: 8% 0 12.8%; } /*技术与应用*/ .n_rd_tech { background: #fff; padding: 3% 0 0;} @media screen and (min-width:1310px){ .n_rd_tech_w,.n_rd_usb,.n_type_c,.n_rd_safe{width:73%;} .n_tech_l {width:34%; float: left;padding: 5% 3% 0;} .n_tech_r {width:60%; float: right; text-align: right;} .n_tech_line{margin:3% 0 5%;} .n_type_c_text{width:50%;} .n_type_c_title{ padding-left: 3.5%;} } @media screen and (min-width:880px) and (max-width:1309px){ .n_rd_tech_w,.n_rd_usb,.n_type_c,.n_rd_safe{width:98%;} .n_tech_l {width:34%; float: left;padding: 3% 3% 0;} .n_tech_r {width:60%; float: right; text-align: right;} .n_tech_line{margin:3% 0 5%;} .n_type_c_text{width:50%;} .n_type_c_title{ padding-left: 3.5%;} } @media screen and (max-width:879px){ .n_rd_tech_w,.n_rd_usb,.n_type_c,.n_rd_safe{width:98%;} .n_tech_l {width:96%; margin: auto; padding: 5% 3% 0;} .n_tech_r {width:96%; margin:3% auto; } .n_tech_line{margin:1% 0 2%;} .n_usb_text {width:80%; margin: auto; line-height: 1.5em;} .n_type_c_text{width:96%;} .n_rd_safe_text {line-height: 18px;} .n_type_c_text {line-height: 18px;} } .n_rd_tech_w { margin: auto;background:#f7f7f7; } .n_tech_title {font-size:1.25em; color:#012853; font-weight: bold; } .n_tech_line {width:30px; background: #27aeee; height: 3px; } .n_tech_text {color: #012853; font-size: 1em; line-height:1.7em;} /*数据传输技术*/ .n_rd_usb { background: #292929; padding: 3% 0; margin: auto;} .n_usb_title { text-align: center; color: #fff; font-size: 1.25em;} .n_usb_m { padding:0.5% 0; } .n_usb_text {text-align: center; color: #fff; padding: 2% 0; font-size: 1em; width:80%; margin: auto;} .n_usb_img { margin: auto; width:94%; padding-top: 2%;} .n_usb_img li {width:19%; margin-right: 1%; float: left; text-align: center;} /*USB弱电运用技术*/ .n_type_c { padding: 3% 0 0; margin: auto;} .n_type_c_title { color: #101010; font-size: 1.25em; padding-left: 3.5%; font-family: "LATO-MEDIUM";} .n_type_c_line {width:30px; background: #27aeee; height: 3px; margin:1% 0 0 3.5%;} .n_type_c_text { color: #101010; padding: 1% 0 0 3.5%; font-size: 1em;} .n_type_c_img { margin: auto; padding-left: 3.5%; } .n_type_c_img li {width:24%; margin-right: 1%; float: left; padding: 3% 0 0;} .n_type_c_img li:last-child {margin-right: 0;} /*安全家用强电技术*/ .n_rd_safe { padding: 3% 0; margin: auto;} .n_rd_left {width:47%; float: left; padding-left:3.5%; } .n_rd_right {width:47%; float: right;} .n_rd_safe_title { color: #101010; font-size: 1.25em; font-family: "LATO-MEDIUM";} .n_rd_safe_line {width:30px; background: #27aeee; height: 3px; margin:2% 0 1% 0;} .n_rd_safe_text { color: #101010; padding: 1% 0 0 0; font-size: 1em; } .n_rd_safe_img { margin: auto; } .n_rd_safe_img li {width:49%; margin-right: 1%; float: left; padding: 3% 0 0;} /*资源利用*/ .lj_make_bg {background: #f1f1f1; padding: 4.2% 0;} .lj_make_text { margin: auto; color: #444; text-align: center;} @media screen and (min-width:1400px){ .lj_make_all {width:1400px; margin: auto;} } @media screen and (max-width:1399px){ .lj_make_all {width:98%; margin: auto;} } @media screen and (min-width:900px){ .lj_make_text {width:80%; font-size: 1.125em; line-height: 32px; } } @media screen and (min-width:640px) and (max-width:899px){ .lj_make_text {width:90%; font-size: 1.125em; line-height: 28px; } } @media screen and (min-width:400px) and (max-width:639px){ .lj_make_text {width:98%; font-size: 1.3em; line-height: 28px; } } @media screen and (max-width:399px){ .lj_make_text {width:98%; font-size: 1.4em; line-height: 22px; } } .lj_make_con { padding: 2% 0;} .lj_make_con ul {} .lj_make_con li{float: left; width: 49.3%; margin: 1.3% 1.2% 0 0; list-style: none;} .lj_make_con li:nth-child(2n) {margin:1.3% 0 0 0;} .text-desc{position: absolute; left: 0; top: 0; height: 100%; opacity: 0; width: 100%;background:#009fdf;} @media screen and (min-width:1024px){ .lj_con_all {position: absolute; top:30%; width:100%; text-align: center; } .lj_con_title { text-align: center; color: #fff; font-size: 1.5em;padding-bottom: 5%; } .lj_con_text {font-size: 1em; line-height: 26px; width:90%; margin: auto; color: #fff;} } @media screen and (min-width:768px) and (max-width:1023px){ .lj_con_all {position: absolute; top:20%; width:100%; text-align: center; } .lj_con_title { text-align: center; color: #fff; font-size: 1.5em;padding-bottom: 5%; } .lj_con_text {font-size: 1em; line-height: 22px; width:90%; margin: auto; color: #fff;} } @media screen and (min-width:640px) and (max-width:767px){ .lj_con_all {position: absolute; top:20%; width:100%; text-align: center; } .lj_con_title { text-align: center; color: #fff; font-size: 1.5em;padding-bottom: 5%; } .lj_con_text {font-size: 1em; line-height: 22px; width:90%; margin: auto; color: #fff;} } @media screen and (min-width:480px) and (max-width:639px){ .lj_con_all {position: absolute; top:10%; width:100%; text-align: center; } .lj_con_title { text-align: center; color: #fff; font-size: 1.5em;padding-bottom: 3%; } .lj_con_text {font-size: 1.2em; line-height: 20px; width:90%; margin: auto; color: #fff;} } @media screen and (max-width:479px){ .lj_con_all {position: absolute; top:30%; width:100%; text-align: center; } .lj_con_title { text-align: center; color: #fff; font-size: 1.6em;padding-bottom: 3%; } .lj_con_text {font-size: 1.2em; line-height: 20px; width:90%; margin: auto; color: #fff; display: none;} } /* effect-1 css */ .port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; } .port-1 .text-desc{opacity: 0.9; top: -120%; transition: 0.5s; color: #000; } .port-1 img{transition: 0.5s;} .port-1:hover img{transform: scale(1.1);} .port-1.effect-1:hover .text-desc{top: 0;} .port-1.effect-2 .text-desc{top: auto; bottom: -100%;} .port-1.effect-2:hover .text-desc{bottom: 0;} .port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;} .port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%;} /* effect-1 css end */ /* effect-2 css */ .port-2{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 800px;} .port-2 .text-desc{z-index: -1; transition: 0.6s;} .port-2 .image-box{transition: 0.4s;} .port-2:hover .image-box{transform: rotateX(80deg); transform-origin: center bottom 0; transition: 0.4s;} .port-2.effect-1:hover .text-desc{opacity: 1;} .port-2.effect-2 .text-desc{opacity: 1; top: -100%;} .port-2.effect-2:hover .text-desc{top: 0;} .port-2.effect-3 .text-desc{opacity: 1; top: auto; bottom: -100%;} .port-2.effect-3:hover .text-desc{bottom: 0;} /* effect-2 css end */ /* effect-3 css */ .port-3{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 500px;} .port-3 img{transition: 0.5s;} .port-3.effect-1 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; padding: 45px 20px 20px; opacity: 1;} .port-3.effect-1:hover .text-desc{transform: none;} .port-3.effect-1:hover img{opacity: 0; transform: scale(1.2)} .port-3.effect-2 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center bottom 0; top: auto; bottom: 0; padding: 45px 20px 20px;} .port-3.effect-2:hover .text-desc{transform: none; opacity: 1;} .port-3.effect-2:hover img{transform: translateY(-100%)} .port-3.effect-3 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; padding: 45px 20px 20px;} .port-3.effect-3:hover .text-desc{transform: none; opacity: 1;} .port-3.effect-3:hover img{transform: translateY(100%)} /* effect-3 css end */ .lj_make_img {} @media screen and (min-width:769px){ .lj_make_al { background:#fff; width:32.5%;} .lj_make_l { width:28%; font-weight: 600; color: #444;} .lj_make_r { width:70%; text-align: right; font-size: 0.9em;} } @media screen and (min-width:640px) and (max-width:768px){ .lj_make_al { background:#fff; width:32.63%; float: left; margin-right: 1%;} .lj_make_al:last-child {margin-right: 0;} .lj_make_l { width:90%; font-weight: 600; color: #444; text-align: center;} .lj_make_r { width:70%; text-align: right; font-size: 0.9em; display: none;} } @media screen and (min-width:480px) and (max-width:639px){ .lj_make_al { background:#fff; width:32.63%; float: left; margin-right: 1%;} .lj_make_al:last-child {margin-right: 0;} .lj_make_l { width:90%; color: #444; text-align: center; font-size: 1.2em;} .lj_make_r { width:70%; text-align: right; font-size: 0.9em; display: none;} } @media screen and (max-width:479px){ .lj_make_al { background:#fff; width:32.63%; float: left; margin-right: 1%;} .lj_make_al:last-child {margin-right: 0;} .lj_make_l { width:90%; color: #444; text-align: center; font-size: 1.4em;} .lj_make_r { width:70%; text-align: right; font-size: 0.9em; display: none;} } .lj_m_all {padding: 3%;} /*品质保障体系*/ .lj_quality_bg { padding: 4.2% 0;} @media screen and (min-width:1400px){ .lj_qua_icon {width:1400px;} } @media screen and (max-width:1399px){ .lj_qua_icon {width:96%;} } .lj_qua_icon {margin:0.3% auto; text-align: center;} @media screen and (min-width:769px){ .lj_qua_icon li {width:22%; float: left; margin-right: 15%; text-align: center;} .lj_qua_icon li:last-child {margin-right: 0;} .lj_qua_text {border-bottom: 1px solid #e5e9ee; padding-bottom: 20px; margin-top:15%;} } @media screen and (min-width:640px) and (max-width:768px){ .lj_qua_icon li {width:22%; float: left; margin-right: 17%; text-align: center;} .lj_qua_icon li:last-child {margin-right: 0;} .lj_qua_text {border-bottom: 1px solid #e5e9ee; padding-bottom: 20px; margin-top:15%;} } @media screen and (min-width:480px) and (max-width:639px){ .lj_qua_icon li {width:22%; float: left; margin-right: 17%; font-size: 1.2em; line-height: 20px; text-align: center;} .lj_qua_icon li:last-child {margin-right: 0;} .lj_qua_text {border-bottom: 1px solid #e5e9ee; padding-bottom: 20px; margin-top:15%;} } @media screen and (max-width:479px){ .lj_qua_icon li {width:26%; float: left; margin:0 2%; font-size: 1.4em; line-height:18px; text-align: center;} .lj_qua_icon li:last-child {margin-right: 0;} .lj_qua_text {border-bottom: 1px solid #e5e9ee; padding-bottom:10px; margin-top:15%;} }