jsasg/orico-official-website-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a7d68b57e52ac48d33122f718f98505b1a49d8ac
orico-official-website-old/public/frontend/webvn/css/subject/odm.css
jsasg 48bf3e6f33 init
2024-10-29 14:04:59 +08:00

332 lines
13 KiB
CSS
Executable File
Raw Blame History

/*新增*/
.odm_banner_p {position: relative;}
.odm_b_title {position: absolute; }
@media screen and (min-width:960px){
.odm_b_title {top:36%; left:18.5%;}
.odm_b_title h3{ font-size:3.875em; }
.odn_t_small {width:45%;line-height: 1.8em;}
}
@media (min-width:480px) and (max-width:959px){
.odm_b_title {top:26%; left:10%;}
.odm_b_title h3{ font-size:3em; }
.odn_t_small {width:80%;line-height: 1.5em;}
}
@media (max-width:479px){
.odm_b_title {top:6%; left:10%;}
.odm_b_title h3{ font-size:2em; }
.odn_t_small {width:90%;line-height: 1.2em;}
}
.odm_b_title h3 {color: #fff;padding-bottom:4%; font-weight: 100; }
.odn_t_small { color: #fff; font-size:1em; }
@media screen and (min-width:1440px){
.odm_usb_tex {width:1440px;}
}
@media screen and (max-width:1439px){
.odm_usb_tex {width:96%;}
}
.odm_usb_tex { margin: auto; padding: 3.3% 0 2.8%; font-family:"LATO-MEDIUM"; }
@media screen and (min-width:700px){
.odm_usb_t { font-size:2em; }
.odm_usb_sm {font-size: 1em;width:60%;line-height: 1.8em;}
.odm_research { font-size:2em; }
.odm_re_text {font-size: 1em;}
}
@media (min-width:481px) and (max-width:699px){
.odm_usb_t { font-size:1.5em; }
.odm_usb_sm {font-size: 1em;width:80%;line-height: 1.8em;}
.odm_research { font-size:1.4em; }
.odm_re_text {font-size: 1em;}
}
@media (max-width:480px){
.odm_usb_t { font-size:1.2em; }
.odm_usb_sm {font-size: 1em;width:96%;line-height: 1.8em;}
.odm_research { font-size:1.2em; }
}
.odm_research {font-weight: 600; color: #333;font-family:"LATO-MEDIUM";}
.odm_research01 {font-weight: 600; color: #333;padding: 3.2% 0 2.5%; text-align: center; font-size:1.625em;font-family:"LATO-MEDIUM";}
.odm_usb_t {font-weight: 600; text-align: center; color: #333; padding-bottom: 2.9%;font-family:"LATO-MEDIUM"; }
.odm_usb_sm { color: #737373; margin: auto; text-align: center; }
.odm_usb_sm01 {font-size: 1em; color: #737373; width:80%; margin: auto; text-align: center; line-height: 1.8em;}
/*解决方案*/
.odm_f1 {background: #f1f1f1; padding-bottom: 3.2%;}
.odm_one { background: url(../../images/odm/odm1_bg_05.jpg) no-repeat; margin: auto; padding:1% 4.2%; height:100%; }
.odm_ont_bg {background:rgb(61,166,227,0.9); margin: auto; padding: 3.9% 8%;}
.odm_ont_bor { padding: 6% 2% 4% 5%; margin: auto; border: 1px solid #fff;}
@media screen and (min-width:850px){
.odm_two_num { float: left; }
.odm_line_l {float: left; padding: 1% 8% 1% 6%;}
.odm_two_order {float: left; color: #fff;}
.font_one {font-size:1.5em; padding: 0 2%; }
.font_two {font-size: 2em; padding: 5% 0; font-weight: 600;}
}
@media screen and (max-width:850px){
.odm_two_num { padding-bottom: 5%;text-align: center;}
.odm_two_num img {width:40%;}
.odm_line_l {display: none;}
.odm_two_order { color: #fff; text-align: center; }
.font_one {font-size:1.2em; padding: 0 2%; }
.font_two {font-size: 1.5em; padding: 5% 0; font-weight: 600;}
}
@media screen and (min-width:1440px){
.odm_ont_bg {width:84%;}
.odm_one {width:66.6%;}
.odm_ont_bor {width:93%;}
.odm_re_all { width:1440px; margin: auto; }
}
@media screen and (max-width:1439px){
.odm_re_all { width:96%; margin: auto; }
}
.odm_research {text-align: center; padding: 4.4% 0 3%; }
@media screen and (min-width:481px){
.odm_re_img li {width:32.53%; float: left;}
}
@media (max-width:480px){
.odm_re_img li {width:96%; margin: auto;}
}
.odm_re_img li { margin-right: 1%; background: #fff;position: relative;}
.odm_re_img li img {width:100%;}
.odm_re_img li:last-child {margin-right: 0;}
.odm_re_text { color: #737373; text-align:center; padding:5% 0;}
/*oder*/
@media screen and (min-width:481px){
.odm_re_img01 li {width:32.53%; float: left;}
}
@media (max-width:480px){
.odm_re_img01 li {width:96%; margin:2% auto;}
}
.odm_re_img01 li { margin-right: 1%; background: #fff;position: relative;}
.odm_re_img01 li img {width:100%;}
.odm_re_img01 li:last-child {margin-right: 0;}
.odm_order_t {position: absolute; width:100%; text-align: center;left: 0; color: #fff; font-size: 1em;}
@media screen and (min-width:960px){
.odm_order_t { top:40%;}
}
@media screen and (min-width:481px) and (max-width:959px){
.odm_order_t { top:20%; line-height: 1.2em;}
}
@media screen and (max-width:480px){
.odm_order_t { top:40%;}
}
/*ODM项目*/
.odm_service { font-size:2em; padding:4.2% 0 4.5%; text-align: center; color: #333; font-weight: 600;font-family:"LATO-MEDIUM"; }
.odm_se_img {padding-bottom: 5.2%;}
.odm_se_img img {width:100%;}
.odm_patent { }
/*新增*/
.ODM-Gray{background-color:#f1f1f1; overflow: hidden;}
.ODM-White{background-color:#FFFFFF; overflow: hidden;}
.ODM-Blue{background-color:#002855; overflow: hidden;}
.ODM-Brand{padding-top:4.5%; padding-bottom: 4.5%;}
.ODM-Brand .ODM-Brand-L{width:43%; float: left; margin-right:3%; text-align: center}
.ODM-Title{text-align: center; font-size: 2em; margin-bottom: 4.5%; padding-top: 4.2%; color:#333; font-weight: 600;font-family:"LATO-MEDIUM";}
.ODM-Des{color:#444444; line-height: 2em; margin-bottom: 3%; font-size: 1em;}
.ODM-Brand .ODM-Brand-L .Image{width:10%; margin-right:0px; margin:18% auto 0; text-align: center; }
.ODM-Brand .ODM-Brand-R{width:54%; float:left;}
@media screen and (max-width:768px){
.ODM-Brand .ODM-Brand-L, .ODM-Brand .ODM-Brand-R{width:100%;}
}
@media screen and (max-width:960px){
.ODM-Brand .ODM-Brand-L .Image{display: none;}
}
.ODM-punctuation{margin-left:8px; font-size: 1.25em;}
.ODM-Menu{width:100%; overflow: hidden; display: table; position: relative;}
.ODM-Menu ul{position: absolute; width:100%; height: 100%; top:0; left:0;}
.ODM-Menu li{width:14.28%; color:#FFF; font-size: 1em; position: relative; float: left; height: 100%;}
.ODM-Menu li a{text-decoration: none; color:#FFF; position: absolute; top:50%; margin-top:-20px; line-height: 40px; display: inline-block; text-align: center; width:80%; left: 10%; }
@media screen and (min-width:541px){
.ODM-Menu .M-02{display:none}
.ODM-Menu .P-01{display:block; width:100%; text-align: center; position: absolute;top:47%;}
}
@media screen and (min-width:381px) and (max-width:540px){
.ODM-Menu li a{line-height: 20px;}
.ODM-Menu .M-02{display:block;width:100%; text-align: center; position: absolute;top:23%;}
.ODM-Menu .P-01{display:none}
}
@media screen and (max-width:380px){
.ODM-Menu li a{line-height: 16px;}
.ODM-Menu .M-02{display:block;width:100%; text-align: center; position: absolute;top:15%;line-height: 20px;}
.ODM-Menu .P-01{display:none}
}
.ODM-Menu li:nth-child(1){background-color:#00a1ff;}
.ODM-Menu li:nth-child(2){background-color:#2dccd3;}
.ODM-Menu li:nth-child(3){background-color:#00bb31;}
.ODM-Menu li:nth-child(4){background-color:#ff6900;}
.ODM-Menu li:nth-child(5){background-color:#963cbd;}
.ODM-Menu li:nth-child(6){background-color:#c4d600}
.ODM-Menu li:nth-child(7){width:14.26%; background-color:#000000; color:#FFF;}
.ODM-Solution{padding-top:3%; padding-bottom: 3%;}
.ODM-Solution .ODM-Title{margin-bottom: 2%;}
.ODM-Solution .ODM-Subtitle{font-size: 1em; color:#444; text-align: center; margin-bottom: 2.5%;}
.ODM-Solution .ODM-Des{position: absolute; top:16%; text-align: center; width:100%; }
@media screen and (min-width:769px){
.Table{display: table; width:100%;}
.Table .Table-Row{display: table-row;}
.Table .Table-Row .Table-Cell{display: table-cell; margin:0; padding:0;}
}
.ODM-Solution-L .Image{position: absolute; bottom:13%; width:100%;}
.ODM-Solution-L{width:46.8%; border:1px solid #d4d4d4; padding:0; position: relative;}
.ODM-Solution-C{width:1.8%;}
.ODM-Solution-R{width:51.3%;}
.ODM-Solution-L .title{color:#444444; font-size: 1.5em; position: absolute; z-index: 2; top:10%; text-align: center; width:100%;}
.ODM-Solution-L .title span{padding-left:20px; padding-right:20px; background-color:#f1f1f1; display: inline-block;}
.ODM-Solution-L .line{width:80%; margin:auto; height: 1px; background-color:#c9c9ca; margin-bottom: 3%; position: absolute; top:13%; left:10%; }
.ODM-Solution-R .all-center{border:1px solid #d4d4d4; overflow: hidden; clear: both;}
.ODM-Solution-R .all-center .title{color:#444; font-size: 1.5em; text-align: center; padding:4.5% 0 3.5%;}
.ODM-Solution-R .all-center ul{width:92%; margin:auto;}
.ODM-Select{ padding-bottom: 1.8%;}
.ODM-Select .ODM-Title{margin-bottom: 2%;}
.ODM-Select .des{width:60%; margin:auto; color:#444; line-height: 2em;}
.ODM-Solution-R .all-center li p{text-align: center; font-size: 0.875em; color:#444444; padding:5% 0 10%; margin:0px;}
.ODM-Solution-R .all-center li:last-child{margin-right:0px;}
@media screen and (min-width:481px){
.ODM-Solution-R .all-center li{width:32.3%; margin-right:1.5%; float: left;}
.ODM-Solution-R .all-center li p{font-size: 0.875em; padding:5.5% 0 14%; }
}
@media screen and (max-width:480px){
.ODM-Solution-R .all-center li{width:100%; clear: both; text-align: center}
.ODM-Solution-R .all-center li img{display: block; width:90%; margin:auto;}
.ODM-Solution-R .all-center li p{font-size: 1em; padding:5% 0 10%;}
}
@media screen and (max-width:768px){
.Table{width:90%; margin:auto;}
.ODM-Solution-L{width:100%; float: left;}
.ODM-Solution-C{display: none;}
.ODM-Solution-R{width:100%; float: left; margin-top:2%;}
.ODM-Solution-L .title{position: relative; margin-top:12%;}
.ODM-Solution .ODM-Des{position: relative; margin-top:5%;}
.ODM-Solution-L .Image{position: relative; margin-bottom:10%; width:100%; margin-top:10%;}
}
.ODM-Select .des{width:60%; margin:auto; color:#444;}
@media screen and (max-width:768px){
.ODM-Select .des{width:80%; font-size: 1em; line-height:1.5em; padding: 2% 0;}
}
.ODM-Select .table01 {margin-top:1%; width:50%; float: left;}
.ODM-Select .table01 li{width:47.4%; float: left; margin-right:2.5%; margin-bottom: 3%; overflow: hidden}
.ODM-Select .table02 {margin-top:1%; float: left; width:50%;}
.ODM-Select .table02 li{width:1%; width:49%; float: left; margin-right:2%; margin-bottom: 3%;overflow: hidden }
.ODM-Select .table02 li:nth-child(2){width:49%; margin-right:0;}
.ODM-Select .table02 li:last-child{width:100%; margin-right:0;}
@media screen and (max-width:768px){
.ODM-Select .table01 li{width:48%; margin-right:4%;}
.ODM-Select .table01 li:nth-child(2n){margin-right:0;}
.ODM-Select .table01, .ODM-Select .table02{margin-top:1%; width:100%;}
}
.ODM-Select .table01 li img {max-width: 100%; }
.ODM-Select .Patent{}
.ODM-Select .Patent img {width:100%;}
/**/
.lj_odm_bg { background:#fff;}
.lj_odm_w {width:75%; margin: auto;}
.lj_title { color: #002855; text-align: center; font-size:1.875em; font-weight: 600; position: relative;}
.lj_title .dot{display:inline-block;width:3%;height: 33px;position: absolute;top:35%;margin-left: 5px;}
.lj_title .dot img {max-width: 100%;}
.lj_odm_process {}
.lj_odm_process li { float: left; position: relative;}
.lj_odm_process li:nth-child(1):before {content: ""; position: absolute; background: url(../images/odm_icon_03.png) no-repeat; width:11px; height: 14px; top:37px; left: -20px;}
.lj_odm_process li:nth-child(10):after {content: ""; position: absolute; background: url(../images/odm_icon_03.png) no-repeat; width:11px; height: 14px; top:37px; right: -20px;}
.lj_odm_process li .text01 {text-align: center; padding-bottom: 20px;color: #002855; font-size:1em;}
.process_img{position: relative; border-top: 1px solid #dadada;}
@media screen and (min-width:1025px){
.lj_title{padding: 3em 0;}
.lj_odm_process li {width:20%; }
.process_img {padding: 20px 0 50px;}
}
@media (min-width:481px) and (max-width:1024px){
.lj_title{padding: 2em 0;}
.lj_odm_process li {width:33.3%; }
.lj_odm_process li .text01 {padding-bottom: 15px;}
.process_img {padding: 25px 0 30px;}
}
@media (min-width:320px) and (max-width:480px){
.lj_title{padding: 1.5em 0;}
.lj_odm_process li {width:50%; }
.lj_odm_process li .text01 {padding-bottom: 10px;}
.process_img {padding: 10px 0 20px;}
}
.lj_odm_process li .process_img:after { content: ""; position: absolute; left: 50%; width:5px; height: 5px; border-radius: 5px; background: #002855; margin-left:-2.5px; z-index: 2; top:0px; margin-top:-2.5px;}
.process_img {text-align: center; width:100%; }
.process_img img {max-width: 53%;}
.odm_n_z {padding-top: 3.8%; }
@media screen and (min-width:1440px){
.odm_pic_i {width:1440px;}
}
@media screen and (max-width:1439px){
.odm_pic_i {width:96%;}
}
.odm_pic_i {margin: auto;}
.odm_pic_i img {width:100%;}
/*菜单动画*/
.hz li {margin-right: 25px;}
.hz li:last-child {margin-right: 0;}
.MH-Before{position: absolute; z-index: -1; width:100%;}
.MH-after{
z-index: 2;
top:0px;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
animation-fill-mode:forwards ;
-webkit-animation-fill-mode:forwards ;
}
.indexbox2 .ODM-Title{margin-bottom: 3%}
@-webkit-keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
Reference in New Issue View Git Blame Copy Permalink