.footer { margin-top: 0; } .video-m { width: 100%; background-color: #000; margin-top: 20px; border-radius: 5px; } .bigImg { background-position: center center; background-repeat: no-repeat; background-size: cover; } .appBg { position: relative; background-image: url("../Images/appImg.jpg"); } .appBg .cont { padding-bottom: 36%; } .appBg .mask { position: absolute; top: 0; left: 0; -webkit-mask-image: url(../Images/appImg.png); width: 100%; height: 100%; -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; /*pointer-events: none;*/ z-index: 2; } .appBg .mask video, .appBg .mask .gv { display: block; width: 8.6%; height: 62%; transform: translate(237%, 21.7%); background: #fff; } .appBg .nr { position: absolute; top: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box; } .appBg .nr .main { width: 100%; height: 100%; box-sizing: border-box; } .appBg .nr .nrMain { width: 100%; height: 100%; position: relative; } .nrmT { position: absolute; top: 8%; left: 0%; color: #52c3f1; line-height: 1; } .nrmT .ch { font-size: 65px; letter-spacing: 5px; font-weight: bold; } .nrmT .en { font-size: 19px; margin-top: 14px; } .nrmC { position: absolute; top: 16%; right: 0; } .appBg .nr .tt .t1 { color: #52c3f1; font-size: 33px; font-weight: bold; padding-bottom: 11px; margin-bottom: 8px; position: relative; } .appBg .nr .tt .t3 { color: #b28b6e; } .appBg .nr .tt .t2 { color: #52c3f1; font-size: 57px; font-weight: bold; line-height: 1.2; } .appBg .nr .tt .t1:after { content: ""; position: absolute; bottom: 0; right: 0; width: 243%; height: 1px; background: #b3805c; transform: translateX(-3em); } .appBg .nr .tt .t1:before { content: ""; position: absolute; bottom: 0; right: 0; width: 4px; height: 4px; border: 1px solid #b3805c; transform: translateX(-3em); border-radius: 50%; margin-bottom: -2px; margin-right: -5px; } .appBg .nr .tc { font-size: 15px; color: #cac8cb; margin-top: 60px; line-height: 1.8; } .appBg .nr .yuan { margin-top: 27px; } .appBg .nr .yuan ul { width: 272px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; } .appBg .nr .yuan ul:nth-child(2) { margin-top: 15px; } .appBg .nr .yuan ul.m { display: none; } .appBg .nr .yuan li { width: 110px; height: 110px; background: url(../Images/appIcon.png) no-repeat center center / 100% 100%; font-size: 20px; color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; } .layerVideo { width: 92%; } .appLayer { background-color: transparent !important; } .layerMask { -webkit-mask-image: url(../Images/phone-bg3.png); width: 100%; height: 100%; -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; display: flex; justify-content: center; align-items: center; } .layerBg { background: url("../Images/phone-bg2.png") no-repeat center center / cover; width: 100%; height: 100%; overflow: hidden; } @media (max-width: 1920px) { .appBg .nr .yuan { margin-top: 1.5vw; padding-top: 1px; } .appBg .nr .yuan ul { width: 14vw; } .appBg .nr .yuan li { width: 4vw; height: 4vw; font-size: .8vw; } .appBg .nr .tt .t1 { font-size: 1.7vw; } .appBg .nr .tt .t2 { font-size: 3vw; } .appBg .nr .tc { font-size: 12px; margin-top: 1.5vw; line-height: 1.8; } .nrmT .ch { font-size: 3.3vw; } .nrmT .en { font-size: 1vw; } } @media (max-width: 1600px) { .appBg .nr .tt .t1:after { width: 210%; } } @media (max-width: 1350px) { .appBg .nr .tt .t1:after { width: 187%; } } @media (max-width: 1254px) { .appBg .nr .tt .t1:after { width: 155%; } } @media (max-width: 1064px) { .appBg .nr .tt .t1:after { width: 106%; } .appBg .nr .yuan ul { width: 20vw; } .appBg .nr .yuan li { width: 5vw; height: 5vw; } } @media (max-width: 768px) { .appBg { width: 100%; height: 160vw; background: url("../Images/appImg-m2.jpg") no-repeat center center / cover; } .appBg .mask { -webkit-mask-image: url(../Images/appImg-2.png); } .appBg .mask video, .appBg .mask .gv { width: 23%; height: 31%; transform: translate(81%, 112%); } .appBg .nr .tt .t1:after { transform: translateX(-15.3em); } .appBg .nr .tt .t1:before { transform: translateX(-15.3em); display: none; } .appBg .nr .tt { text-align: left; } .appBg .nr { width: 100%; align-items: flex-start; } .appBg .nr .tt .t1 { font-size: 4vw; } .nrmT { top: 6vw; } .nrmC { top: 10vw; left: 0; } .nrmT .ch { font-size: 7vw; } .nrmT .en { font-size: 2.5vw; } .appBg .nr .tt .t2 { font-size: 7vw; padding-left: 0; } .appBg .nr .yuan { width: 80%; margin: 65vw auto 0; } .appBg .nr .yuan ul { width: 100%; } .appBg .nr .yuan ul.pc { display: none; } .appBg .nr .yuan ul.m { display: flex; } .appBg .nr .yuan li { width: 19.4vw; height: 19.4vw; font-size: 3.6vw; } .appBg .nr .yuan .m:nth-of-type(3) { margin-top: 7vw; transform: translateX(0); } } .appBg2 {} @media (max-width: 768px) { .appBg2 { margin-top: 30px; } } /* banner鍥 */ .bannerList { overflow: hidden; position: relative; } .bannerList li { width: 100%; } .bannerList li .imgBox { width: 100%; padding-bottom: 56.25%; } #J_banner5 li .imgBox { padding-bottom: 51.2%; } .bannerList li .imgBox video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; object-fit: fill; } .bannerList li .imgBox .play { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../Images/play2.png) no-repeat center center; z-index: 2; transition: 0.6s; cursor: pointer; opacity: 0.6; } .bannerList li .imgBox .play:hover { transform: scale(1.2) } #J_banner { display: block; } #J_banner5 { display: none; } @media (max-width: 768px) { .bannerList li .imgBox { padding-bottom: 160%; } } .fanganList { overflow: hidden; position: relative; } .fanganList li { width: 100%; } .fanganList li .imgBox { width: 100%; padding-bottom: 45%; } .fanganList li .imgBox span { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; line-height: 60px; text-align: center; background-color: rgba(0, 0, 0, .6); color: #fff; font-size: 22px; transition: 0.4s; transform: translateY(100%); } .fanganList li:hover .imgBox span { transform: translateY(0); } @media (max-width: 1600px) { .fanganList li .imgBox span { font-size: 1.5vw; } } @media (max-width: 768px) { .fanganList li .imgBox span { transform: translateY(0); height: 2.5em; line-height: 2.5em; font-size: 12px; } .fanganList .swiper-pagination { position: relative; bottom: 0; } } .na-title { display: flex; width: 100%; justify-content: space-between; align-items: flex-end; margin-top: 86px; padding-bottom: 20px; margin-bottom: 40px; line-height: 1.6; position: relative; } .na-title .natl { color: #b28b6e; line-height: 1.4em; font-size: 40px; } .na-title .en { font-family: Family; } .na-title.white .natl { color: #fff; } .na-title .natm { width: 160px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #000; border: 1px solid #000; } .na-title.nt1 { border-bottom: 1px solid #b28b6e; } .na-title.nt2 { padding-top: 50px; border-top: 1px solid #b28b6e; } .na-title.white .natm { background: #fff; color: #11216c; } .na-title .natm .icon { display: inline-block; transition: .5s; } .na-title .natm:hover .icon { transform: translateX(10px); } @media (max-width: 1600px) { .na-title { margin-top: 4.4vw; padding-bottom: 1vw; margin-bottom: 2vw; } .na-title .natl { font-size: 2vw; } .na-title .natm { width: 8.3vw; height: 2vw; line-height: 2vw; font-size: 0.8vw; } } @media (max-width: 1000px) { .na-title .natm { width: 82px; height: 20px; line-height: 20px; font-size: 12px; } } @media (max-width: 768px) { .na-img { margin-top: 10px; margin-left: -10px; margin-right: -10px; } .na-title { margin-top: 30px; padding-bottom: 15px; margin-bottom: 13px; } .na-title.nt2 { margin-top: 43px; } .na-title .natl { font-size: 25px; line-height: 1.4; } .na-title .natl .natlt:nth-child(2) { font-size: 14px; } .na-title .natm { width: 80px; height: 20px; line-height: 20px; font-size: 12px; } .na-cont { font-size: 15px; } .new-pro .na-title { padding-top: 15px; } .new-pro1 .npc li:nth-child(1) { width: 100%; padding-bottom: 69%; } .new-pro1 .npc li:nth-child(2), .new-pro1 .npc li:nth-child(3) { width: 49%; padding-bottom: 32.5%; } .new-pro1 .npc li:nth-child(2) { margin-right: 2%; } .new-pro2 .npc li:nth-child(1) { display: none; } .new-pro2 .npc li:nth-child(2) { width: 100%; padding-bottom: 32.5%; } .new-pro2 { padding-top: 15px; padding-bottom: 15px } .new-pro .npc li span { height: 1.6em; line-height: 1.6em; } .na-cont .l2 { line-height: 2.5; font-size: 12px; } } /*浜у搧涓績*/ .pTypeBox { position: relative; overflow-x: auto; overflow-y: hidden; } .product .pType span { text-align: center; width: 216px; height: 60px; line-height: 60px; margin: 0 2em 40px 0; display: inline-block; background-color: #f3f3f3; font-size: 16px; border-radius: 0; opacity: 1; white-space: nowrap } .product .pType span a { color: #000; } .product .pType span.swiper-pagination-bullet-active { background-color: #b68d71; } .product .pType span.swiper-pagination-bullet-active a { color: #fff; } .product .pList { overflow: hidden; position: relative; } .product .pList li { width: 100%; } .product .pList li .imgBox { width: 100%; padding-bottom: 38%; } .product .pList li .imgBox img.d-bg { filter: blur(10px); } .product .pList li .imgBox .d-box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; clip-path: inset(50% 50% 50% 50%); transition: all 0.6s linear; transition-delay: .3s; overflow: hidden; } .product .pList li.swiper-slide-active .imgBox .d-box { clip-path: inset(0 0 0 0); } .product .pList li span { display: none; width: 100%; background-color: rgba(0, 0, 0, 0.6); color: #fff; position: absolute; bottom: 0; left: 0; z-index: 2; height: 2em; line-height: 2em; text-align: center; font-size: 12px !important; } @media (max-width: 1600px) { .product .pType span { width: 13.5vw; height: 3.75vw; line-height: 3.75vw; margin: 0 1vw 2.5vw 0; font-size: 1vw; } } /*@media (max-width: 1400px) { .product .pType span{ width: auto; margin: 0 1% 2vw 0; height: 2em; line-height: 2em; font-size: 20px; padding: 0 10px; } }*/ @media (max-width: 768px) { .pTypeBox { font-size: 13px; height: 6vw; margin-bottom: 3px; padding-bottom: 10px; display: none; } .pType { position: absolute; top: 0; left: 0; display: flex; } .product .pType span { font-size: 13px; padding: 0 8px; min-width: 1%; width: auto; height: 2em; line-height: 2em; } .product .pList ul { display: block; transform: translate3d(0px, 0px, 0px) !important; } .product .pList li { margin-bottom: 10px; } .product .pList li .imgBox .d-box { display: none; } .product .pList li .imgBox img.d-bg { filter: blur(0); } .product .pList li span { display: block; } } /*浜у搧涓績end*/ .news { overflow: hidden; background-color: #f5f5f5; padding-bottom: 110px; } .newsList { position: relative; overflow: hidden; padding-bottom: 30px; } .newsList li { width: 48%; } .newsList li .imgBox { width: 100%; padding-bottom: 65%; } .newsList li a { display: flex; align-items: center; } .newsList li .c { background-color: #fff; box-sizing: border-box; padding: 30px 20px; flex: 1; } .newsList li .c .t { font-size: 18px; color: #000; -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box; white-space: normal; overflow: hidden; } .newsList li .c .p { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; white-space: normal; overflow: hidden; height: 48px; margin-top: 35px; color: #000; line-height: 2; } .newsList li .time { font-size: 16px; color: #fff; background-color: #a5a5a5; display: flex; flex-direction: column; padding: 5px 10px; } .newsList li .time i { background-color: #fff; height: 1px; width: 100%; } .newsList li:hover .c .t { color: #b28b6e; } .newsList li:hover .time { background-color: #b28b6e; } @media (max-width: 1600px) { .news { padding-bottom: 7vw; } .newsList li .c { padding: 1.87vw 1.25vw; } .newsList li .c .p { margin-top: 2.18vw; } } @media (max-width: 768px) { .newsList li .c { width: 100%; padding: 15px; } .news { padding-bottom: 10px; } .newsList li .c .t { color: #b28b6e; } .newsList li .time { background-color: #b28b6e; } } .newsList .swiper-pagination-bullet-active { background-color: #b28b6e; } /*.newsList .swiper-button-prev, .newsList .swiper-button-next { color: #666; } .newsList .swiper-button-prev:before, .newsList .swiper-button-prev:after, .newsList .swiper-button-next:before, .newsList .swiper-button-next:after { background-color: #666; }*/ /*鎶€鏈?/ .jishu { background: url("../Images/jishu-bg.jpg") no-repeat center center / cover; padding: 110px 0; } .jishu .main { height: 100%; position: relative; } .jishu .l { position: absolute; top: 0; left: 0; width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .jishu .r { float: right; width: 50%; } .jishu .l .tt .t1 { color: #fff; font-size: 43px; font-weight: bold; } .jishu .l .tt .t3 { color: #b28b6e; font-family: "瀹嬩綋"; font-size: 26px; } .jishu .l .tt .t2 { color: #52c3f1; font-size: 60px; font-weight: bold; } .jishu .l .tb span { display: block; color: #b28b6e; display: flex; flex-direction: column; line-height: 1.4; } .jishu .l .tb span i { font-size: 26px; } .jishu .l .tb span a { font-size: 40px; font-family: arial; color: #b28b6e; } .jishu .r ul li { float: left; width: 33%; text-align: center; margin-top: 10%; } .jishu .r ul li:nth-child(-n+3) { margin-top: 0; } .jishu .r ul li .img { width: 120px; max-width: 100%; margin: 0 auto; } /* .jishu .r ul li .img.w2 { width: 147px; }*/ .jishu .r ul li .imgBox { padding-bottom: 100%; background: url("../Images/chilun.png?v=2") no-repeat center center / 100% 100%; } .jishu .r ul li .imgBox.i2 { padding-bottom: 100%; background: url("../Images/chilun2.png") no-repeat center center / 100% 100%; } .jishu .r ul li .imgBox i { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 26px; color: #b28b6e; font-weight: bold; letter-spacing: 0px; transition: 0.6s; } .jishu .r ul li .imgBox i.gk { letter-spacing: 6px; transform: translateX(3px); } .jishu .r ul li .imgBox i img { max-width: 45%; max-height: 45%; } .jishu .r ul li span { display: block; font-size: 18px; color: #fff; margin-top: 20px; line-height: 1.4em; display: flex; align-items: baseline; justify-content: center; } .jishu .r ul li span small { color: #b28b6e; font-size: 1.6em; } .jishu .r ul li span em {} .jishu .l.lm { display: none; } @media (max-width: 1600px) { .jishu { margin-top: 2.6vw; padding: 5.7vw 0; } .jishu .l { padding-left: 30px; box-sizing: border-box; } .jishu .r ul li .img { width: 8.75vw; } .jishu .l .tt .t1 { font-size: 2.6vw; } .jishu .l .tt .t2 { font-size: 3.75vw; } .jishu .l .tt .t3 { font-size: 1.6vw; } .jishu .l .tb span i { font-size: 1.6vw; } .jishu .l .tb span a { font-size: 2.5vw; } .jishu .r ul li .imgBox i { font-size: 2.25vw; } .jishu .r ul li span { font-size: 1.1vw; margin-top: 1em; } } @media (max-width: 768px) { .jishu { padding: 10% 0; background: url("../Images/jishu-bg1-m.jpg") no-repeat center center / cover; } .jishu .l { position: initial; width: 100%; padding-left: 0; margin-bottom: 40px; } .jishu .r { float: none; width: 100%; } .jishu .l .tt .t1 { font-size: 6vw; } .jishu .l .tt .t2 { font-size: 8vw; } .jishu .l .tt .t3 { font-size: 4vw; } .jishu .l .tb span a { font-size: 6vw; width: 12em; margin-top: 10px; line-height: 1; } .jishu .l .tb span i { font-size: 4vw; } .jishu .r ul li .img { width: 70%; } .jishu .r ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .jishu .r ul li .imgBox i { font-size: 4.5vw; } .jishu .r ul li { float: none; width: 30%; } .jishu .r ul li .imgBox i img { max-width: 40%; max-height: 40%; } .jishu .r ul li span { font-size: 1.5vw; overflow: hidden; height: 1.4em; } .jishu .l .tb.tbpc { margin-top: 8vw; } } /*鍏徃浠嬬粛*/ .about { background: url("../Images/about-bg.jpg") no-repeat center center / 100% 100%; padding-top: 100px; padding-bottom: 100px; } .aboutT { display: flex; height: 448px; background-color: #fff; box-shadow: 0 0 19px 1px #d5d5d5; } .aboutT .aboutVideo { width: 50%; height: 100%; position: relative; } .aboutT .aboutVideo .videoBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: url("../Images/about-video.jpg") no-repeat center center / cover; display: flex; align-items: center; justify-content: center; cursor: pointer; } .aboutT .aboutVideo .videoBg img { opacity: 0.5; transition: 0.6s; } .aboutT .aboutVideo .videoBg:hover img { transform: scale(1.2); } .aboutT .aboutVideo video { width: 100%; height: 100%; background: #000; cursor: pointer; } .aboutT .aboutCont { width: 50%; padding: 66px 55px 66px 100px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; text-align: justify; } .aboutT .aboutCont .ab-title .en { font-size: 40px; color: #cbcbcb; line-height: 1; } .aboutT .aboutCont .ab-title .ch { font-size: 40px; color: #b28b6e; line-height: 1; margin-top: 14px; } .aboutT .aboutCont .ab-title .ch:after { content: "鈥?; font-weight: bold; margin-left: 10px; } .aboutT .aboutCont .ab-title .abtb { font-size: 30px; margin-top: 37px; border-bottom: 1px solid #dcdcdc; padding-bottom: 14px; color: #b28b6e; position: relative; } .aboutT .aboutCont .ab-title .abtb:before { content: ""; display: block; position: absolute; width: 5em; height: 3px; left: 0; bottom: 0; background-color: #b28b6e; } .aboutT .aboutCont p { color: #000; line-height: 1.8; height: 7.2em; font-size: 16px; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .aboutT .aboutCont .aboutMore { display: block; background: #fff; width: 110px; height: 30px; line-height: 30px; text-align: center; font-size: 12px; color: #000; border: 1px solid #000; margin-left: auto; margin-right: 0; } .aboutT .aboutCont .aboutMore .icon { display: inline-block; transition: .5s; } .aboutT .aboutCont .aboutMore:hover .icon { transform: translateX(10px); } .aboutB { margin-top: 100px; } .aboutB ul { display: flex; justify-content: space-between; } .aboutB li { background-color: #fff; width: 22%; height: 180px; overflow: hidden; position: relative; box-shadow: 0 0 19px 1px #d5d5d5; } .aboutB .box { height: 200%; transition: 0.6s; } .aboutB li .text { height: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; color: #000; } .aboutB li .text img { max-height: 40%; } .aboutB li span { margin-top: 20px; } .aboutB li .image { height: 50%; background-color: #093a86; } .aboutB li .image img { width: 100%; height: 100%; } .aboutB li .name { position: absolute; bottom: 100%; left: 0; width: 100%; height: 50%; text-align: center; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 18px; transition: 0.6s; display: flex; align-items: center; justify-content: center; } .aboutB li:hover .box { transform: translateY(-50%); } .aboutB li:hover .name { transform: translateY(200%); } @media (max-width: 1600px) { .about { padding-top: 6.2vw; padding-bottom: 6.2vw; } .aboutT { height: 28vw; } .aboutT .aboutCont { padding: 4.1vw 3.1vw 4.1vw 6.25vw; } .aboutT .aboutCont .ab-title .abtb { font-size: 1.8vw; margin-top: 2.3vw; padding-bottom: 0.8vw; } .aboutB { margin-top: 6.25vw; } .aboutB li { height: 11.25vw; } .aboutB li .text { font-size: 1.125vw; } .aboutB li span { margin-top: 1.25vw; } .aboutT .aboutCont p { font-size: 1vw; } .aboutB li .name { font-size: 1.125vw; } .aboutT .aboutCont .aboutMore { width: 6.8vw; height: 1.87vw; line-height: 1.87vw; } } @media (max-width: 1400px) { .aboutT .aboutCont { padding: 1.5vw 1.2vw 1.5vw 2.5vw; } } @media (max-width: 1000px) { .aboutT .aboutCont .aboutMore { width: 82px; height: 20px; line-height: 20px; font-size: 12px; } } @media (max-width: 768px) { .about { padding-top: 30px; padding-bottom: 30px; } .aboutT { flex-direction: column; height: auto; } .aboutT .aboutVideo { width: 100%; height: 53vw; } .aboutT .aboutCont { width: 100%; height: auto; padding: 15px; } .aboutT .aboutCont .ab-title .abtb { margin-top: 0; font-size: 19px; } .aboutT .aboutCont p { font-size: 13px; height: 5.4em; -webkit-line-clamp: 3; margin-top: 20px; } .aboutT .aboutCont .aboutMore { width: 80px; height: 25px; line-height: 25px; font-size: 12px; margin-top: 20px; } .aboutB { margin-top: 20px; } .aboutB ul { flex-wrap: wrap; } .aboutB li { width: 48%; height: 24vw; margin: 2% 0; } .aboutB li .text { font-size: 12px; } .aboutB li .text img { max-height: 30%; } .aboutB li span { margin-top: 1em; } .aboutB li .name { font-size: 12px; } } #jishu { transform: translateY(-8vw); }