Files
orico-official-website-old/public/frontend/webid/css/subject/RDCenter.css
2024-10-29 14:04:59 +08:00

480 lines
18 KiB
CSS
Executable File

@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;}
.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%;}
}