.w1720 { width: 17.2rem; margin: 0 auto; position: relative; font-size: 0; max-width: 100%; } @media (max-width: 1740px) { .w1720 { width: 90%; } } @media (max-width: 800px) { .w1720 { width: 94%; } } .w1400 { width: 14rem; margin: 0 auto; position: relative; font-size: 0; max-width: 100%; } @media (max-width: 1420px) { .w1400 { width: 90%; } } @media (max-width: 800px) { .w1400 { width: 94%; } } :root { --themes: #044b91; } .partners { width: 100%; padding: 1.5rem 0 0.3rem; background-color: #f8f8f8; } .partners .partner { width: 100%; font-size: 0; } .partners .partner .pal { width: calc(230 / 1720 * 100%); display: inline-block; vertical-align: middle; padding-right: 0.3rem; } .partners .partner .pal .pit { width: 100%; color: #111; font-weight: bold; line-height: 1.3; margin-bottom: 0.15rem; } .partners .partner .pal .btns { width: 100%; font-size: 0; } .partners .partner .pal .btns .btn { display: inline-block; vertical-align: middle; width: 3em; height: 2.2em; border-radius: 1.1em; border: solid 2px rgba(0, 0, 0, 0.15); position: relative; cursor: pointer; } .partners .partner .pal .btns .btn img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 6px; height: 12px; display: block; } .partners .partner .pal .btns .btn img:first-child { display: block; } .partners .partner .pal .btns .btn img:last-child { display: none; } .partners .partner .pal .btns .btn:hover { background-color: var(--themes); border: solid 2px var(--themes); } .partners .partner .pal .btns .btn:hover img:first-child { display: none; } .partners .partner .pal .btns .btn:hover img:last-child { display: block; } .partners .partner .pal .btns .btn + .btn { margin-left: 0.1rem; } .partners .partner .par { width: calc(1490 / 1720 * 100%); display: inline-block; vertical-align: middle; } .partners .partner .par .swiper-slide { width: 100%; } .partners .partner .par .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; background-color: #fff; } .partners .partner .par .swiper-slide .imgs .img { width: 100%; padding-top: 52.94%; transition: all ease 0.5s; filter: grayscale(100%) brightness(100%); } .partners .partner .par .swiper-slide:hover .imgs .img { transform: scale(1.1); filter: grayscale(0%) brightness(100%); } footer { width: 100%; background-color: #f8f8f8; border-top: solid 1px rgba(0, 0, 0, 0.08); } footer .ftop { width: 100%; padding: 0.5rem 0 0.3rem; } footer .ftop .ftp { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } footer .ftop .ftp .fpl { display: inline-block; vertical-align: top; width: calc(1370 / 1720 * 100%); font-size: 0; } footer .ftop .ftp .fpl .flist { display: inline-block; vertical-align: top; width: calc(171 / 1370 * 100%); padding-right: 0rem; text-align: left; } footer .ftop .ftp .fpl .flist .fit { width: 100%; font-size: 0; margin-bottom: 0.1rem; } footer .ftop .ftp .fpl .flist .fit a { display: inline-block; vertical-align: middle; color: #111; line-height: 1.4; font-weight: bold; transition: all ease 0.5s; padding: 0.06rem 0; } footer .ftop .ftp .fpl .flist .fit a:hover { color: var(--themes); } footer .ftop .ftp .fpl .flist .lx { width: 0.2rem; display: block; height: 0.02rem; background-color: var(--themes); margin: 0.2rem 0; } footer .ftop .ftp .fpl .flist .ful { width: 100%; padding-right: 0.2rem; } footer .ftop .ftp .fpl .flist .ful a { width: 100%; display: inline-block; vertical-align: top; color: #666; transition: all ease 0.5s; line-height: 2; line-height: 1.5; padding: 0.05rem 0; } footer .ftop .ftp .fpl .flist .ful a:hover { color: var(--themes); } footer .ftop .ftp .fpl .flist .ful div { width: 100%; display: inline-block; vertical-align: middle; color: #666; line-height: 2; transition: all ease 0.5s; } footer .ftop .ftp .fpr { display: inline-block; vertical-align: top; width: calc(300 / 1720 * 100%); } footer .ftop .ftp .fpr .codems { width: 100%; font-size: 0; display: flex; justify-content: space-around; } footer .ftop .ftp .fpr .codems .coim { display: inline-block; vertical-align: middle; width: 1.2rem; } footer .ftop .ftp .fpr .codems .coim .cm { width: 100%; display: block; } footer .ftop .ftp .fpr .codems .coim .cm img { width: 100%; display: block; } footer .ftop .ftp .fpr .codems .coim .cim { width: 100%; color: #666; line-height: 1.8; margin-top: 0.1rem; text-align: center; } footer .ftop .ftp .fpr .shares { width: 100%; font-size: 0; text-align: center; margin-top: 0.3rem; } footer .ftop .ftp .fpr .shares .am { display: inline-block; vertical-align: middle; height: 0.23rem; width: auto; margin: 0 0.06rem; } footer .ftop .ftp .fpr .shares .am a, footer .ftop .ftp .fpr .shares .am img { height: 100%; display: block; } footer .ftop .ftb { width: 100%; font-size: 0; padding: 0.25rem 0; } footer .ftop .ftb .stm { display: inline-block; vertical-align: top; color: #111; line-height: 1.5; width: 6em; } footer .ftop .ftb .srem { display: inline-block; vertical-align: top; width: calc(100% - 6em); } footer .ftop .ftb .srem .swiper-slide { display: inline-block; vertical-align: middle; width: auto; margin-right: 0.3rem; } footer .ftop .ftb .srem .swiper-slide a { display: inline-block; vertical-align: middle; color: #666; line-height: 1.8; } footer .fbot { width: 100%; background-color: #e7e7e7; border-bottom: solid 0.04rem var(--themes); font-size: 0; padding: 0.35rem 0; } footer .fbot .fob { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } footer .fbot .fbl { display: inline-block; vertical-align: middle; width: auto; flex: 1; padding-right: 0.4rem; } footer .fbot .fbl .fim { width: 100%; color: #666; line-height: 2; } footer .fbot .fbl .fim p { color: #666; line-height: 2; } footer .fbot .fbl .fim a { display: inline-block; color: #666; } footer .fbot .fbl .fim a:hover { color: var(--themes); } footer .fbot .fbr { display: inline-block; vertical-align: middle; width: auto; text-align: right; } footer .fbot .fbr .atms { display: inline-block; vertical-align: middle; } footer .fbot .fbr .atms .am { display: inline-block; vertical-align: middle; width: auto; margin-left: 0.34rem; color: #111; line-height: 2; } footer .fbot .fbr .atms .am span { display: inline-block; vertical-align: middle; width: 0.21rem; height: 0.21rem; margin-right: 0.05rem; } footer .fbot .fbr .atms .am span img { width: 100%; display: block; } @media (max-width: 850px) { .partners .partner .pal { width: 100%; margin-bottom: 0.25rem; display: flex; justify-content: space-between; align-items: center; padding-right: 0; } .partners .partner .pal .pit { width: auto; display: inline-block; vertical-align: middle; } .partners .partner .pal .btns { width: auto; display: inline-block; vertical-align: middle; } .partners .partner .par { width: 100%; } footer .ftop { padding: 0rem 0 0; } footer .ftop .ftp { width: 100%; } footer .ftop .ftp .fpl { width: 100%; display: none; } footer .ftop .ftp .fpl .flist { width: 100%; border-bottom: solid 1px rgba(0, 0, 0, 0.15); position: relative; } footer .ftop .ftp .fpl .flist .fit { width: 100%; margin-bottom: 0; padding: 0.3rem 0; } footer .ftop .ftp .fpl .flist .lx { display: none; } footer .ftop .ftp .fpl .flist .ful { width: 100%; font-size: 0; padding-bottom: 0.15rem; display: none; } footer .ftop .ftp .fpl .flist .ful a { line-height: 2; } footer .ftop .ftp .fpl .flist.has-ful:after { content: " "; display: inline-block; width: 14px; height: 8px; background-image: url("../images/xx.png"); background-position: center; background-size: 100% 100%; text-align: center; position: absolute; right: 0.2rem; left: auto; transform: translateX(0) rotate(0deg); top: 0.5rem; color: #333; border: none; transition: all ease 0.5s; } footer .ftop .ftp .fpl .flist.has-ful.show:after { content: " "; transform: translateX(0) rotate(180deg); } footer .ftop .ftp .fpr { width: 100%; display: none; margin-top: 0.2rem; } footer .ftop .ftp .fpr .codems { justify-content: center; } footer .ftop .ftp .fpr .codems .coim { width: 2.2rem; } footer .ftop .ftp .fpr .shares .am { height: 18px; } footer .ftop .ftb { width: 100%; } footer .fbot .fob { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column-reverse; } footer .fbot .fob .fbl { width: 100%; } footer .fbot .fob .fbr { width: 100%; text-align: left; margin-bottom: 0.1rem; } footer .fbot .fob .fbr .atms .am { margin-left: 0; margin-right: 0.3rem; } footer .fbot .fob .fbr .atms .am span { width: 15px; height: 15px; position: relative; top: -0.02rem; } } .rightnav { position: fixed; right: 0.3rem; top: 45%; transform: translateY(-50%); z-index: 100; display: none; } .rightnav .lines { width: 100%; display: block; } .rightnav .lines .line { width: 100%; display: block; position: relative; padding: 0.12rem 0; cursor: pointer; } .rightnav .lines .line .xm { display: block; width: 14px; height: 2px; background-color: rgba(0, 0, 0, 0.2); transition: all ease 0.5s; } .rightnav .lines .line .xim { position: absolute; right: calc(100% + 4px); color: #666; line-height: 1.5; top: 50%; white-space: nowrap; transform: translateY(-50%); transition: all ease 0.5s; opacity: 0; } .rightnav .lines .line.on .xm { background-color: var(--themes); } .rightnav .lines .line.on .xim { opacity: 1; } .ricomt { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; } .ricomt .ritm { display: block; background-color: #fff; border-radius: 5px 0 0 5px; transition: all ease 0.5s; position: relative; } .ricomt .ritm a { width: 100%; display: block; padding: 0.1rem; } .ricomt .ritm .pic { width: 0.26rem; height: 0.26rem; display: block; margin: 0 auto 0.05rem; } .ricomt .ritm .pic img { width: 100%; display: block; } .ricomt .ritm .pim { width: 100%; color: #999; line-height: 1.5; white-space: nowrap; text-align: center; } .ricomt .ritm .copem { position: absolute; right: calc(100% + 3px); top: 50%; transform: translateY(-50%); background-color: var(--themes); padding: 0.1rem; width: 1.4rem; display: none; border-radius: 5px; } .ricomt .ritm + .ritm { margin-top: 1px; } .ricomt .ritm:hover { background-color: var(--themes); } .ricomt .ritm:hover .pim { color: #fff; } .ricomt .ritm:hover .pic img { filter: grayscale(100%) brightness(400%); } .ricomt .ritm:hover .copem { display: block; } .ricomt .botm { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #fff; display: block; cursor: pointer; margin: 0.1rem auto 0; } .ricomt .botm img { width: 100%; display: block; } .ricomt .botm:hover { background-color: var(--themes); } .ricomt .botm:hover img { filter: grayscale(100%) brightness(400%); } .ricomt.bot { top: auto; bottom: 0%; } @media (max-width: 850px) { .ricomt .ritm .pic { width: 26px; height: 26px; } .ricomt .ritm .pim { display: none; } } .banner { width: 100%; position: relative; } .banner .swiper-slide { width: 100%; display: block; } .banner .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; display: block; } .banner .swiper-slide .imgs .img { width: 100%; display: block; height: calc(100vh - 1.3rem); } .banner .swiper-slide .box { position: absolute; left: calc((100% - 17.2rem) / 2); top: 50%; transform: translateY(-50%); z-index: 3; width: 7rem; max-width: 90%; } .banner .swiper-slide .box .bim { width: 100%; opacity: 0; transform: translate3d(0, 25%, 0); transition: opacity 1s ease-out 0.2s,transform 1s ease-out 0.2s,box-shadow .3s; } .banner .swiper-slide .box .bim .em { display: inline-block; color: #fff; font-weight: bold; } .banner .swiper-slide .box .bim .ex { display: inline-block; color: #fff; margin-left: 0.06rem; } .banner .swiper-slide .box .bip { width: 100%; color: #fff; font-weight: bold; line-height: 1.3; margin-top: 0.1rem; opacity: 0; transform: translate3d(0, 25%, 0); transition: opacity 1s ease-out 0.2s,transform 1s ease-out 0.2s,box-shadow .3s; } .banner .swiper-slide .box .bip p { color: #fff; line-height: 1.3; } .banner .swiper-slide .box .more { width: 100%; font-size: 0; margin-top: 0.55rem; opacity: 0; transform: translate3d(0, 25%, 0); transition: opacity 1s ease-out 0.2s,transform 1s ease-out 0.2s,box-shadow .3s; } .banner .swiper-slide .box .more a { display: inline-block; vertical-align: middle; line-height: 3.1; border-radius: 1.55em; padding: 0 0.4rem; color: #fff; border: solid 2px #fff; transition: all ease 0.5s; } .banner .swiper-slide .box .more a span { display: inline-block; vertical-align: middle; width: 0.13rem; margin-right: 0.1rem; position: relative; z-index: 2; top: -0.02rem; } .banner .swiper-slide .box .more a span img { width: 100%; display: block; } .banner .swiper-slide .box .more a:hover { background-color: var(--themes); border: solid 2px var(--themes); } .banner .swiper-slide-active .box .bim, .banner .swiper-slide-active .box .bix, .banner .swiper-slide-active .box .bip, .banner .swiper-slide-active .box .biv, .banner .swiper-slide-active .box .more { opacity: 1; transform: translate3d(0, 0, 0); } .banner .swiper-pagination { bottom: 0.35rem; text-align: center; } .banner .swiper-pagination-bullet { background-color: transparent; width: 0.22rem; height: 0.23rem; background-image: url("../images/i7.png"); background-size: 100% 100%; border-radius: 0; opacity: 0.5; margin: 0 0.08rem; transition: all ease 0.5s; } .banner .swiper-pagination-bullet-active { background-color: transparent; opacity: 1; } .banner .down { position: absolute; z-index: 4; left: 0.4rem; bottom: 0.4rem; text-align: center; cursor: pointer; } .banner .down .dim { width: 1.5em; text-align: center; line-height: 1.25; color: #fff; } .banner .down .xls { display: block; position: relative; width: 2px; height: 0.3rem; margin: 0.1rem auto 0; background-color: rgba(255, 255, 255, 0.3); } .banner .down .xls span { position: absolute; bottom: 0.06rem; width: 2px; left: 0; height: 0.1rem; background-color: #fff; z-index: 2; } .banner .pcm{display: block !important;} .banner .phm{display: none !important;} @media (max-width: 1740px) { .banner .swiper-slide .box { left: 5%; } } @media (max-width: 850px) { .banner .pcm{display: none !important;} .banner .phm{display: block !important;} .banner .swiper-slide .imgs .img { height: calc(100vh - 1.8rem); } } .bannav { width: 100%; height: 1.3rem; position: relative; } .bannav .swiper-slide { width: 100%; } .bannav .swiper-slide a { width: 100%; height: 1.3rem; display: flex; flex-wrap: wrap; align-content: center; } .bannav .swiper-slide .pic { display: block; margin: 0 auto 0; width: 0.72rem; height: 0.72rem; } .bannav .swiper-slide .pic img { width: 100%; display: block; } .bannav .swiper-slide .pic img:first-child { display: block; } .bannav .swiper-slide .pic img:last-child { display: none; } .bannav .swiper-slide .pim { width: 100%; text-align: center; color: #666; line-height: 1.8; } .bannav .swiper-slide:hover .pic img:first-child, .bannav .swiper-slide.on .pic img:first-child { display: none; } .bannav .swiper-slide:hover .pic img:last-child, .bannav .swiper-slide.on .pic img:last-child { display: block; } .bannav .swiper-slide:hover .pim, .bannav .swiper-slide.on .pim { color: var(--themes); } .bannav .btn { display: inline-block; vertical-align: middle; width: 2.2em; height: 2.2em; border-radius: 1.1em; border: solid 2px rgba(0, 0, 0, 0.15); position: relative; cursor: pointer; position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); } .bannav .btn img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 6px; height: 12px; display: block; } .bannav .btn img:first-child { display: block; } .bannav .btn img:last-child { display: none; } .bannav .btn:hover { background-color: var(--themes); border: solid 2px var(--themes); } .bannav .btn:hover img:first-child { display: none; } .bannav .btn:hover img:last-child { display: block; } .bannav .bl { left: 0.2rem; } .bannav .br { right: 0.2rem; } .bannav.gray { background-color: #f8f8f8; } @media (max-width: 850px) { .bannav { height: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; } } header { position: fixed; top: 0; left: 0; right: 0; z-index: 501; transition: all ease 0.5s; } header .header { width: 100%; padding: 0.2rem 0.4rem 0; display: flex; justify-content: space-between; transition: all ease 0.5s; min-height: 0.9rem; } header .hel { display: inline-block; vertical-align: middle; width: 1.8rem; } header .hel .menu { display: inline-block; vertical-align: middle; width: 0.24rem; height: 0.24rem; cursor: pointer; position: relative; display: none; } header .hel .menu img { width: 100%; display: block; } header .hel .menu img:first-child { display: block; } header .hel .menu img:last-child { display: none; } header .hel .menu .clk { width: 100%; height: 100%; text-align: center; color: #fff; font-size: 20px; line-height: 24px; text-align: center; position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; } header .her { display: inline-block; vertical-align: middle; width: 1.8rem; text-align: right; } header .her .search { display: inline-block; vertical-align: middle; width: auto; text-align: center; cursor: pointer; position: relative; margin-left: 0.2rem; width: 19px; height: 40px; } header .her .search .sc { display: inline-block; vertical-align: middle; width: 19px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; } header .her .search .sc img { width: 100%; display: block; } header .her .search .sc img:first-child { display: block; } header .her .search .sc img:last-child { display: none; } header .her .sechom { position: absolute; z-index: 3; right: 0; width: 4rem; background-color: #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09); padding: 0.1rem; top: 100%; display: none; } header .her .sechom form { width: 100%; display: block; font-size: 0; } header .her .sechom .input { display: inline-block; vertical-align: middle; width: calc(100% - 2.4em - 0.2rem); margin-right: 0.2rem; } header .her .sechom .input .int { width: 100%; display: block; background-color: #fff; line-height: 2.4; height: 2.4em; color: #111; padding: 0 0.1rem; border: none; background-color: #fff; } header .her .sechom .stn { display: inline-block; vertical-align: middle; width: 2.2em; height: 2.2em; border-radius: 50%; position: relative; } header .her .sechom .stn img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 21px; height: 20px; display: block; border-radius: 50%; cursor: pointer; z-index: 1; } header .her .sechom .stn input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; border-radius: 50%; cursor: pointer; z-index: 3; opacity: 0; } header .her .languages { width: auto; display: inline-block; vertical-align: middle; font-size: 0; margin: 0 0.1rem; text-align: left; z-index: 3; } header .her .languages .lauges { width: 100%; display: inline-block; vertical-align: middle; position: relative; } header .her .languages .lauges .lashow { width: 100%; color: #a3a3a3; position: relative; cursor: pointer; font-size: 0; padding-right: 0.1rem; } header .her .languages .lauges .lashow .ac { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; width: 19px; height: 19px; margin-right: 0.1rem; } header .her .languages .lauges .lashow .ac img { width: 100%; display: block; } header .her .languages .lauges .lashow .ac img:first-child { display: block; } header .her .languages .lauges .lashow .ac img:last-child { display: none; } header .her .languages .lauges .lashow .am { color: #fff; line-height: 40px; display: inline-block; vertical-align: middle; width: auto; } header .her .languages .lauges .lashow:after { content: ' '; position: absolute; right: 0rem; top: calc(50% + 0.015rem); transform: translateY(-50%); width: 0; height: 0; border: solid 0.03rem; border-color: #fff transparent transparent transparent; } header .her .languages .lauges .language { position: absolute; z-index: 20; top: 100%; width: 100%; display: none; width: 60px; width: 1rem; left: 50%; transform: translateX(-50%); } header .her .languages .lauges .language .latem { width: 100%; } header .her .languages .lauges .language .latem a { width: 100%; display: block; color: #333; padding: 0 0.1rem; line-height: 3; text-align: center; position: relative; background: #efefef; overflow: hidden; } header .her .languages .lauges .language .latem a span { display: inline-block; vertical-align: middle; position: relative; z-index: 2; } header .her .languages .lauges .language .latem a:after { content: ""; position: absolute; width: 140%; height: 100%; left: -10%; top: 0; z-index: -1; transform: translate(-105%, 0) skew(-20deg); background: var(--themes); z-index: 1; animation: outHover 0.5s ease 1 forwards; } header .her .languages .lauges .language .latem a:hover { color: #fff; } header .her .languages .lauges .language .latem a:hover span { color: #fff; } header .her .languages .lauges .language .latem a:hover:after { animation-name: onHover; } @keyframes onHover { from { transform: translate(-110%, 0) skew(-20deg); } to { transform: translate(0, 0) skew(-20deg); } } @keyframes outHover { from { transform: translate(0, 0) skew(-20deg); } to { transform: translate(110%, 0) skew(-20deg); } } header .hem { display: inline-block; vertical-align: middle; flex: 1; transition: all ease 0.5s; } header .hem.hide { top: calc( -0.35rem - 0.9rem - 0.2rem); } header .logm { width: 100%; text-align: center; font-size: 0; width: 2.11rem; display: block; margin: 0 auto; } header .logm .logo { width: auto; height: 0.35rem; overflow: hidden; transition: all ease 0.5s; display: inline-block; vertical-align: middle; } header .logm .logo a, header .logm .logo img { width: 100%; display: block; } header .logm .logo img:first-child { display: block; } header .logm .logo img:last-child { display: none; } header nav { width: 100%; display: block; text-align: center; } header nav .natem { width: auto; display: inline-block; vertical-align: middle; text-align: center; font-size: 0; } header nav .natem .nas { width: auto; display: inline-block; position: relative; margin: 0 0.1rem; } header nav .natem .nas a { display: inline-block; line-height: 0.9rem; color: #fff; font-weight: bold; position: relative; padding: 0 0.1rem; } header nav .natem .nas .xs { display: inline-block; vertical-align: middle; width: 0.1rem; margin-left: 0.1rem; display: none; } header nav .natem .nas .xs img { width: 100%; display: block; } header nav .natem .nas .xs img:first-child { display: block; } header nav .natem .nas .xs img:last-child { display: none; } header nav .natem .nas:after { content: ' '; position: absolute; left: 50%; bottom: 0rem; transform: translateX(-50%); opacity: 0; width: 100%; height: 3px; background-color: var(--themes); transition: all ease 0.5s; width: 0; } header nav .natem .navuls { width: 2.2rem; width: 1.8rem; position: absolute; z-index: 101; left: calc(51%); top: 100%; transform: translateX(-50%); background-color: white; display: none; } header nav .natem .navuls ul { width: 100%; } header nav .natem .navuls ul li { width: 100%; position: relative; } header nav .natem .navuls ul li .njm { width: 100%; font-size: 0; background-color: rgba(255, 255, 255, 0.5); } header nav .natem .navuls ul li .ns { width: 100%; display: inline-block; vertical-align: middle; line-height: 3; color: #222; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 0.1rem; position: relative; text-align: center; background-color: rgba(255, 255, 255, 0.5); } header nav .natem .navuls ul li .theul { width: 100%; background-color: #fff; display: none; } header nav .natem .navuls ul li .theul li { width: 100%; font-size: 0; } header nav .natem .navuls ul li .theul li .xn { display: inline-block; vertical-align: middle; color: #333; line-height: 2.5; padding: 0 0.2rem; } header nav .natem .navuls ul li .theul li .xn:hover { color: #333; } header nav .natem .navuls ul li:hover .ns { background-color: var(--themes); color: #fff; } header nav .natem .navuls ul li.has-the:after { content: "+"; display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; position: absolute; background: none; right: 0; left: auto; transform: translateX(0); top: 0.05rem; font-size: 20px; color: #333; border: none; display: none; } header nav .natem .navuls ul li.has-the.show:after { content: "-"; } header nav .natem .longul { position: absolute; top: calc(0.9rem + 0.35rem + 0.2rem); top: 100%; left: 0; right: 0; background: rgba(255, 255, 255, 0.9); width: 100%; box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.06); z-index: 50; display: none; padding: 0.5rem 0; } header nav .natem .longul .longm { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } header nav .natem .longul .longm .lgl { display: inline-block; vertical-align: middle; width: calc(600 / 1720 * 100%); } header nav .natem .longul .longm .lgl .imgs { width: 100%; position: relative; overflow: hidden; } header nav .natem .longul .longm .lgl .imgs .img { width: 100%; padding-top: 60%; transition: all ease 0.5s; } header nav .natem .longul .longm .lgl .imgs:hover .img { transform: scale(1.1); } header nav .natem .longul .longm .lgl a { width: 100%; display: block; } header nav .natem .longul .longm .lgr { display: inline-block; vertical-align: middle; width: calc(1000 / 1720 * 100%); } header nav .natem .longul .longm .lgr .lgrlist { width: 100%; font-size: 0; text-align: left; } header nav .natem .longul .longm .lgr .lgrlist .lgam { display: inline-block; vertical-align: top; width: 32%; margin-right: 2%; margin-bottom: 0.2rem; } header nav .natem .longul .longm .lgr .lgrlist .lgam a { width: 100%; display: block; font-size: 0; } header nav .natem .longul .longm .lgr .lgrlist .lgam .gc { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; margin-right: 0.2rem; } header nav .natem .longul .longm .lgr .lgrlist .lgam .gc img { width: 100%; display: block; } header nav .natem .longul .longm .lgr .lgrlist .lgam .gms { display: inline-block; vertical-align: middle; width: calc(100% - 0.6rem - 0.2rem); } header nav .natem .longul .longm .lgr .lgrlist .lgam .gm { width: 100%; color: #333; line-height: 1.5; max-height: 3em; } header nav .natem .longul .longm .lgr .lgrlist .lgam:hover .gm { color: var(--themes); } header nav .natem .longul .longm .lgr .lgrlist .lgam:nth-child(3n) { margin-right: 0; } header nav .natem.has-nav .nas .xs { display: inline-block; } header nav .natem.on .nas a { color: var(--themes); } header nav .natem.on .nas:after { opacity: 1; width: 100%; } header nav .natem.on .nas .xs img:first-child { display: none; } header nav .natem.on .nas .xs img:last-child { display: block; } header nav .natem:hover .nas a { color: var(--themes); } header nav .natem:hover .nas .xs img:first-child { display: none; } header nav .natem:hover .nas .xs img:last-child { display: block; } header nav .natem:hover .nas:after { opacity: 1; width: 100%; } header.short { background-color: #fff; } header.short .hel { display: none; } header.short .hel .menu img:first-child { display: none; } header.short .hel .menu img:last-child { display: block; } header.short .hel .menu .clk { color: #333; } header.short .her .languages .lauges .lashow .ac img:first-child { display: none; } header.short .her .languages .lauges .lashow .ac img:last-child { display: block; } header.short .her .languages .lauges .lashow .am { color: #333; } header.short .her .search .sc img:first-child { display: none; } header.short .her .search .sc img:last-child { display: block; } header.short .hem { display: flex; align-items: center; } header.short .logm .logo { display: inline-block; vertical-align: middle; } header.short .logm .logo img:first-child { display: none; } header.short .logm .logo img:last-child { display: block; } header.short .header { align-items: center; padding: 0 0.4rem; } header.short nav { flex: 1; } header.short nav .natem .nas a { color: #333; } header.short nav .natem .longul { top: 100%; } header.short nav .natem.on .nas a { color: var(--themes); } header.short nav .natem:hover .nas a { color: var(--themes); } @media (max-width: 850px) { header .header { align-items: center; padding: 0.1rem 3%; } header nav { width: 100%; position: fixed; right: 0; top: calc(0.9rem); left: auto; height: calc(100vh - 0.9rem); background-color: #fff; margin-right: 0; overflow: auto; z-index: 500; transition: transform .3s; padding-left: 0.1rem; padding: 0.1rem; display: block; text-align: left; display: none; border-top: solid 1px #e5e5e5; } header nav .natem { display: inline-block; vertical-align: middle; position: relative; width: auto; width: 100%; padding: 0.1rem 0; opacity: 0; transform: translate(-10px, -30px); transition: all .8s ease; } header nav .natem .nas { width: auto; display: inline-block; text-align: left; width: 100%; margin: 0; } header nav .natem .nas a { width: auto; display: inline-block; vertical-align: middle; line-height: 2.5; color: #333; font-weight: bold; font-family: 'Alibaba-PuHuiTi-Bold'; padding: 0 0.3rem; position: relative; } header nav .natem .nas .ik { display: none !important; } header nav .natem .nas a:hover { color: #1c38e2; background-color: transparent; } header nav .natem .navuls { width: 100%; position: relative; z-index: 101; left: 0%; top: 0%; transform: translateX(0%); background: #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09); display: none; text-align: left; } header nav .natem .navuls ul { width: 100%; padding: 0.1rem 0.2rem; } header nav .natem .navuls ul li { width: 100%; display: block; position: relative; margin-bottom: 0; } header nav .natem .navuls ul li .ns { width: auto; display: inline-block; vertical-align: middle; line-height: 3; color: #333; text-align: left !important; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 0.2rem; background: #fff; position: relative; } header nav .natem .navuls ul li .ns:hover { color: #1c38e2; } header nav .natem .navuls ul li + li { border-top: solid 1px #eee; } header nav .natem .navuls ul li:hover .ns { background-color: transparent; color: #1c38e2; } header nav .natem .navuls ul li.has-the:after { display: block; } header nav .natem:before { display: none !important; } header nav .natem .prosubnav { display: none; } header nav .natem.on .nas:after { display: none; } header nav .natem.has-nav .nas .xs { display: none; } header nav .natem.has-nav:after { content: "+"; display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; position: absolute; background: none; right: 0; left: auto; transform: translateX(0); top: 0.05rem; font-size: 20px; color: #333; border: none; } header nav .natem.has-nav.show:after { content: "-"; } header nav .natem.animate { opacity: 1; transform: translate(0, 0); } header .hel, header .her { width: calc((100% - 3.2rem) / 2); } header .logm .logo { width: 3rem; height: auto !important; } header .hel .menu { width: 16px; height: 16px; display: inline-block; } header .her .sechom { width: 90vw; } header.short .hel { display: inline-block; } header.menu-state .hel .menu img { opacity: 0; } } @media (max-width: 450px) { header .hel, header .her { width: calc((100% - 2.4rem) / 2); } header .logm .logo { width: 2.2rem; height: auto !important; } } .nanner { width: 100%; position: relative; } .nanner .imgs { width: 100%; overflow: hidden; position: relative; } .nanner .imgs .img { width: 100%; padding-top: 43.22%; } .nanner .nox { position: absolute; left: calc((100% - 17.2rem) / 2); top: 50%; transform: translateY(-50%); z-index: 3; width: 7rem; max-width: 90%; } .nanner .nox .nit { width: 100%; color: #fff; line-height: 1.3; } .nanner .nox .xm { width: 100%; color: #fff; line-height: 2; margin-top: 0.1rem; } .nanner .nox .xd { width: 100%; color: #fff; line-height: 2; margin-bottom: 0.1rem; } .nanner .swiper-pagination { bottom: 0.35rem; text-align: center; } .nanner .swiper-pagination-bullet { background-color: transparent; width: 0.22rem; height: 0.23rem; background-image: url("../images/i7.png"); background-size: 100% 100%; border-radius: 0; opacity: 0.5; margin: 0 0.08rem; transition: all ease 0.5s; } .nanner .swiper-pagination-bullet-active { background-color: transparent; opacity: 1; } @media (max-width: 1740px) { .nanner .nox { left: 5%; } } .crumbs { width: 100%; background-color: #ebebeb; } .crumbs .columns { width: 100%; background-color: #ebebeb; } .crumbs .columns.fixed { position: fixed; z-index: 20; left: 0; right: 0; background-color: #fff; box-shadow: 0px 1px 40px 3px rgba(29, 0, 0, 0.05); } .crumbs .column { width: 100%; } .crumbs .cul { width: 100%; } .crumbs .cul .swiper-wrapper.center { justify-content: center; } .crumbs .cul .swiper-slide { display: inline-block; vertical-align: middle; width: auto; margin: 0 0.5rem; } .crumbs .cul .swiper-slide a { display: inline-block; vertical-align: middle; color: #666; line-height: 0.85rem; position: relative; } .crumbs .cul .swiper-slide a:after { content: ' '; position: absolute; bottom: 0; width: 100%; left: 0; right: 0; background-color: var(--themes); height: 0.04rem; opacity: 0; transition: all ease 0.5s; } .crumbs .cul .swiper-slide.on a { color: var(--themes); } .crumbs .cul .swiper-slide.on a:after { opacity: 1; } .crumbs .cul .swiper-slide:hover a { color: var(--themes); } .crumbs .crumbb { width: 100%; } .crumbs .crumbb.fixed { position: fixed; z-index: 20; left: 0; right: 0; background-color: #fff; box-shadow: 0px 1px 40px 3px rgba(29, 0, 0, 0.05); } .videosd { width: 100%; position: relative; padding: 0.6rem 0; } .videosd .videolis { width: 100%; font-size: 0; } .videosd .videolis .videom { display: inline-block; vertical-align: top; width: calc(550 / 1720 * 100%); margin-right: calc(34 / 1720 * 100%); margin-bottom: 0.35rem; } .videosd .videolis .videom a { width: 100%; display: block; } .videosd .videolis .videom .imgs { width: 100%; position: relative; overflow: hidden; } .videosd .videolis .videom .imgs .img { width: 100%; padding-top: 62.77%; transition: all ease 0.5s; } .videosd .videolis .videom .imgs .pom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 3; background-color: rgba(0, 0, 0, 0.5); } .videosd .videolis .videom .imgs .pom .play { display: block; width: 0.63rem; height: 0.63rem; cursor: pointer; } .videosd .videolis .videom .imgs .pom .play img { width: 100%; display: block; } .videosd .videolis .videom .xim { width: 100%; background-color: #f9f9f9; text-align: center; color: #000; line-height: 2; padding: 0.1rem; } .videosd .videolis .videom:hover .imgs .img { transform: scale(1.1); } .videosd .videolis .videom:nth-child(3n) { margin-right: 0; } .pages { width: 100%; padding: 0.22rem 0 0.25rem; font-size: 0; text-align: center; } .pages .page { display: inline-block; vertical-align: middle; width: 2.8em; line-height: 2.8; text-align: center; color: #999; border-radius: 1.4em; background-color: #f9f9f9; margin: 0 0.05rem 0.1rem; } .pages .page.on { background-color: var(--themes); color: #fff; } .pages .page.auto { width: auto; padding: 0 0.24rem; } .pages .page:hover { background-color: var(--themes); color: #fff; } .modular { width: 100%; } .modular .mitop { width: 100%; margin-bottom: 0.5rem; } .modular .mitop .mit { width: 100%; text-align: center; color: #111; font-weight: bold; } .modular .misvop { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 0.55rem; } .modular .misvop .mit { display: inline-block; vertical-align: middle; color: #111; line-height: 1.5; } .modular .misvop .rad { width: auto; display: inline-block; vertical-align: middle; } .modular .misvop .rad .btn { display: inline-block; vertical-align: middle; width: 3em; height: 2.2em; border-radius: 1.1em; border: solid 2px rgba(0, 0, 0, 0.15); position: relative; cursor: pointer; } .modular .misvop .rad .btn img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 6px; height: 12px; display: block; } .modular .misvop .rad .btn img:first-child { display: block; } .modular .misvop .rad .btn img:last-child { display: none; } .modular .misvop .rad .btn:hover { background-color: var(--themes); border: solid 2px var(--themes); } .modular .misvop .rad .btn:hover img:first-child { display: none; } .modular .misvop .rad .btn:hover img:last-child { display: block; } .modular .misvop .rad .btn + .btn { margin-left: 0.1rem; } .modular .misvop .msl { display: inline-block; vertical-align: bottom; } .modular .misvop .msl .mit { width: 100%; } .modular .misvop .msl .mim { width: 100%; color: #666; line-height: 1.5; margin-top: 0.1rem; } .modular .misvop .msr { display: inline-block; vertical-align: bottom; } .modular .misvop.boc { align-items: flex-end; } .contacts { width: 100%; padding: 0.8rem 0; } .contacts .contlis { width: 100%; text-align: center; font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-around; justify-content: space-evenly; } .contacts .contlis .citem { display: inline-block; vertical-align: top; } .contacts .contlis .citem .ic { width: 0.85rem; height: 0.85rem; display: block; margin: 0 auto 0.15rem; border-radius: 50%; background-color: #f8f8f8; } .contacts .contlis .citem .ic img { width: 100%; display: block; } .contacts .contlis .citem .xm { width: 100%; color: #333; line-height: 1.5; } .contacts .contlis .citem .xim { width: 100%; color: #666; line-height: 1.5; margin-top: 0.05rem; } .contacts .mapsom { width: 100%; margin-top: 0.4rem; position: relative; } .contacts .mapsom .mapnav { position: absolute; left: 0.4rem; top: 0.3rem; z-index: 3; font-size: 0; } .contacts .mapsom .mapnav .mitm { display: inline-block; vertical-align: middle; color: #333; line-height: 2.5; padding: 0 0.25rem; cursor: pointer; background-color: #fff; } .contacts .mapsom .mapnav .mitm.on { background-color: var(--themes); color: #fff; } .contacts .mapsom .mapnav .mitm:first-child { border-radius: 1.25em 0 0 1.25em; } .contacts .mapsom .mapnav .mitm:last-child { border-radius: 0 1.25em 1.25em 0; } .contacts .mapsom .mitem { width: 100%; } .contacts .mapsom .mitem .mapem { width: 100%; display: none; } .contacts .mapsom .mitem .mapem.on { width: 100%; display: block; } .contacts .mapsom .mitem .img { width: 100%; display: block; } .contacts .mapsom .mitem .img img { width: 100%; display: block; } .contacts .mapsom .mitem .pcm{ width: 100%;display: block; } .contacts .mapsom .mitem .phm{ width: 100%;display: none; } @media (max-width: 800px){ .contacts .mapsom .mitem .pcm{ width: 100%;display: none; } .contacts .mapsom .mitem .phm{ width: 100%;display: block; } } .querys { width: 100%; padding: 1.2rem 0; position: relative; } .querys .qit { width: 100%; color: #111; font-weight: bold; line-height: 1.5; text-align: center; margin-bottom: 0.25rem; } .querys .mic { display: block; margin: 0 auto; width: 0.46rem; height: 0.46rem; border-radius: 50%; transition: all ease 0.5s; background-color: #044b91; } .querys .acm { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 3; } .querys:hover .mic { transform: rotate(45deg); } .downers { width: 100%; padding: 0.8rem 0; background-color: #f8f8f8; } .downers .downlis { width: 100%; font-size: 0; } .downers .downlis .dowam { display: inline-block; vertical-align: top; width: calc(550 / 1720 * 100%); margin-right: calc(34 / 1720 * 100%); margin-bottom: 0.35rem; background-color: #fff; } .downers .downlis .dowam a { width: 100%; display: block; padding: 0.2rem; } .downers .downlis .dowam .imgs { display: inline-block; vertical-align: middle; width: 2.1rem; position: relative; overflow: hidden; } .downers .downlis .dowam .imgs .img { width: 100%; padding-top: 135.71%; transition: all ease 0.5s; } .downers .downlis .dowam .rem { display: inline-block; vertical-align: middle; width: calc(100% - 2.1rem); padding-left: 0.3rem; } .downers .downlis .dowam .rem .at { width: 100%; color: #333; line-height: 2; } .downers .downlis .dowam .rem .xm { width: 100%; color: #999; line-height: 1.8; } .downers .downlis .dowam .rem .atn { width: 100%; font-size: 0; margin-top: 0.2rem; } .downers .downlis .dowam .rem .atn .pt { display: inline-block; vertical-align: middle; color: #999; line-height: 2.2; border: solid 1px #eee; border-radius: 1.1em; padding: 0 0.15rem; } .downers .downlis .dowam .rem .atn .pt span { display: inline-block; vertical-align: middle; width: 12px; position: relative; top: -0.02rem; margin-left: 0.1rem; } .downers .downlis .dowam .rem .atn .pt span img { width: 100%; display: block; } .downers .downlis .dowam:nth-child(3n) { margin-right: 0; } .downers .downlis .dowam:hover .imgs .img { transform: scale(1.1); } .downers .downlis .dowam:hover .rem .atn .pt { border: solid 1px var(--themes); background-color: var(--themes); color: #fff; } .downers .downlis .dowam:hover .rem .atn .pt span img { filter: grayscale(100%) brightness(400%); } .downers .more { width: 100%; font-size: 0; margin-top: 0.3rem; text-align: center; } .downers .more a { display: inline-block; vertical-align: middle; background-color: var(--themes); color: #fff; line-height: 3; border-radius: 1.5em; padding: 0 0.3rem; } .downers .more a span { display: inline-block; vertical-align: middle; width: 12px; margin-left: 0.2rem; position: relative; } .downers .more a span img { width: 100%; display: block; } .onlines { width: 100%; padding: 0.8rem 0; } .onlines .form { width: 100%; position: relative; display: block; margin: 0 auto; max-width: 6.3rem; } .onlines .form form { width: 100%; display: block; } .onlines .form .input { width: 100%; margin-bottom: 0.2rem; } .onlines .form .input input { width: 100%; display: block; background-color: #fff; padding: 0 0.2rem; color: #333; line-height: 3; height: 3em; border: solid 1px #e9e9e9; } .onlines .form .input textarea { width: 100%; display: block; background-color: #fff; padding: 0.1rem 0.2rem; color: #333; line-height: 1.5; border: solid 1px #e9e9e9; } .onlines .form .input.yzm { display: flex; } .onlines .form .input.yzm input { display: inline-block; vertical-align: middle; flex: 1; } .onlines .form .input.yzm .ymg { display: inline-block; vertical-align: middle; height: 3em; width: auto; } .onlines .form .input.yzm .ymg img { height: 100%; display: block; } .onlines .form .sub { width: 100%; } .onlines .form .sub input { width: 100%; display: block; background-color: var(--themes); color: #fff; text-align: center; line-height: 3; height: 3em; cursor: pointer; border: none; } .energys { width: 100%; padding: 0.8rem 0; } .energys .enitm { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; align-items: center; } .energys .enitm .eml { display: inline-block; vertical-align: middle; width: calc(1175 / 1920 * 100%); } .energys .enitm .eml a { width: 100%; display: block; } .energys .enitm .eml .imgs { width: 100%; position: relative; overflow: hidden; } .energys .enitm .eml .imgs .img { width: 100%; padding-top: 47.65%; transition: all ease 0.5s; } .energys .enitm .eml:hover .imgs .img { transform: scale(1.1); } .energys .enitm .emr { width: calc(745 / 1920 * 100%); display: inline-block; vertical-align: middle; padding: 0 calc(150 / 1920 * 100%); } .energys .enitm .emr .eit { width: 100%; color: #111; line-height: 1.5; margin-bottom: 0.2rem; } .energys .enitm .emr .inps { width: 100%; color: #666; line-height: 2; } .energys .enitm .emr .inps p { color: #666; line-height: 2; } .energys .enitm .emr .more { width: 100%; font-size: 0; margin-top: 0.4rem; } .energys .enitm .emr .more a { display: inline-block; vertical-align: middle; line-height: 3.1; border-radius: 1.55em; padding: 0 0.4rem; color: var(--themes); border: solid 2px #e9e9e9; } .energys .enitm .emr .more a span { display: inline-block; vertical-align: middle; width: 0.13rem; margin-right: 0.1rem; position: relative; z-index: 2; top: -0.02rem; } .energys .enitm .emr .more a span img { width: 100%; display: block; } .energys .enitm .emr .more a span img:first-child { display: block; } .energys .enitm .emr .more a span img:last-child { display: none; } .energys .enitm .emr .more a:hover { background-color: var(--themes); color: #fff; border: solid 2px var(--themes); } .energys .enitm .emr .more a:hover span img:first-child { display: none; } .energys .enitm .emr .more a:hover span img:last-child { display: block; } .energys .enitm + .enitm { margin-top: 0.8rem; } .energys .enitm:nth-child(2n) { flex-direction: row-reverse; } .Sercices { width: 100%; padding: 0.8rem 0; } .Sercices .serclis { width: 100%; font-size: 0; } .Sercices .serclis .searm { width: 100%; position: relative; display: flex; flex-wrap: wrap; padding: 0.5rem 0; } .Sercices .serclis .searm .sel { display: inline-block; vertical-align: middle; width: calc(960 / 1920 * 100%); position: absolute; right: 0; bottom: 0.9rem; z-index: 3; } .Sercices .serclis .searm .sel .imgs { width: 100%; position: relative; overflow: hidden; } .Sercices .serclis .searm .sel .imgs .img { width: 100%; padding-top: 46.875%; transition: all ease 0.5s; } .Sercices .serclis .searm .sel:hover .imgs .img { transform: scale(1.1); } .Sercices .serclis .searm .ser { display: inline-block; vertical-align: middle; width: calc(1060 / 1920 * 100%); background-color: #f8f8f8; display: flex; flex-wrap: wrap; align-content: center; min-height: 4.5rem; padding: 0 calc(200 / 1920 * 100%); } .Sercices .serclis .searm .ser .sit { width: 100%; color: #111; line-height: 1.5; margin-bottom: 0.4rem; } .Sercices .serclis .searm .ser .sinp { width: 100%; color: #666; line-height: 2; } .Sercices .serclis .searm .ser .sinp p { color: #666; line-height: 2; } .Sercices .serclis .searm:nth-child(2n) { justify-content: flex-end; } .Sercices .serclis .searm:nth-child(2n) .sel { right: auto; left: 0; } @media (max-width: 900px) { .Sercices .serclis .searm { padding: 0; } .Sercices .serclis .searm .sel { width: 100%; position: relative; right: auto !important; bottom: auto !important; left: auto !important; } .Sercices .serclis .searm .ser { width: 100%; padding: 0.3rem 3%; } .Sercices .serclis .searm + .searm { margin-top: 0.4rem; } } .cases { width: 100%; padding: 0.5rem 0; } .cases .caspers { width: 100%; } .cases .caspers .swiper-slide { width: 100%; position: relative; } .cases .caspers .swiper-slide a { width: 100%; display: block; } .cases .caspers .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; } .cases .caspers .swiper-slide .imgs .img { width: 100%; padding-top: 43.22%; } .cases .caspers .swiper-slide .bom { position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 100%; z-index: 3; bottom: 0; left: 0; right: 0; padding: 0.25rem 0.3rem; color: #fff; line-height: 1.5; text-align: center; } .relateds { width: 100%; padding: 0.5rem 0; } .relateds .relaper { width: 100%; } .relateds .relaper .swiper-slide { width: 100%; } .relateds .relaper .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; } .relateds .relaper .swiper-slide .imgs .img { width: 100%; padding-top: 100%; transition: all ease 0.5s; } .relateds .relaper .swiper-slide .vom { width: 100%; padding: 0.15rem 0.2rem; color: #000; line-height: 1.5; text-align: center; } .relateds .relaper .swiper-slide:hover .imgs .img { transform: scale(1.1); } .relateds .relaper .swiper-slide:hover .vom { color: var(--themes); } .customizeds { width: 100%; padding: 0.5rem 0; } .customizeds .custoper { width: 100%; } .customizeds .custoper .swiper-slide { width: 100%; } .customizeds .custoper .swiper-slide a { width: 100%; display: block; } .customizeds .custoper .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; } .customizeds .custoper .swiper-slide .imgs .img { width: 100%; padding-top: 62.90%; transition: all ease 0.5s; } .customizeds .custoper .swiper-slide .tom { width: 100%; background-color: #f8f8f8; padding: 0.2rem 0.3rem; } .customizeds .custoper .swiper-slide .tom .tit { width: 100%; color: #000; line-height: 1.6; } .customizeds .custoper .swiper-slide .tom .xim { width: 100%; margin-top: 0.08rem; color: #666; line-height: 2; height: 4em; } .customizeds .custoper .swiper-slide:hover .imgs .img { transform: scale(1.1); } .customizeds .custoper .swiper-slide:hover .tom .tit { color: var(--themes); } .advanges { width: 100%; padding: 0.8rem 0; } .advanges .advans { width: 100%; position: relative; } .advanges .advans .adimglis { width: 100%; } .advanges .advans .adimglis .adims { width: 100%; display: none; position: relative; } .advanges .advans .adimglis .adims.on { display: block; } .advanges .advans .adimglis .imgs { width: 100%; position: relative; overflow: hidden; } .advanges .advans .adimglis .imgs .img { width: 100%; padding-top: 37.79%; } .advanges .advans .adimglis .podx { position: absolute; left: calc(130 / 1720 * 100%); top: calc(50% - 0.5rem); transform: translateY(-50%); z-index: 3; width: 3.2rem; } .advanges .advans .adimglis .podx .pc { display: block; width: 1.14rem; height: 1.14rem; } .advanges .advans .adimglis .podx .pc img { width: 100%; display: block; } .advanges .advans .adimglis .podx .voh { width: 100%; margin-top: 0.15rem; } .advanges .advans .adimglis .podx .voh .vt { width: 100%; color: #fff; line-height: 1.5; } .advanges .advans .adimglis .podx .voh .xim { width: 100%; color: #fff; line-height: 2; margin-top: 0.1rem; } .advanges .advans .adnavs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: 100%; background-color: rgba(0, 0, 0, 0.5); } .advanges .advans .adnavs .swiper-slide { width: 100%; cursor: pointer; } .advanges .advans .adnavs .swiper-slide .xm { width: 100%; height: 1rem; display: flex; justify-content: center; align-items: center; color: #fff; line-height: 1.5; } .advanges .advans .adnavs .swiper-slide.on { background-color: var(--themes); } @media (max-width: 900px) { .advanges .advans .adimglis .imgs { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .advanges .advans .adimglis .imgs .img { padding-top: 0; width: 100%; height: 100%; display: block; } .advanges .advans .adimglis .podx { position: relative; z-index: 3; padding: 0.5rem 0.3rem; left: 0; transform: translateY(0); width: 100%; display: flex; flex-wrap: wrap; align-content: center; min-height: 5rem; } .advanges .advans .adnavs { position: relative; } } .procont { width: 100%; padding: 0.5rem 0; } .procont .prolist { width: 100%; font-size: 0; } .procont .prolist .proam { display: inline-block; vertical-align: top; width: calc(410 / 1720 * 100%); margin-right: calc(26 / 1720 * 100%); margin-bottom: 0.25rem; } .procont .prolist .proam a { width: 100%; display: block; } .procont .prolist .proam .imgs { width: 100%; position: relative; overflow: hidden; } .procont .prolist .proam .imgs .img { width: 100%; padding-top: 100%; transition: all ease 0.5s; } .procont .prolist .proam .vom { width: 100%; padding: 0.15rem 0.2rem; color: #000; line-height: 1.5; text-align: center; } .procont .prolist .proam:hover .imgs .img { transform: scale(1.1); } .procont .prolist .proam:hover .vom { color: var(--themes); } .procont .prolist .proam:nth-child(4n) { margin-right: 0; } .newsd { width: 100%; padding: 0.5rem 0; } .newsd .newlist { width: 100%; font-size: 0; } .newsd .newlist .neaom { display: inline-block; vertical-align: top; width: calc(550 / 1720 * 100%); margin-right: calc(34 / 1720 * 100%); margin-bottom: 0.35rem; position: relative; } .newsd .newlist .neaom a { width: 100%; display: block; } .newsd .newlist .neaom .imgs { width: 100%; position: relative; overflow: hidden; padding-bottom: 7em; } .newsd .newlist .neaom .imgs .img { width: 100%; padding-top: 62.90%; transition: all ease 0.5s; } .newsd .newlist .neaom .tom { width: 100%; background-color: #f8f8f8; padding: 0.2rem 0.3rem; transition: all ease 0.5s; height: 7em; position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; } .newsd .newlist .neaom .tom .tit { width: 100%; color: #999; line-height: 1.6; } .newsd .newlist .neaom .tom .xim { width: 100%; margin-top: 0.08rem; color: #000; line-height: 1.6; height: 3.2em; font-weight: bold; } .newsd .newlist .neaom .tom .more { width: 100%; font-size: 0; overflow: hidden; height: 0; transition: all ease 0.5s; } .newsd .newlist .neaom .tom .more .dtn { display: inline-block; vertical-align: middle; color: #000; line-height: 1.5; } .newsd .newlist .neaom .tom .more .dtn span { display: inline-block; vertical-align: middle; width: 0.34rem; height: 0.34rem; border-radius: 50%; background-color: var(--themes); margin-right: 0.15rem; } .newsd .newlist .neaom .tom .more .dtn span img { width: 100%; display: block; } .newsd .newlist .neaom:nth-child(3n) { margin-right: 0; } .newsd .newlist .neaom:hover .imgs .img { transform: scale(1.1); } .newsd .newlist .neaom:hover .tom { height: 100%; } .newsd .newlist .neaom:hover .tom .xim { color: var(--themes); } .newsd .newlist .neaom:hover .tom .more { height: 0.34rem; margin-top: 0.6rem; } .navigations { width: 100%; background-color: #fff; border-top: solid 1px rgba(0, 0, 0, 0.08); border-bottom: solid 1px rgba(0, 0, 0, 0.08); } .navigations .navis { width: 100%; font-size: 0; display: inline-block; vertical-align: middle; width: auto; } .navigations .navis .home { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 0.12rem; } .navigations .navis .home img { width: 100%; display: block; } .navigations .navis .txt { display: inline-block; vertical-align: middle; color: #666; line-height: 1.5; } .navigations .navis a { display: inline-block; vertical-align: middle; width: auto; color: #666; line-height: 4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .navigations .navis a span { display: inline-block; color: #999; margin: 0 0.09rem 0 0.09rem; line-height: 4; position: relative; top: -0.01rem; } .navigations .navis a span img { width: 100%; display: block; } .navigations .navis a:hover { color: var(--themes); } .navigations .navis a:last-child span { display: none; } .reads { width: 100%; padding: 0.8rem 0; } .reads .ritop { width: 100%; text-align: center; margin-bottom: 0.4rem; } .reads .ritop .rit { width: 100%; color: #000; line-height: 1.5; } .reads .readper { width: 100%; } .reads .readper .swiper-slide { width: 100%; } .reads .readper .swiper-slide a { width: 100%; display: block; } .reads .readper .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; } .reads .readper .swiper-slide .imgs .img { width: 100%; padding-top: 62.72%; transition: all ease 0.5s; } .reads .readper .swiper-slide .vom { width: 100%; background-color: #f9f9f9; padding: 0.25rem; } .reads .readper .swiper-slide .vom .vt { width: 100%; color: #000; line-height: 1.6; } .reads .readper .swiper-slide .vom .vt.jc { color: #999; } .reads .readper .swiper-slide .vom .vm { width: 100%; color: #666; line-height: 1.5; height: 3em; margin-top: 0.1rem; } .reads .readper .swiper-slide .vom .vm.jc { color: #000; font-weight: bold; } .reads .readper .swiper-slide:hover .imgs .img { transform: scale(1.1); } .reads .readper .swiper-slide:hover .vom .vt { color: var(--themes); } .reads .readper .swiper-slide:hover .vom .vt.jc { color: #999; } .reads .readper .swiper-slide:hover .vom .vm.jc { color: var(--themes); } .details { width: 100%; background-color: #f8f8f8; padding: 0.6rem 0; } .details .detail { width: 100%; font-size: 0; display: flex; justify-content: space-between; flex-wrap: wrap; } .details .detail .del { display: inline-block; vertical-align: top; width: calc(1100 / 1400 * 100%); background-color: #fff; padding: 0.3rem 0.3rem 0; } .details .detail .del .dit { width: 100%; text-align: center; color: #000; line-height: 1.6; } .details .detail .del .dim { width: 100%; text-align: center; font-size: 0; margin: 0.1rem 0 0.25rem; } .details .detail .del .dim .dm { display: inline-block; vertical-align: middle; color: #999; line-height: 1.5; margin: 0 0.1rem; } .details .detail .del .dim .share { display: inline-block; vertical-align: middle; width: auto; } .details .detail .del .dim .share .am { display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin: 0 0.04rem; } .details .detail .del .dim .share .am a, .details .detail .del .dim .share .am img { width: 100%; display: block; } .details .detail .del .dinps { width: 100%; padding: 0.25rem 0; color: #666; line-height: 1.6; border-top: solid 1px rgba(0, 0, 0, 0.08); border-bottom: solid 1px rgba(0, 0, 0, 0.08); } .details .detail .del .dinps p { color: #666; line-height: 1.6; } .details .detail .del .dot { width: 100%; font-size: 0; } .details .detail .del .dot .dam { display: inline-block; vertical-align: middle; width: 50%; padding: 0.3rem 0 0.4rem; } .details .detail .del .dot .dam a { width: 100%; display: block; color: #999; line-height: 1.6; } .details .detail .del .dot .dam a span { color: #333; } .details .detail .del .dot .dam a:hover { color: var(--themes); } .details .detail .del .dot .dam a:hover span { color: #333; } .details .detail .del .dot .dam:first-child { text-align: left; } .details .detail .del .dot .dam:last-child { text-align: right; } .details .detail .der { display: inline-block; vertical-align: top; width: calc(260 / 1400 * 100%); } .details .detail .der .detop { width: 100%; font-size: 0; display: flex; justify-content: space-between; margin-bottom: 0.2rem; } .details .detail .der .detop .dts { display: inline-block; color: #000; font-weight: bold; } .details .detail .der .detop a { display: inline-block; color: #999; } .details .detail .der .dtram { position: relative; width: 100%; } .details .detail .der .dtram a { width: 100%; display: block; } .details .detail .der .dtram .imgs { width: 100%; position: relative; overflow: hidden; } .details .detail .der .dtram .imgs .img { width: 100%; padding-top: 64%; transition: all ease 0.5s; } .details .detail .der .dtram .time { width: 100%; color: #999; line-height: 1.5; margin-top: 0.05rem; } .details .detail .der .dtram .vid { width: 100%; color: #000; line-height: 1.5; margin-top: 0.05rem; } .details .detail .der .deruls { width: 100%; margin-top: 0.2rem; border-top: solid 1px rgba(0, 0, 0, 0.08); padding-top: 0.2rem; } .details .detail .der .deruls .am { width: 100%; } .details .detail .der .deruls .am a { width: 100%; display: block; color: #666; line-height: 2; } .details .detail .der .deruls .am a:hover { color: var(--themes); } .details .detail .der.fixed { width: 2.6rem; position: fixed; right: 50%; margin-right: -7rem; top: 0.9rem; } .details .detail .der.bot { position: absolute; right: 0; bottom: 0; margin-right: 0; top: auto; width: 2.6rem; } @media (max-width: 1420px) { .details .detail .der.fixed { width: 2.6rem; margin-right: -45%; } .details .detail .der.bot { position: absolute; right: 0; bottom: 0; margin-right: 0; top: auto; width: 2.6rem; } } @media (max-width: 800px) { .details .detail .del { width: 100%; margin-bottom: 0.25rem; } .details .detail .der { width: 100%; } } .systems { width: 100%; padding: 0.8rem 0; } .systems .syspers { width: 100%; } .systems .syspers .swiper-slide { width: calc(316 / 1720 * 100%); margin-right: calc(34 / 1720 * 100%); display: inline-block; vertical-align: middle; transition: all ease 0.5s; cursor: pointer; } .systems .syspers .swiper-slide a { width: 100%; display: block; } .systems .syspers .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; } .systems .syspers .swiper-slide .imgs .img { width: 100%; height: 4.2rem; } .systems .syspers .swiper-slide .imgs .img img { width: 100%; display: block; } .systems .syspers .swiper-slide .swm { width: 100%; padding: 0.2rem 0; display: flex; align-items: center; border-bottom: solid 1px #f8f8f8; } .systems .syspers .swiper-slide .swm .same { display: inline-block; vertical-align: middle; flex: 1; color: #111; line-height: 1.5; } .systems .syspers .swiper-slide .swm .rtm { display: inline-block; vertical-align: middle; width: auto; } .systems .syspers .swiper-slide .swm .rtm span { display: inline-block; vertical-align: middle; color: #ccc; position: relative; top: -0.02rem; } .systems .syspers .swiper-slide .swm .rtm span:first-child { display: block; } .systems .syspers .swiper-slide .swm .rtm span:last-child { display: none; } .systems .syspers .swiper-slide.on { width: calc(667 / 1720 * 100%); } .systems .syspers .swiper-slide.on .swm .rtm span:first-child { display: none; } .systems .syspers .swiper-slide.on .swm .rtm span:last-child { display: block; } .advcase { width: 100%; padding: 0.8rem 0; background-image: linear-gradient(180deg, #f9f9f9 0%, #ffffff 100%); } .advcase .advcasper { width: 100%; } .advcase .advcasper .swiper-slide { width: 100%; position: relative; cursor: pointer; } .advcase .advcasper .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; } .advcase .advcasper .swiper-slide .imgs .img { width: 100%; padding-top: 121.78%; transition: all ease 0.5s; } .advcase .advcasper .swiper-slide .boms { position: absolute; z-index: 2; bottom: 0; left: 0; width: calc(100% - 0.2rem); border-radius: 0 0.2rem 0 0; background-color: rgba(255, 255, 255, 0.9); padding: 0.25rem; transition: all ease 0.5s; opacity: 1; } .advcase .advcasper .swiper-slide .boms .bt { width: 100%; color: #111; line-height: 1.5; } .advcase .advcasper .swiper-slide .boms .pm { width: 100%; color: #666; line-height: 1.5; height: 3em; margin-top: 0.06rem; } .advcase .advcasper .swiper-slide .xomd { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; z-index: 5; transition: all ease 0.5s; background-color: rgba(4, 75, 145, 0.9); opacity: 0; padding: 0.3rem; } .advcase .advcasper .swiper-slide .xomd .xum { width: 100%; color: #fff; font-weight: bold; text-align: center; line-height: 1; position: relative; z-index: 3; } .advcase .advcasper .swiper-slide .xomd .xum:after { content: ' '; position: absolute; left: 50%; top: 50%; width: 1.68rem; height: 1.73rem; transform: translate(-50%, -50%); background-image: url("../images/logc.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .advcase .advcasper .swiper-slide .xomd .xt { width: 100%; text-align: center; color: #fff; line-height: 1.5; position: relative; z-index: 4; } .advcase .advcasper .swiper-slide .xomd .xim { width: 100%; color: #fff; line-height: 1.5; text-align: center; margin-top: 0.3rem; position: relative; z-index: 4; } .advcase .advcasper .swiper-slide .xomd .xim p { color: #fff; line-height: 1.5; } .advcase .advcasper .swiper-slide:hover .imgs .img { transform: scale(1.1); } .advcase .advcasper .swiper-slide:hover .boms { opacity: 0; } .advcase .advcasper .swiper-slide:hover .xomd { opacity: 1; } .videosm { width: 100%; position: relative; } .videosm .video { width: 100%; display: block; } .videosm .video .vid { width: 100%; display: block; } .videosm .video .vics { width: 100%; display: block; } .videosm .height { width: 100%; height: 8.2rem; } .matings { width: 100%; padding: 0.5rem 0; } .matings .vrshow { width: 100%; position: relative; padding: 0.5rem 0; } .matings .vrshow a { width: 100%; display: block; } .matings .vrshow .imgs { width: 100%; position: relative; } .matings .vrshow .imgs .img { width: 100%; height: 4rem; } .matings .vrshow .nox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; } .matings .vrshow .nox .nit { width: 100%; color: #fff; line-height: 1.5; text-align: center; } .matings .vrshow .nox .xm { width: 1rem; height: 1rem; display: block; border-radius: 50%; background-color: var(--themes); margin: 0.25rem auto 0; } .matings .vrshow .nox .xm img { width: 100%; display: block; } .historys { width: 100%; padding: 0.8rem 0; } .historys .hitop { width: 100%; text-align: center; margin-bottom: 0.5rem; } .historys .hitop .hit { width: 100%; color: #000; line-height: 1.5; } .historys .histolis { width: 100%; position: relative; padding: 0.4rem 0; } .historys .histolis .lix { position: absolute; z-index: 1; top: 0; width: 0.18rem; background-image: url("../images/line.png"); background-size: 100% auto; height: 100%; left: 50%; transform: translateX(-50%); } .historys .histolis .hitem { width: 100%; position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: row-reverse; cursor: pointer; } .historys .histolis .hitem .remp { display: inline-block; vertical-align: middle; width: calc(820 / 1720 * 100%); background-color: #f8f8f8; padding: 0.3rem; font-size: 0; position: relative; } .historys .histolis .hitem .remp:after { content: ' '; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; width: 0; height: 0; border: solid 0.1rem; border-color: transparent transparent transparent #f8f8f8; } .historys .histolis .hitem .remp .emd { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .historys .histolis .hitem .remp .imgs { display: inline-block; width: calc(267 / 780 * 100%); position: relative; overflow: hidden; } .historys .histolis .hitem .remp .imgs .img { width: 100%; padding-top: 74.90%; transition: all ease 0.5s; } .historys .histolis .hitem .remp .imgs:hover .img { transform: scale(1.1); } .historys .histolis .hitem .remp .pem { display: inline-block; vertical-align: middle; width: calc(473 / 780 * 100%); color: #666; line-height: 1.8; } .historys .histolis .hitem .remp .pem p { color: #666; line-height: 1.8; } .historys .histolis .hitem .year { display: inline-block; vertical-align: middle; width: calc(830 / 1720 * 100%); } .historys .histolis .hitem .year .yom { width: 100%; font-size: 0; display: flex; align-items: center; } .historys .histolis .hitem .year .yom .yx { display: inline-block; vertical-align: middle; width: 0.5rem; height: 2px; margin-right: 0.18rem; background-color: #e1e1e1; } .historys .histolis .hitem .year .yom .um { display: inline-block; vertical-align: middle; color: var(--themes); font-weight: bold; line-height: 1.5; } .historys .histolis .hitem .piece { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0.24rem; height: 0.33rem; transform: translate(-50%, -50%); } .historys .histolis .hitem .piece img { width: 100%; display: block; } .historys .histolis .hitem .piece img:first-child { display: block; } .historys .histolis .hitem .piece img:last-child { display: none; } .historys .histolis .hitem:nth-child(2n) { flex-direction: row; } .historys .histolis .hitem:nth-child(2n) .remp .emd { flex-direction: row-reverse; } .historys .histolis .hitem:nth-child(2n) .year .yom { flex-direction: row-reverse; } .historys .histolis .hitem:nth-child(2n) .year .yom .yx { margin-right: 0; margin-left: 0.18rem; } .historys .histolis .hitem:hover .piece img:first-child { display: none; } .historys .histolis .hitem:hover .piece img:last-child { display: block; } .historys .histolis .hitem + .hitem { margin-top: 0.4rem; } .historys .more { width: 100%; font-size: 0; text-align: center; } .historys .more a { display: inline-block; vertical-align: middle; background-color: var(--themes); color: #fff; line-height: 3; border-radius: 1.5em; padding: 0 0.26rem; } .historys .more a span { display: inline-block; vertical-align: middle; width: 12px; margin-left: 0.25rem; } .historys .more a span img { width: 100%; display: block; } @media (max-width: 800px) { .historys .histolis .lix { left: 0.3rem; transform: translateX(0%); width: 14px; } .historys .histolis .hitem { flex-direction: row !important; } .historys .histolis .hitem .year { width: calc(100% - 0.8rem); margin-bottom: 0.3rem; margin-left: 0.8rem; } .historys .histolis .hitem .year .yom { flex-direction: row !important; } .historys .histolis .hitem .year .yom .yx { margin-right: 0.18rem !important; margin-left: 0 !important; } .historys .histolis .hitem .remp { width: calc(100% - 0.8rem); margin-left: 0.8rem; } .historys .histolis .hitem .remp .emd { flex-direction: row !important; } .historys .histolis .hitem .remp .imgs { display: block; width: 3rem; margin-bottom: 0.2rem; } .historys .histolis .hitem .remp .pem { width: 100%; } .historys .histolis .hitem .piece { width: 18px; top: 0; left: 0.25rem; transform: translate(0, 0); } } .petails { width: 100%; padding: 0.8rem 0; } .petails .petail { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .petails .petail .pel { display: inline-block; vertical-align: middle; width: calc(700 / 1720 * 100%); position: relative; } .petails .petail .pel .btn { width: 16px; display: inline-block; vertical-align: middle; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); } .petails .petail .pel .btn img { width: 100%; display: block; } .petails .petail .pel .btn img:first-child { display: block; } .petails .petail .pel .btn img:last-child { display: none; } .petails .petail .pel .btn:hover img:first-child { display: none; } .petails .petail .pel .btn:hover img:last-child { display: block; } .petails .petail .pel .bl { left: 0; } .petails .petail .pel .br { right: 0; } .petails .petail .pel .swiper-container { width: calc(100% - 0.8rem); display: block; margin: 0 auto; } .petails .petail .pel .swiper-slide { width: 100%; } .petails .petail .pel .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; border-radius: 50%; } .petails .petail .pel .swiper-slide .imgs .img { width: 100%; padding-top: 100%; } .petails .petail .per { display: inline-block; vertical-align: middle; width: calc(900 / 1720 * 100%); } .petails .petail .per .pit { width: 100%; color: #000; line-height: 1.5; } .petails .petail .per .pinps { width: 100%; color: #666; line-height: 1.6; margin-top: 0.25rem; } .petails .petail .per .pinps p { color: #666; line-height: 1.6; } .petails .petail .per .pobs { width: 100%; font-size: 0; margin-top: 0.6rem; } .petails .petail .per .pobs .pb { width: 100%; color: #000; line-height: 1.5; } .petails .petail .per .pobs .pobimg { width: 100%; margin-top: 0.15rem; font-size: 0; } .petails .petail .per .pobs .pobimg .pm { width: auto; display: inline-block; vertical-align: middle; height: 0.46rem; margin-right: 0.1rem; margin-bottom: 0.1rem; } .petails .petail .per .pobs .pobimg .pm img { height: 100%; display: block; } .petonsm { width: 100%; } .petonsm .petoom { width: 100%; } .brief { width: 100%; padding: 0.5rem 0; } .brief .briem { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .brief .briem .bel { display: inline-block; vertical-align: middle; width: calc(700 / 1400 * 100%); } .brief .briem .bel .imgs { width: 100%; position: relative; overflow: hidden; } .brief .briem .bel .imgs .img { width: 100%; padding-top: 71.42%; } .brief .briem .ber { display: inline-block; vertical-align: middle; width: calc(700 / 1400 * 100%); padding: 0.1rem 1.1rem; } .brief .briem .ber .vit { width: 100%; color: #000; line-height: 1.5; } .brief .briem .ber .vim { width: 100%; color: #333; line-height: 1.5; margin-top: 0.1rem; } .brief .briem .ber .pic { width: 100%; color: #666; line-height: 1.7; margin-top: 0.2rem; } .brief .briem .ber .pic p { color: #666; line-height: 1.7; } .brief .briem + .briem { margin-top: 0.5rem; } .brief .briem:nth-child(2n) { flex-direction: row-reverse; } .performance { width: 100%; padding: 0.8rem 0; } .performance .perform { width: 100%; } .performance .perform .tr { width: 100%; display: flex; border-bottom: solid 1px rgba(0, 0, 0, 0.08); } .performance .perform .tr:first-child { border-top: solid 1px rgba(0, 0, 0, 0.08); } .performance .perform .td { display: inline-block; vertical-align: middle; } .performance .perform .name { width: calc(340 / 1400 * 100%); } .performance .perform .name .tdm { color: #000; font-weight: bold; } .performance .perform .cont { width: calc(1060 / 1400 * 100%); } .performance .perform .tdm { width: 100%; height: 100%; display: flex; flex-wrap: wrap; padding: 0.2rem 0.3rem; color: #666; line-height: 1.5; } .package { width: 100%; padding: 0.8rem 0; } .package .packlis { font-size: 16px; width: 100%; } .package .packlis table{ width: 100%; } .package .packlis tr,td{ color: #333; line-height: 1.5; font-size: 16px; } .package .packlis td{ color: #333; font-size: 16px; padding: 0.1rem; } .package .packlis .tr { width: 100%; display: flex; border-bottom: solid 1px rgba(0, 0, 0, 0.08); } .package .packlis .tr:first-child { border-top: solid 1px rgba(0, 0, 0, 0.08); } .package .packlis .tr:first-child .tdm { color: #000; font-weight: bold; } .package .packlis .td { display: inline-block; vertical-align: middle; } .package .packlis .name { width: 24%; } .package .packlis .name .tdm { color: #666; } .package .packlis .cont { width: 19%; } .package .packlis .tdm { width: 100%; height: 100%; display: flex; flex-wrap: wrap; padding: 0.2rem 0.3rem; color: #666; line-height: 1.5; } .ranges { width: 100%; position: relative; } .ranges .height { width: 100%; position: relative; overflow: hidden; } .ranges .height .hmg { width: 100%; height: 9.2rem; } .ranges .ritop { position: absolute; max-width: 90%; text-align: center; z-index: 3; left: 50%; transform: translateX(-50%); top: 0.7rem; } .ranges .ritop .rit { width: 100%; text-align: center; color: #fff; line-height: 1.5; } .ranges .peimgs { width: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .ranges .peimgs .pmg { position: absolute; left: 0; top: 0; width: 0%; height: 100%; opacity: 0; transition: all ease 0.5s; z-index: 1; } .ranges .peimgs .pmg .imgs { width: 100%; height: 100%; display: block; } .ranges .peimgs .pmg .imgs .img { width: 100%; height: 100%; display: block; } .ranges .peimgs .pmg.on { width: 100%; opacity: 1; } .ranges .tenom { width: 100%; position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); max-width: 94%; bottom: 0.6rem; text-align: center; font-size: 0; } .ranges .tenom .item { display: inline-block; vertical-align: middle; width: 2rem; cursor: pointer; } .ranges .tenom .item .icm { width: 0.91rem; height: 0.91rem; display: block; margin: 0 auto 0.1rem; position: relative; } .ranges .tenom .item .icm .ic { width: 100%; height: 100%; display: block; position: relative; z-index: 3; } .ranges .tenom .item .icm .ic img { width: 100%; display: block; } .ranges .tenom .item .icm .ic .vt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: #fff; line-height: 1.5; } .ranges .tenom .item .icm .em { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0.3; transition: all ease 0.5s; } .ranges .tenom .item .icm .em img { width: 100%; display: block; } .ranges .tenom .item .xm { width: 100%; text-align: center; color: #fff; line-height: 1.6; } .ranges .tenom .item.on .icm .em, .ranges .tenom .item:hover .icm .em { opacity: 1; } @media (max-width: 800px) { .ranges .tenom .item { width: 25%; } } .energyd { width: 100%; overflow: hidden; position: relative; } .energyd .height { width: 100%; position: relative; overflow: hidden; } .energyd .height .hmg { width: 100%; height: 100vh; } .energyd .ritop { position: absolute; max-width: 90%; text-align: center; z-index: 3; left: 50%; transform: translateX(-50%); top: 20%; width: 90%; } .energyd .ritop .ritm { width: 100%; position: absolute; z-index: -1; top: 0; opacity: 0; transition: all ease 0.5s; } .energyd .ritop .ritm.on { position: absolute; top: 0; opacity: 1; z-index: 3; } .energyd .ritop .rit { width: 100%; text-align: center; color: #fff; line-height: 1.3; } .energyd .ritop .rit p { color: #fff; line-height: 1.3; } .energyd .ritop .more { width: 100%; font-size: 0; text-align: center; margin-top: 0.6rem; } .energyd .ritop .more a { display: inline-block; vertical-align: middle; border: solid 2px #fff; padding: 0 0.45rem; color: #fff; line-height: 3; border-radius: 1.5em; transition: all ease 0.5s; } .energyd .ritop .more a span { display: inline-block; vertical-align: middle; width: 13px; margin-right: 0.16rem; } .energyd .ritop .more a span img { width: 100%; display: block; } .energyd .ritop .more a:hover { background-color: var(--themes); border: solid 2px var(--themes); } .energyd .peimgs { width: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .energyd .peimgs .pmg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: all ease 0.5s; z-index: 1; } .energyd .peimgs .pmg .imgs { width: 100%; height: 100%; display: block; } .energyd .peimgs .pmg .imgs .img { width: 100%; height: 100%; display: block; } .energyd .peimgs .pmg.on { opacity: 1; } .energyd .tenom { width: 100%; position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); max-width: 94%; bottom: 0.6rem; text-align: center; font-size: 0; } .energyd .tenom .item { display: inline-block; vertical-align: middle; width: 2rem; cursor: pointer; } .energyd .tenom .item .icm { width: 0.91rem; height: 0.91rem; display: block; margin: 0 auto 0.1rem; position: relative; } .energyd .tenom .item .icm .ic { width: 100%; height: 100%; display: block; position: relative; z-index: 3; } .energyd .tenom .item .icm .ic img { width: 100%; display: block; } .energyd .tenom .item .icm .em { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0.3; transition: all ease 0.5s; } .energyd .tenom .item .icm .em img { width: 100%; display: block; } .energyd .tenom .item .xm { width: 100%; text-align: center; color: #fff; line-height: 1.6; } .energyd .tenom .item.on .icm .em, .energyd .tenom .item:hover .icm .em { opacity: 1; } @media (max-width: 800px) { .energyd .height .hmg { height: 65vh; } .energyd .tenom .item { width: 25%; } } .attention { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; align-items: center; position: relative; } .attention .w1720 { position: relative; z-index: 2; } .attention .bgaa { width: calc(1675 / 1920 * 100%); left: 50%; position: absolute; transform: translateX(-50%); bottom: 0; } .attention .bgaa .img { width: 100%; padding-top: 51.10%; } .attention .atten { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .attention .atten .atl { display: inline-block; vertical-align: middle; width: calc(1024 / 1720 * 100%); position: relative; } .attention .atten .atl .imgs { width: 100%; position: relative; overflow: hidden; } .attention .atten .atl .imgs .img { width: 100%; padding-top: 62.5%; } .attention .atten .atl .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 0.65rem; height: 0.65rem; transition: all ease 0.5s; cursor: pointer; } .attention .atten .atl .play img { width: 100%; display: block; } .attention .atten .atl .play:hover { transform: translate(-50%, -50%) scale(1.1); } .attention .atten .atr { width: calc(600 / 1720 * 100%); display: inline-block; vertical-align: middle; } .attention .atten .atr .ait { width: 100%; color: #111; font-weight: bold; line-height: 1.3; } .attention .atten .atr .ait p { color: #111; line-height: 1.3; } .attention .atten .atr .blue { color: var(--themes); } .attention .atten .atr .more { width: 100%; font-size: 0; margin-top: 0.6rem; } .attention .atten .atr .more a { display: inline-block; vertical-align: middle; border: solid 2px rgba(0, 0, 0, 0.08); padding: 0 0.45rem; color: var(--themes); line-height: 3; border-radius: 1.5em; transition: all ease 0.5s; } .attention .atten .atr .more a span { display: inline-block; vertical-align: middle; width: 13px; margin-right: 0.16rem; } .attention .atten .atr .more a span img { width: 100%; display: block; } .attention .atten .atr .more a span img:first-child { display: block; } .attention .atten .atr .more a span img:last-child { display: none; } .attention .atten .atr .more a:hover { background-color: var(--themes); border: solid 2px var(--themes); color: #fff; } .attention .atten .atr .more a:hover span img:first-child { display: none; } .attention .atten .atr .more a:hover span img:last-child { display: block; } @media (max-width: 800px) { .attention { padding: 1rem 0; height: auto; } .attention .atten { flex-direction: column-reverse; } .attention .atten .atl { width: 100%; margin-top: 0.4rem; } .attention .atten .atr { width: 100%; } } .Dynamic { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; align-items: center; position: relative; } .Dynamic .bgaa { width: calc(1675 / 1920 * 100%); left: 50%; position: absolute; transform: translateX(-50%); top: 0; } .Dynamic .bgaa .img { width: 100%; padding-top: 51.10%; } .Dynamic .w1720 { position: relative; z-index: 2; } .Dynamic .dyom { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .Dynamic .dyom .dyl { width: calc(600 / 1720 * 100%); display: inline-block; vertical-align: middle; display: flex; flex-wrap: wrap; align-content: space-between; min-height: 5.7rem; } .Dynamic .dyom .dyl .dyop { width: 100%; } .Dynamic .dyom .dyl .dyop .pit { width: 100%; color: #111; font-weight: bold; line-height: 1.3; } .Dynamic .dyom .dyl .dyop .btns { width: 100%; font-size: 0; margin-top: 0.5rem; } .Dynamic .dyom .dyl .dyop .btns .btn { display: inline-block; vertical-align: middle; width: 4em; height: 2.2em; border-radius: 1.1em; border: solid 2px rgba(0, 0, 0, 0.15); position: relative; cursor: pointer; } .Dynamic .dyom .dyl .dyop .btns .btn img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 6px; height: 12px; display: block; } .Dynamic .dyom .dyl .dyop .btns .btn img:first-child { display: block; } .Dynamic .dyom .dyl .dyop .btns .btn img:last-child { display: none; } .Dynamic .dyom .dyl .dyop .btns .btn:hover { background-color: var(--themes); border: solid 2px var(--themes); } .Dynamic .dyom .dyl .dyop .btns .btn:hover img:first-child { display: none; } .Dynamic .dyom .dyl .dyop .btns .btn:hover img:last-child { display: block; } .Dynamic .dyom .dyl .dyop .btns .btn + .btn { margin-left: 0.1rem; } .Dynamic .dyom .dyl .dyob { width: 100%; } .Dynamic .dyom .dyl .dyob .linx { width: 1.2rem; display: block; height: 2px; background-color: rgba(0, 0, 0, 0.15); position: relative; } .Dynamic .dyom .dyl .dyob .linx span { display: inline-block; vertical-align: middle; width: 0.3rem; height: 2px; position: absolute; left: 0; top: 0; z-index: 2; background-color: var(--themes); } .Dynamic .dyom .dyr { width: calc(980 / 1720 * 100%); display: inline-block; vertical-align: middle; } .Dynamic .dyom .dyr .dyrpers { width: 100%; max-width: 6rem; } .Dynamic .dyom .dyr .dyrpers .swiper-slide { width: 100%; } .Dynamic .dyom .dyr .dyrpers .swiper-slide a { width: 100%; display: block; } .Dynamic .dyom .dyr .dyrpers .swiper-slide .lab { width: 100%; font-size: 0; } .Dynamic .dyom .dyr .dyrpers .swiper-slide .lab span { display: inline-block; vertical-align: middle; background-color: var(--themes); color: #fff; line-height: 3; border-radius: 1.5em; padding: 0 0.4rem; } .Dynamic .dyom .dyr .dyrpers .swiper-slide .sit { width: 100%; color: #111; font-weight: bold; line-height: 1.5; margin-top: 0.2rem; } .Dynamic .dyom .dyr .dyrpers .swiper-slide .sit p { color: #111; line-height: 1.5; } .Dynamic .dyom .dyr .dyrpers .swiper-slide .sim { width: 100%; color: #666; line-height: 1.5; margin-top: 0.2rem; } .Dynamic .dyom .dyr .dyrpers .swiper-slide .sim p { color: #666; line-height: 1.5; } .Dynamic .dyom .dyr .dyrpers .swiper-slide .time { width: 100%; color: #666; line-height: 1.5; margin-top: 0.3rem; } .Dynamic .dyom .dyr .dyrpers .swiper-slide .time p { color: #666; line-height: 1.5; } @media (max-width: 800px) { .Dynamic { height: auto; padding: 1rem 0; } .Dynamic .dyom .dyl { width: 100%; min-height: 0; } .Dynamic .dyom .dyl .dyob { display: none; } .Dynamic .dyom .dyr { width: 100%; margin-top: 0.4rem; } .Dynamic .dyom .dyr .dyrpers { width: 100%; max-width: 100%; } } .brands { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; position: relative; align-items: center; background-color: #fff; overflow: hidden; } .brands .brl { display: inline-block; vertical-align: middle; margin-left: calc(100 / 1920 * 100%); width: 7.6rem; width: calc(760 / 1920 * 100%); display: flex; flex-wrap: wrap; min-height: 6rem; align-content: space-between; } .brands .brl .brop { width: 100%; } .brands .brl .brop .ait { width: 100%; color: #111; font-weight: bold; line-height: 1.3; } .brands .brl .brop .ait p { color: #111; line-height: 1.3; } .brands .brl .brop .ait .blue { color: var(--themes); } .brands .brl .brop .more { width: 100%; font-size: 0; margin-top: 0.6rem; } .brands .brl .brop .more a { display: inline-block; vertical-align: middle; border: solid 2px rgba(0, 0, 0, 0.08); padding: 0 0.45rem; color: var(--themes); line-height: 3; border-radius: 1.5em; transition: all ease 0.5s; } .brands .brl .brop .more a span { display: inline-block; vertical-align: middle; width: 13px; margin-right: 0.16rem; } .brands .brl .brop .more a span img { width: 100%; display: block; } .brands .brl .brop .more a span img:first-child { display: block; } .brands .brl .brop .more a span img:last-child { display: none; } .brands .brl .brop .more a:hover { background-color: var(--themes); border: solid 2px var(--themes); color: #fff; } .brands .brl .brop .more a:hover span img:first-child { display: none; } .brands .brl .brop .more a:hover span img:last-child { display: block; } .brands .brl .brob { width: 100%; font-size: 0; margin-top: 0.4rem; } .brands .brl .brob .bromlis { width: 100%; font-size: 0; } .brands .brl .brob .bromlis .bmgs { display: inline-block; vertical-align: top; width: 23.5%; max-width: 1.8rem; position: relative; overflow: hidden; margin-right: 2%; margin-bottom: 0.1rem; } .brands .brl .brob .bromlis .bmgs .img { width: 100%; padding-top: 50%; transition: all ease 0.5s; } .brands .brl .brob .bromlis .bmgs:hover .img { transform: scale(1.1); } .brands .brl .brob .bromlis .bmgs:nth-child(4) { margin-right: 2%; } .brands .brl .brob .bromlis .bmgs:nth-child(7) { margin-right: 0; } .brands .brr { width: calc(1034 / 1920 * 100%); display: inline-block; vertical-align: middle; position: absolute; z-index: 2; right: 0; top: calc(50% + 0.45rem); transform: translateY(-50%); } .brands .brr .pic { width: calc(711 / 1034 * 100%); position: absolute; z-index: -1; right: calc(120 / 1013 * 100%); top: 50%; transform: translateY(-50%); overflow: hidden; } .brands .brr .pic .pmg { width: 100%; padding-top: 96.49%; } .brands .brr .imgs { width: auto; display: block; position: relative; z-index: 4; overflow: hidden; } .brands .brr .imgs .img { width: 100%; padding-top: 102.127%; } @media (max-width: 800px) { .brands { height: auto; padding: 1rem 0; } .brands .brl { width: 100%; max-width: 94%; margin: 0 auto; min-height: 0; } .brands .brl .brop .more { margin-top: 0.3rem; } .brands .brr { width: 100%; position: relative; top: 0; transform: translateY(0); max-width: 80%; margin: 0.6rem auto 0; } } .patents { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; position: relative; align-items: center; background-color: #fff; justify-content: space-between; } .patents .bg { position: absolute; z-index: 1; width: calc(1208 / 1920 * 100%); left: calc(100 / 1920 * 100%); top: 50%; transform: translateY(-50%); } .patents .bg .img { width: 100%; padding-top: 27.98%; } .patents .pg { position: absolute; right: 0; z-index: 2; top: 50%; transform: translateY(-50%); width: calc(580 / 1920 * 100%); } .patents .pg .img { width: 100%; height: 100vh; } .patents .patl { display: inline-block; vertical-align: middle; margin-left: calc(100 / 1920 * 100%); width: calc(600 / 1920 * 100%); display: flex; flex-wrap: wrap; align-content: space-between; min-height: 5.7rem; position: relative; z-index: 4; } .patents .patl .dyop { width: 100%; } .patents .patl .dyop .pit { width: 100%; color: #111; font-weight: bold; line-height: 1.3; } .patents .patl .dyop .pit p { color: #111; line-height: 1.3; } .patents .patl .dyop .pit .blue { color: var(--themes); } .patents .patl .dyop .more { width: 100%; font-size: 0; margin-top: 0.6rem; } .patents .patl .dyop .more a { display: inline-block; vertical-align: middle; border: solid 2px rgba(0, 0, 0, 0.08); padding: 0 0.45rem; color: var(--themes); line-height: 3; border-radius: 1.5em; transition: all ease 0.5s; } .patents .patl .dyop .more a span { display: inline-block; vertical-align: middle; width: 13px; margin-right: 0.16rem; } .patents .patl .dyop .more a span img { width: 100%; display: block; } .patents .patl .dyop .more a span img:first-child { display: block; } .patents .patl .dyop .more a span img:last-child { display: none; } .patents .patl .dyop .more a:hover { background-color: var(--themes); border: solid 2px var(--themes); color: #fff; } .patents .patl .dyop .more a:hover span img:first-child { display: none; } .patents .patl .dyop .more a:hover span img:last-child { display: block; } .patents .patl .dyob { width: 100%; } .patents .patl .dyob .linx { width: 1.2rem; display: block; height: 2px; background-color: rgba(0, 0, 0, 0.15); position: relative; } .patents .patl .dyob .linx span { display: inline-block; vertical-align: middle; width: 0.3rem; height: 2px; position: absolute; left: 0; top: 0; z-index: 2; background-color: var(--themes); } .patents .patr { position: relative; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; width: calc(1650 / 1920 * 100%); display: inline-block; vertical-align: middle; } .patents .patr .patpers { width: 100%; position: relative; } .patents .patr .patpers .swiper-slide { width: 100%; opacity: 0; transform: scale(0.5); } .patents .patr .patpers .swiper-slide a { width: 100%; display: block; } .patents .patr .patpers .swiper-slide .imgs { width: 100%; position: relative; overflow: hidden; } .patents .patr .patpers .swiper-slide .imgs .img { width: 100%; padding-top: 66.26%; } .patents .patr .patpers .swiper-slide .vom { width: 100%; text-align: center; margin-top: 0.25rem; } .patents .patr .patpers .swiper-slide .vom .vit { width: 100%; color: #111; line-height: 1.5; } .patents .patr .patpers .swiper-slide .vom .vob { width: 100%; color: var(--themes); line-height: 1.5; margin-top: 0.15rem; } .patents .patr .patpers .swiper-slide .vom .vob span { display: inline-block; vertical-align: middle; } .patents .patr .patpers .swiper-slide-next { opacity: 1; transform: scale(0.8); } .patents .patr .patpers .swiper-slide-active { opacity: 1; transform: scale(1); } .patents .patr .patpers .btn { position: absolute; right: 50%; right: 33.33%; top: 50%; transform: translateY(-50%); z-index: 3; width: 10px; cursor: pointer; } .patents .patr .patpers .btn img { width: 100%; display: block; } .patents .patr .patpers .btn img:first-child { display: block; } .patents .patr .patpers .btn img:last-child { display: none; } .patents .patr .patpers .btn:hover img:first-child { display: none; } .patents .patr .patpers .btn:hover img:last-child { display: block; } .patents .patr .patpers .btn.bl { display: none; } @media (max-width: 800px) { .patents { padding: 1.5rem 0; height: auto; align-content: center; } .patents .patl { width: 100%; max-width: 94%; margin: 0 3%; min-height: 0; text-align: center; } .patents .patl .dyop .more { margin-top: 0.3rem; } .patents .patl .dyob { display: none; } .patents .patr { width: 100%; margin-top: 0.5rem; position: relative; top: 0; transform: translateY(0); } .patents .patr .patpers .btn { right: 5%; } .patents .patr .patpers .btn.bl { right: auto; left: 5%; display: block; } .patents .bg { left: 50%; transform: translate(-50%, -50%); } .patents .pg { height: 100%; display: none; } .patents .pg .img { height: 100%; } } .searchlom { width: 100%; padding: 0.3rem 0; } .searchlom .results { width: 100%; } .searchlom .results .rips { width: 100%; color: #222; line-height: 1.5; } .searchlom .results .rips a { display: inline-block; color: #222; line-height: 1.5; margin-right: 0.25rem; } .searchlom .results .rips a i { display: inline-block; margin: 0 0.06rem; color: var(--themes); font-style: normal; } .searchlom .results .resulis { width: 100%; margin-top: 0.4rem; } .searchlom .results .resulis .reuom { width: 100%; border: solid 1px #ddd; transition: all ease 0.5s; border-radius: 0.2rem; } .searchlom .results .resulis .reuom a { width: 100%; display: block; padding: 0.3rem 0.25rem; } .searchlom .results .resulis .reuom .cit { width: 100%; font-size: 0; } .searchlom .results .resulis .reuom .cit .cp { display: inline-block; vertical-align: middle; max-width: calc(100% - 6em); color: #222; line-height: 1.5; padding-right: 0.2rem; } .searchlom .results .resulis .reuom .cit .cp span { color: var(--themes); } .searchlom .results .resulis .reuom .cit .tic { display: inline-block; vertical-align: middle; color: #fff; width: 6em; line-height: 2; text-align: center; border-radius: 1em; background-color: var(--themes); } .searchlom .results .resulis .reuom .vim { width: 100%; color: #888; line-height: 2; margin-top: 0.08rem; } .searchlom .results .resulis .reuom:hover { background-color: #fff; border: 1px solid #ddd; box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1); } .searchlom .results .resulis .reuom + .reuom { margin-top: 0.3rem; } .videoc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 4; background-color: rgba(0, 0, 0, 0.3); opacity: 1; transition: all ease 0.5s; z-index: 5; } .videoc .vom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; }