/*新增*/ .odm_banner_p { position: relative; } .odm_b_title { position: absolute; } @media screen and (min-width: 900px) { .odm_b_title { top: 36%; left: 18.5%; } .odm_b_title h3 { font-size: 3.75em; } .odn_t_small { width: 40%; line-height: 1.8em; } } @media (min-width: 480px) and (max-width: 899px) { .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; padding-top: 1vw; } .odm_usb_tex { margin: auto; padding: 4.2% 0 2.8%; } @media screen and (min-width: 700px) { .odm_usb_t { font-size: 2em; } .odm_usb_sm { font-size: 1.125em; width: 60%; line-height: 1.8em; } .odm_research { font-size: 2em; } .odm_re_text { font-size: 1.125em; } } @media (min-width: 481px) and (max-width: 699px) { .odm_usb_t { font-size: 1.5em; } .odm_usb_sm { font-size: 1.125em; 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: 1.125em; width: 96%; line-height: 1.8em; } .odm_research { font-size: 1.2em; } } .odm_research { font-weight: 600; color: #333; } .odm_research01 { font-weight: 600; color: #333; padding: 3.5% 0 2.3%; text-align: center; font-size: 1.625em; } .odm_usb_t { font-weight: 600; text-align: center; color: #333; padding-bottom: 2.5%; } .odm_usb_sm { color: #737373; margin: auto; text-align: center; } .odm_usb_sm01 { font-size: 1.125em; 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.3_05.jpg) no-repeat; margin: auto; padding: 3% 4.2%; } .odm_ont_bg { background: rgba(61, 166, 227, 0.9); margin: auto; padding: 3.9% 4.2%; } .odm_ont_bor { padding: 6% 5% 4% 10%; 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: 81%; } .odm_one { width: 66.6%; } .odm_ont_bor { width: 70%; } .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: 5.5% 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; top: 40%; left: 0; color: #fff; font-size: 1em; } /*ODM项目*/ .odm_service { font-size: 2.25em; padding: 5.8% 0 3.2%; text-align: center; color: #333; font-weight: 600; } .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: 5.3%; color: #333; font-weight: 600; } .ODM-Des { color: #444444; line-height: 2em; margin-bottom: 3%; font-size: 1.125em; } .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: 1.125em; 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: 1.125em; 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: 1.125em; 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: 1.125em; 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 li { float: left; position: relative; } .lj_odm_process li:nth-child(1):before, .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; } .lj_odm_process li:nth-child(1):before { left: -20px; } .lj_odm_process li:nth-child(10):after { 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%; } /*菜单动画*/ .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; } } /*新改五大产品线*/ .odm-img { clear: both; } .product { position: relative; background: #fff; width: 20%; float: left; } .product img { max-width: 100%; } .product .thumb { position: relative; overflow: hidden; } .product .thumb .image { position: relative; display: block; overflow: hidden; text-align: center; } .product:hover .add-to-cart { visibility: visible; -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 1; } .product .add-to-cart { display: block; width: 100%; background: #00a0e9; text-align: center; position: absolute; bottom: 0; left: 0; font-size: 14px; padding: 15px 0 35px; z-index: 11; margin: auto; font-weight: 400; visibility: hidden; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; -webkit-transform: translateY(0); transform: translateY(0); color: #fff; opacity: 0; text-transform: uppercase; overflow: hidden; } .product .add-to-cart:hover { color: #fff; -webkit-box-shadow: 0 5px 15px 0 rgb(0 0 0 / 20%); box-shadow: 0 5px 15px 0 rgb(0 0 0 / 20%); }