.wrap img { width: 100%; } /*广告*/ .g-adv { clear: both; height: auto; overflow: hidden; position: relative; } .g-adv img { width: 100%; display: block; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 1rem; width: 26.6% !important; height: 1.5rem; left: 36.7% !important; } .g-adv .swiper-pagination-bullet { background: #fff; width: 0.8rem; height: 0.8rem; border-radius: 0.8rem; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; margin: 0 0 0 1rem; } .g-adv .swiper-pagination-bullet-active, .edge_c .swiper-pagination-bullet-active { background: #e3232f; } .swiper-slide { overflow: hidden; } .til01 { height: 8.3rem; line-height: 2.6rem; font-size: 1.2rem; color: #767676; text-align: center; white-space: nowrap; background: url(../images/tilbg1.png) no-repeat center 3.5rem; -webkit-background-size: 17.75rem 2.65rem; -moz-background-size: 17.75rem 2.65rem; -o-background-size: 17.75rem 2.65rem; background-size: 17.75rem 2.65rem; } .til01 p { display: block; font-size: 2.4rem; line-height: 3rem; font-weight: bold; } .til01 span { color: #2b2b34; font-weight: bold; font-size: 2rem; line-height: 3.5rem; display: block; } /*加工范围*/ .m-range { font-size: 1rem; color: #737373; line-height: 1.5rem; padding: 1rem 2.5% 0; clear: both; display: block; height: 50rem; position: relative; text-align: center; overflow: hidden; } .range_c dl { width: 48.5%; float: left; position: relative; height: 21rem; } .range_c dl:nth-child(2n) { margin-left: 3%; } .range_c dt, .range_c dt img { width: 100%; display: block; } .range_c dd { width: 89.8%; display: block; position: absolute; left: 5.1%; top: 7.3rem; background: url(../images/range_lbg.png) no-repeat 0 0; -webkit-background-size: 100% 5rem; -moz-background-size: 100% 5rem; -o-background-size: 100% 5rem; background-size: 100% 5rem; padding: 2rem 1.1rem 0; height: 12.35rem; border-bottom: solid 0.25rem #e3232f; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; } .range_c dd h3 { font-size: 1.2rem; font-weight: bold; line-height: 1.5rem; color: #2b2b34; padding: 0 0 0.8rem; } .range_c dd h3 a { color: #2b2b34; display: block; } /*产品中心*/ .m-probox { font-size: 1.1rem; line-height: 2rem; padding: 0 2.5%; overflow: hidden; position: relative; text-align: center; } .prev, .next { width: 1.85rem; display: block; position: absolute; top: 16.98rem; right: 2.5%; z-index: 9; } .prev { left: 2.5%; } .protil { height: 2.95rem; text-align: center; font-size: 1.2rem; line-height: 2.6rem; color: #fff; } .protil li { margin: 0 0.95% 0.3rem 0; background: #868686; width: 32.7%; float: left; } .protil li:nth-child(3), .protil li:nth-child(5) { margin-right: 0; } .protil li:nth-child(4), .protil li:nth-child(5) { width: 49.525%; } .protil li.cur { background: #e3232f; } .pro_c { overflow: hidden; height: 19.2rem; } .pro_c img { height: 14.2rem; } .pro_c p, .pro_c p img, .m-edge h2 img, .edge_c dt, .edge_c dt img, .show_c li img { display: block; width: 100%; } .pro_c p span { display: block; font-weight: bold; line-height: 2.5rem; color: #363739; background: #ebebeb; } .pro_l { clear: both; height: 29.1px; } .pro_l li { width: 48.69%; float: left; margin-bottom: 0.7rem; color: #9d9d9d; } .pro_l li img { width: 100%; height: 12rem; display: block; border: solid 1px #dadada; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; } .pro_l ul a:nth-child(2n) li { margin-left: 2.62%; } .pro_l li span { display: block; line-height: 2rem; color: #9d9d9d; background: #ebebeb; } /*优势*/ .m-edge { font-size: 1.1rem; line-height: 1.8rem; color: #737373; position: relative; height: 43.6rem; padding: 1.5rem 0 0; } .m-edge h2 { display: block; margin-bottom: 0.6rem; } .prev2, .next2 { width: 1.7rem; display: block; position: absolute; bottom: 1.4rem; right: 34.3%; z-index: 9; } .prev2 { left: 34.3%; } .edge_c { overflow: hidden; height: 34.4rem; position: relative; margin: 0 2.5%; } .edge_c dl a { color: #957171; } .edge_c dt img { height: 19.2rem; } .edge_c dd { padding: 0 0.66rem; display: block; } .edge_c dd h3 { height: 4.95rem; line-height: 2rem; font-size: 1.4rem; font-weight: bold; color: #e3232f; overflow: hidden; } .edge_c dd h3 span { width: 2.7rem; height: 5rem; float: left; color: #fff; font-size: 2rem; line-height: 2.6rem; background: url(../images/edge_ico.gif) no-repeat 0 0; -webkit-background-size: 2.7rem 3.2rem; -moz-background-size: 2.7rem 3.2rem; -o-background-size: 2.7rem 3.2rem; background-size: 2.7rem 3.2rem; font-family: DINCond-Bold, Times New Roman; text-align: center; margin: 0 1rem 0 0; } .edge_c dd h3 p { width: 70%; float: left; } .edge_c dd h3 p em { display: block; font-size: 0.7rem; font-weight: normal; color: #a8a8a8; font-family: Arial; font-style: normal; line-height: 0.75rem; text-transform: uppercase; } .edge_c dd li { background: url(../images/ico01.gif) no-repeat 0.1rem 0.55rem; -webkit-background-size: 0.4rem 0.4rem; -moz-background-size: 0.4rem 0.4rem; -o-background-size: 0.4rem 0.4rem; background-size: 0.4rem 0.4rem; padding: 0 0 0 0.95rem; line-height: 1.8rem; } /*设备*/ .m-show { height: 62.75rem; padding: 0 2.5%; text-align: center; font-size: 0.9rem; line-height: 2rem; } .m-show .til01 { height: 6.65rem; } .showtil { height: 4.2rem; } .showtil li { height: 2.4rem; width: 27%; float: left; font-size: 1.2rem; color: #fff; background: #868686; line-height: 2.4rem; } .showtil li:nth-child(1) { margin: 0 0.5rem 0 22%; } .showtil li.cur { font-weight: bold; background: #e3232f; } .show_c { overflow: hidden; } .show_c li { width: 48.7%; float: left; margin-bottom: 0.8rem; position: relative; height: 17rem; } .show_c li span { width: 100%; position: absolute; left: 0; bottom: 0; height: 2rem; background: rgba(0, 0, 0, 0.6); color: #fff; } .show_c ul a:nth-child(1) li { width: 100%; height: 32rem; } .show_c ul a:nth-child(2) li { margin-right: 2.6%; } .show_c ul a:nth-child(1) li img { height: 30rem; } .show_c li img { height: 15rem; } /*客户案例*/ .m-case { font-size: 1.1rem; line-height: 1.5rem; color: #737373; padding: 0 2.5%; position: relative; height: 38rem; text-align: center; } .prev3, .next3 { top: 14rem; } .case_c { overflow: hidden; } .case_c dl { height: 27rem; background: #ebebeb; } .case_c dt, .case_c dt img { display: block; width: 100%; } .case_c dt img { height: 16rem; } .case_c dd { padding: 0.4rem 1rem 0; } .case_c dd h3 { height: 2.9rem; font-weight: bold; font-size: 1.2rem; line-height: 2.9rem; color: #363739; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .case_c dd p a, .new_c dd em, .new_c li p em { display: inline-block; color: #e3232f; font-style: normal; } /*资讯*/ .m-news { height: 45rem; overflow: hidden; font-size: 1.1rem; line-height: 1.5rem; color: #606163; } .newtil { height: 3.65rem; line-height: 3.65rem; background: #5e5e60; margin: 0 0 1.2rem; font-size: 1.3rem; color: #fff; } .newtil span { float: right; background: url(../images/ico02.gif) no-repeat 0 center; -webkit-background-size: 0.9rem 0.9rem; -moz-background-size: 0.9rem 0.9rem; -o-background-size: 0.9rem 0.9rem; background-size: 0.9rem 0.9rem; padding: 0 1.3rem; color: #fff; font-size: 1.2rem; } .newtil span a { display: inline-block; color: #fff; } .newtil li { height: 3.65rem; float: left; color: #fff; padding: 0 1.65rem; } .newtil li.cur { background: #e3232f; } .new_c { overflow: hidden; margin: 0 2.5%; } .new_c .new_ctw {} .new_c li { margin: 0 0 0.55rem; overflow: hidden; height: 6.45rem; background: #ededed; } .new_c li span { width: 18.33%; text-align: center; height: 6.45rem; font-family: Tahoma; color: #666; font-size: 0.8rem; line-height: 1.1rem; float: left; } .new_c li span em { display: block; font-size: 2.5rem; color: #666; line-height: 2.3rem; padding: 1rem 0 0; } .new_c li p { height: 6.4rem; width: 81.67%; float: left; overflow: hidden; line-height: 1.7rem; padding: 0.5rem; border-left: solid 1px #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; color: #666; } .new_c li p b { display: block; color: #303030; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .new_c dl { height: 9.1rem; margin: 0 0 0.7rem; background: #ededed; } .new_c dl dt { width: 35.4%; float: left; } .new_c dl dt img { width: 100%; height: 9.1rem; } .new_c dl dd { width: 58%; padding: 0.35rem 0 0 3.11%; height: 7.45rem; float: left; color: #868686; } .new_c dl dd h3 { display: block; font-size: 1.1rem; color: #303030; line-height: 3.3rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /*关于欧顺诺*/ .m-about { font-size: 1.1rem; line-height: 1.8rem; color: #737373; height: 45rem; text-align: center; } /*.about_p,.about_p img{width: 100%;display: block;height:17.1rem;}*/ .about_w { padding: 0.35rem 3.7%; } .about_w h3 { font-size: 1.2rem; font-weight: bold; line-height: 3.4rem; height: 3.4rem; overflow: hidden; color: #2b2b34; } .about_c span { display: block; height: 10rem; overflow: hidden; } .about_c .more { display: block; color: #fff; margin: 0 auto; line-height: 2.15rem; height: 3.35rem; background: url(../images/morebg1.png) no-repeat center 0; -webkit-background-size: 9.3rem 3.35rem; -moz-background-size: 9.3rem 3.35rem; -o-background-size: 9.3rem 3.35rem; background-size: 9.3rem 3.35rem; } .g-hd { height: 5.35rem; position: relative; z-index: 19; background: #e3232f; } .m-logo { display: inline-flex; align-items: center; justify-content: flex-start; height: 5.3rem; } .m-logo img { display: block; margin: 0 auto; max-height: 5.3rem; } .m-text { width: 50%; line-height: 5.3rem; height: 5.3rem; font-size: 1.5rem; white-space: nowrap; text-align: center; color: #fff; overflow: hidden; } .m-text a { display: inline-block; color: #fff; padding: 0 1rem; } .f-fr { float: right; } .f-fl { float: left; } .downmenu { width: 9%; display: block; padding: 2.25rem 0 0; } .downmenu img { width: 1.75rem; display: block; } .head2 .menu_btn a.downmenu.hover { background: #fb4c36; border-radius: 5px; box-shadow: 1px 1px 1px #666; } .menu2 { position: relative; z-index: 9; } .menu2 .slideMenu { width: 80%; padding: 1.2rem 10% 2rem; display: none; z-index: 80; background: rgba(215, 16, 23, 0.9); overflow: hidden; position: absolute; top: 5.35rem; right: 0; transition: transform 1s; -webkit-transition: transform 1s; } .menu2 .slideMenu li { border-bottom: 1px solid #fff; color: #fff; line-height: 3.5rem; font-size: 1.2rem; clear: both; } .menu2 .slideMenu li:last-child { border-width: 0.15rem; } .menu2 .slideMenu li a { color: #fff; display: block; line-height: 3.5rem; } .m-gy-dfl-01 { margin-bottom: 1.6rem; } .m-gy-dfl-01-tit { height: 4rem; width: 100%; font-size: 1.6rem; text-align: center; color: #fff; line-height: 4rem; background: #5e5e60; border-bottom: 1px solid #FA756E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .m-gy-dfl-01-desc { width: 93.75%; margin: 0 auto; } .main-tit-11 { margin: 0 0 0.6rem; height: 4rem; width: 100%; font-size: 1.6rem; text-align: center; color: #fff; line-height: 4rem; background: #5e5e60; border-bottom: 1px solid #FA756E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .m4-prod-list-content-1-con li { width: 48.56%; margin-bottom: 1rem; } .m4-prod-list-content-1-con ul li:nth-child(2n-1) { clear: both; } .m4-prod-list-content-1-con li img { display: block; border: 1px solid #ccc; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .m4-prod-list-content-1-con span { display: block; color: #3b3e3d; line-height: 1.6rem; height: 5rem; overflow: hidden; padding: 0.5rem 0 0.5rem; text-align: center; } .m-cl-1nt4-3-01-list { padding: 0 3%; } .m-cl-1nt4-3-01-list dl { padding: 1.25rem 0; border-bottom: 1px solid #e5e5e5; display: inline-block; width: 100%; } .m-cl-1nt4-3-01-list dt { width: 33.3%; float: left; margin-right: 5.6%; } .m-cl-1nt4-3-01-list dt img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .m-cl-1nt4-3-01-list h3 { height: 2.9rem; font-size: 1.4rem; line-height: 2.9rem; color: #626262; text-overflow: ellipsis; border-bottom: 0.15rem solid #f1f1f1; overflow: hidden; white-space: nowrap; } .m-cl-1nt4-3-01-list-desc { margin-top: 0.4rem; height: 5.2rem; font-size: 1.2rem; line-height: 1.8rem; color: #626262; overflow: hidden; } .m-cl-1nt4-3-01-list-data { font-size: 1.2rem; line-height: 1.8rem; color: #626262; display: inherit; float: right; } .m-cx-cpgs-ts4-3-01 { margin-bottom: 1rem; } .m-cx-cpgs-ts4-3-01-pic { position: relative; width: 93.75%; margin: 1.4rem auto 1rem; } .m-cx-cpgs-ts4-3-01-prev, .m-cx-cpgs-ts4-3-01-next { width: 1rem; height: 1rem; border: 1px solid #bfc4c3; transform: rotate(45deg); box-sizing: border-box; position: absolute; top: 50%; margin-top: -.5rem; z-index: 22; } .m-cx-cpgs-ts4-3-01-prev { left: 2%; border-style: none none solid solid; } .m-cx-cpgs-ts4-3-01-next { right: 2%; border-style: solid solid none none; } .m-cx-cpgs-ts4-3-01-pic .m-cx-cpgs-ts4-3-01-page { font-size: 0.9rem; line-height: 1.5rem; color: #787878; position: absolute; left: 0; bottom: .8rem; text-align: right; box-sizing: border-box; padding-right: .8rem; z-index: 22; } .m-cx-cpgs-ts4-3-01-pic li>img { width: 100%; display: block; } .m-cx-cpgs-ts4-3-01-tit { height: 4rem; width: 100%; font-size: 1.6rem; text-align: center; color: #fff; line-height: 4rem; background: #5e5e60; border-bottom: 1px solid #FA756E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .m-cx-cpgs-ts4-3-01-desc { width: 93.75%; margin: 0 auto 0; } .m-cx-cpxq-01 { width: 93.75%; margin: 0 auto; background: #fff; box-sizing: border-box; padding: 1.2rem 2%; border: 1px solid #e6e6e6; margin-bottom: 1rem; } .m-cx-cpxq-01-tit { height: 2.25rem; border-bottom: 1px solid #d7d7d7; box-sizing: border-box; margin-bottom: 1rem; } .m-cx-cpxq-01-tit span { display: inline-block; height: 2.25rem; font-size: 1.2rem; line-height: 2.25rem; color: #464646; border-bottom: 1px solid #343434; box-sizing: border-box; vertical-align: top; padding-top: .2rem; padding-left: 2.2rem; background: url(images/m-cx-4-3-01-icon1.png) no-repeat .5rem .4rem; background-size: 1.1rem; margin-right: .5rem; } .m-cx-cpxq-01-tit em { font-size: 0.9rem; text-transform: uppercase; color: #c2c2c1; line-height: 2.25rem; vertical-align: top; } .m-cx-xgcp-4pl-ts4-3-01 { width: 93.75%; margin: 0 auto 1rem; border: 1px solid #f3f3f3; } .m-cx-xgcp-4pl-ts4-3-01-tit { height: 2.25rem; border-bottom: 1px solid #d7d7d7; margin-bottom: 1rem; margin-top: 1rem; } .m-cx-xgcp-4pl-ts4-3-01-tit span { display: inline-block; height: 2.25rem; font-size: 1.2rem; line-height: 2.25rem; color: #464646; border-bottom: 1px solid #343434; box-sizing: border-box; padding-left: 2.2rem; background: url(images/m-cx-4-3-01-icon1.png) no-repeat .5rem .4rem; background-size: 1.1rem; margin-right: .5rem; } .m-cx-xgcp-4pl-ts4-3-01-tit em { font-size: 0.9rem; text-transform: uppercase; color: #c2c2c1; line-height: 2.25rem; vertical-align: top; } .m-cx-xgcp-4pl-ts4-3-01-list dl { width: 48.5%; box-sizing: border-box; border: 1px solid #eaeaea; margin-right: 1%; float: left; margin-bottom: -1px; text-align: center; } .m-cx-xgcp-4pl-ts4-3-01-list dl:nth-last-child(1) { margin-right: 0; } .m-cx-xgcp-4pl-ts4-3-01-list dt { border-bottom: 1px solid #eaeaea; } .m-cx-xgcp-4pl-ts4-3-01-list dt, .m-cx-xgcp-4pl-ts4-3-01-list dt img { width: 100%; display: block; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .m-cx-xgcp-4pl-ts4-3-01-list dd { height: 4.25rem; font-size: 1.2rem; color: #4c4c4c; line-height: 4.25rem; padding-top: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .m-xx-01 { margin-bottom: 1.6rem; } .m-xx-01-tit { height: 4rem; width: 100%; font-size: 1.6rem; text-align: center; color: #fff; line-height: 4rem; background: #5e5e60; border-bottom: 1px solid #FA756E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .m-xx-01-txt { width: 93.75%; font-size: 1.4rem; color: #535353; line-height: 2.2rem; text-align: center; border-bottom: 1px solid #a3a3a3; margin: 0.6rem auto; padding: 1rem 0; } .m-xx-01-desc { width: 93.75%; margin: 0 auto; } .m-xx-fy-01 p { width: 62%; float: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .m-xx-fy-01 a { font-size: 12px } .m-xx-fy-01 { background: #e8e8e8; padding: 1.6rem 3.125%; margin-bottom: 1rem; font-size: 12px } .m-xx-fy-01-return { float: right; width: 3.5rem; height: 3rem; box-sizing: border-box; padding-top: .2rem; margin-top: .2rem; font-size: 1rem; line-height: 1.2rem; text-align: center; color: #fff; background: #343434; } .m-xx-fy-01-prev, .m-xx-fy-01-next { height: 1.8rem; margin-bottom: 0.1rem; font-size: 1.2rem; color: #4b4a4a; line-height: 1.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-xx-fy-01-prev span, .m-xx-fy-01-next span { width: 4.8rem; height: 1.8rem; display: block; font-weight: bold; color: #fff; text-align: center; float: left; background: #a2a2a2; margin-right: .2rem; } .g-ft { height: auto; padding: 1.9rem 0 8.1rem; position: relative; z-index: 99; font-size: 1.1rem; line-height: 1.8rem; z-index: 19; color: #606163; text-align: center; } .ontop { height: 3.35rem; display: block; text-align: center; font-size: 1.3rem; line-height: 5.3rem; background: #e6e6e6; position: relative; } .ontop span { display: block; color: #606163; background: url(../images/ontop.gif) no-repeat center 0; -webkit-background-size: 4.25rem 4.25rem; -moz-background-size: 4.25rem 4.25rem; -o-background-size: 4.25rem 4.25rem; background-size: 4.25rem 4.25rem; text-transform: uppercase; position: absolute; top: -1.7rem; left: 50%; margin-left: -2.125rem; width: 4.25rem; border-radius: 1.25rem; } .f_con { height: 6rem; padding: 1rem 0 0; } .f_con p { height: 2.5rem; white-space: nowrap; } .f_con p a { color: #e3232f; } .f_con a.f_map { display: block; line-height: 2rem; height: 2rem; } .f_con a.f_map span { color: #e3232f; display: inline-block; padding: 0 0 0 1.7rem; background: url(../images/f_ico5.gif) no-repeat 0 center; -webkit-background-size: 1.25rem 1.2rem; -moz-background-size: 1.25rem 1.2rem; -o-background-size: 1.25rem 1.2rem; background-size: 1.25rem 1.2rem; } .social_nav5 { height: 4rem; position: fixed; bottom: 0; min-width: 320px; max-width: 640px; width: 100%; z-index: 999; text-align: center; line-height: 1.7rem; background: #e3232f; } .social_nav5 li { height: 4rem; width: 25%; font-size: 1rem; float: left; color: #fff; position: relative; } .social_nav5 li:before { content: ""; position: absolute; width: 1px; height: 100%; left: 0; top: 0; background: #e94f59; } .social_nav5 a:nth-child(1) li:before { background: none; width: 0; height: 0; } .social_nav5 li span { display: block; width: 1.9rem; height: 1.8rem; display: block; padding: 0.5rem 0 0; margin: 0 auto; } .social_nav5 li span img { width: 1.9rem; display: block; } .footer365jz { width: 100%; margin: 15px auto; } .footer365jz .linkslist { text-align: center; margin-bottom: 15px; } .footer365jz .linkslist li { display: inline-block; margin: 5px 10px; color: #e3232f; font-size: 14px; line-height: 18px; } .footer365jz .linkslist li a { color: #e3232f; } .main-footer-1 { height: 4.1rem; position: relative; z-index: 98; } .main-footer-1-con { max-width: 640px; min-width: 320px; width: 100%; position: fixed; left: 0; bottom: 4rem; background: rgba(0, 0, 0, 0.8); } .main-footer-1-list { border-top: 1px solid #e3232f; display: none; } .main-footer-1-list li { float: left; width: 50%; height: 2.5rem; font-size: 1.2rem; line-height: 2.5rem; color: #fff; box-sizing: border-box; padding-left: 18%; position: relative; } .main-footer-1-list li a { color: #fff; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-footer-1-list li:after { content: ""; width: 0.5rem; height: 0.5rem; position: absolute; left: 30%; top: 1rem; background: #fff; border-radius: 100%; } .main-footer-1-list .clear { border-bottom: 1px solid #fff; } .main-footer-1-list .clear:nth-last-child(1) { border-bottom: 0; } .main-footer-1-mata { height: 4.1rem; background: #313131; border-top: 1px solid #e3232f; text-align: center; } .main-footer-1-mata p { display: inline-block; font-size: 1.4rem; color: #fff; line-height: 2.2rem; border: 1px solid #fff; border-radius: 0.4rem; padding: 0 4%; margin-top: 1rem; } .wrap { opacity: 1; /*开屏秀未加载完成,内容默认不显示(首页最外层盒子)*/ } .loading { position: fixed; width: 100%; height: 100%; top: 0; z-index: 51; display: none; max-width: 640px; min-width: 320px; z-index: 99999; } .loading img { display: none; } /*首次加载页面切入效果*/ .homeShow { animation: fade 0.8s ease both; -webkit-animation: fade 0.8s ease both; } /*渐显动画*/ @-webkit-keyframes fade { from { opacity: 1; display: block; } to { opacity: 0; display: none; height: 0; } } @keyframes fade { from { opacity: 1; display: block; } to { display: none; opacity: 0; height: 0; } } .fade { -webkit-animation-name: fade; animation-name: fade; } html { font-size: 10px; } @media screen and (min-width: 320px) { html { font-size: 10.625px; } } @media screen and (min-width: 360px) { html { font-size: 11.875px; } } @media screen and (min-width: 400px) { html { font-size: 13.125px; } } @media screen and (min-width: 440px) { html { font-size: 14.375px; } } @media screen and (min-width: 480px) { html { font-size: 15.625px; } } @media screen and (min-width: 520px) { html { font-size: 16.875px; } } @media screen and (min-width: 560px) { html { font-size: 18.125px; } } @media screen and (min-width: 600px) { html { font-size: 19.375px; } } @media screen and (min-width: 640px) { html { font-size: 20px; } }