.w1600 { width: 16rem; margin: 0 auto; position: relative; font-size: 0; z-index: 2; } @media (max-width: 1620px) { .w1600 { width: 94%; } } .w1680 { width: 16.8rem; margin: 0 auto; position: relative; font-size: 0; z-index: 2; } @media (max-width: 1700px) { .w1680 { width: 94%; } } .w1800 { width: 18rem; margin: 0 auto; position: relative; font-size: 0; z-index: 2; } @media (max-width: 1820px) { .w1800 { width: 94%; } } .w1380 { width: 13.8rem; margin: 0 auto; position: relative; font-size: 0; z-index: 2; } @media (max-width: 1400px) { .w1380 { width: 94%; } } .banner { width: 100vw; position: relative; } .banner .swiper-slide { width: 100vw; position: relative; overflow: hidden; } .banner .swiper-slide .img { width: 100%; height: 100vh; } .banner .swiper-slide .pcimg { width: 100%; height: 100vh; display: block; } .banner .swiper-slide .phimg { width: 100%; height: 100vh; display: none; } .banner .swiper-slide .sox { position: absolute; top: 50%; transform: translateY(-50%); left: calc((270 / 1920) * 100%); width: 5rem; width: 500px; max-width: 86%; } .banner .swiper-slide .sox .sic { width: 100%; font-size: 0; margin-bottom: 0.4rem; } .banner .swiper-slide .sox .sic span { display: inline-block; vertical-align: middle; width: 0.55rem; } .banner .swiper-slide .sox .sic span img { width: 100%; display: block; } .banner .swiper-slide .sox .sm { width: 100%; color: #fff; line-height: 1.3; font-weight: bold; } .banner .swiper-slide .sox .sm p { color: #fff; line-height: 1.3; } .banner .swiper-slide .sox .sx { width: 100%; color: #fff; line-height: 1.5; margin: 0.2rem 0 0.4rem; } .banner .swiper-slide .sox .sx p { color: #fff; line-height: 1.5; } .banner .swiper-slide .sox .more { width: 100%; font-size: 0; } .banner .swiper-slide .sox .more a { display: inline-block; vertical-align: middle; background-color: #fff; color: #00a9ce; padding: 0 0.4rem; line-height: 3; border-radius: 1.5em; transition: all ease 0.3s; } .banner .swiper-slide .sox .more a:hover { background-color: #00a9ce; color: #fff; } .banner .swiper-slide .voc { background-color: #000; object-fit: contain; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; } .banner .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; } .banner .btn img { width: 100%; display: block; } .banner .btn img:first-child { display: block; } .banner .btn img:last-child { display: none; } .banner .btn:hover img:first-child { display: none; } .banner .btn:hover img:last-child { display: block; } .banner .bl { left: calc((130 / 1920) * 100%); } .banner .br { right: calc((130 / 1920) * 100%); } .banner .swiper-pagination { bottom: 0.4rem; } .banner .swiper-pagination-bullet { width: 8px; height: 8px; background-color: #fff; border-radius: 4px; opacity: 1; margin: 0 5px; transition: all ease 0.5s; } .banner .swiper-pagination-bullet-active { width: 26px; height: 8px; background-color: #149fc2; } @media (max-width: 1400px) { .banner .swiper-slide .sox { left: 7%; } .banner .bl { left: 3%; } .banner .br { right: 3%; } } @media (max-width: 800px) { .banner .swiper-slide .pcimg { display: none; } .banner .swiper-slide .phimg { display: block; } .banner .swiper-slide .voc{ display: none !important; } } .technology { width: 100%; } .technology .technes { width: 100%; font-size: 0; padding-left: calc((110 / 1920) * 100%); display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } .technology .technes .tel { display: inline-block; vertical-align: middle; width: calc((700 / 1600) * 100%); } .technology .technes .tel .tetop { width: 100%; margin-bottom: 0.6rem; } .technology .technes .tel .tetop .tm { width: 100%; color: rgba(0, 0, 0, 0.1); line-height: 1.2; } .technology .technes .tel .tetop .tx { width: 100%; color: #222; line-height: 1.5; } .technology .technes .tel .techper { width: 100%; margin: 0.5rem 0; } .technology .technes .tel .techper .swiper-slide { width: 100%; } .technology .technes .tel .techper .swiper-slide .techm { width: 100%; font-size: 0; } .technology .technes .tel .techper .swiper-slide .techm a { width: 100%; display: flex; align-items: center; padding: 0.2rem 0; } @-webkit-keyframes icon-enter { 0% { background-position: 0 0; } 100% { background-position: 0 -9rem; } } @keyframes icon-enter { 0% { background-position: 0 0; } 100% { background-position: 0 -9rem; } } @-webkit-keyframes icon-leave { 0% { background-position: 0 -9rem; } 100% { background-position: 0 0; } } @keyframes icon-leave { 0% { background-position: 0 -9rem; } 100% { background-position: 0 0; } } .technology .technes .tel .techper .swiper-slide .techm .icon { display: inline-block; vertical-align: middle; width: 1rem; height: 1rem; margin: auto; position: relative; z-index: 2; background-position: center top; background-repeat: no-repeat; background-size: 100% auto; } .technology .technes .tel .techper .swiper-slide .techm .icon.is-enter { -webkit-animation: icon-enter 0.1s steps(9) forwards; animation: icon-enter 0.1s steps(9) forwards; } .technology .technes .tel .techper .swiper-slide .techm .icon.is-leave { -webkit-animation: icon-leave 0.1s steps(9) forwards; animation: icon-leave 0.1s steps(9) forwards; } .technology .technes .tel .techper .swiper-slide .techm .mim { flex: 1; display: inline-block; vertical-align: middle; padding: 0 0.5rem; } .technology .technes .tel .techper .swiper-slide .techm .mim .mt { width: 100%; color: #131313; line-height: 1.5; } .technology .technes .tel .techper .swiper-slide .techm .mim .mx { width: 100%; color: #717273; line-height: 1.5; } .technology .technes .tel .techper .swiper-slide .techm .rim { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: solid 1px #ddd; } .technology .technes .tel .techper .swiper-slide .techm .rim img { width: 100%; display: block; } .technology .technes .tel .techper .swiper-slide .techm .rim img:first-child { display: block; } .technology .technes .tel .techper .swiper-slide .techm .rim img:last-child { display: none; } .technology .technes .tel .techper .swiper-slide .techm:hover .mim .mt { color: #0bc4d0; } .technology .technes .tel .techper .swiper-slide .techm:hover .rim { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .technology .technes .tel .techper .swiper-slide .techm:hover .rim img:first-child { display: none; } .technology .technes .tel .techper .swiper-slide .techm:hover .rim img:last-child { display: block; } .technology .technes .tel .datas { width: 100%; font-size: 0; } .technology .technes .tel .datas .datm { display: inline-block; vertical-align: top; width: 33.3%; padding: 0.2rem 0; } .technology .technes .tel .datas .datm .dtm { width: 100%; color: #00a9ce; line-height: 1.5; } .technology .technes .tel .datas .datm .dx { width: 100%; color: #717273; line-height: 1.5; padding-right: 0.25rem; } .technology .technes .tel .datas .datm .dx p{ color: #717273; line-height: 1.5; } .technology .technes .ter { display: inline-block; vertical-align: middle; width: calc((700 / 1600) * 100%); position: relative; margin-right: 0.8rem; } .technology .technes .ter .img { width: 100%; padding-top: 78.90%; position: relative; z-index: 20; } .technology .technes .ter .lings { position: absolute; z-index: 5; width: 100%; height: 100%; left: 0; top: 0; } .technology .technes .ter .lings .lmg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } @keyframes opacitys { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .technology .technes .ter .lings .li1 { z-index: 6; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.1s infinite; } .technology .technes .ter .lings .li2 { z-index: 7; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.2s infinite; } .technology .technes .ter .lings .li3 { z-index: 8; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.3s infinite; } .technology .technes .ter .lings .li4 { z-index: 9; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.4s infinite; } .technology .technes .ter .lings .li5 { z-index: 10; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.5s infinite; } .technology .technes .ter .lings .li6 { z-index: 11; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.6s infinite; } .technology .technes .ter .lings .li7 { z-index: 12; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.7s infinite; } .technology .technes .ter .lings .li8 { z-index: 13; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.8s infinite; } .technology .technes .ter .lings .li9 { z-index: 14; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 0.9s infinite; } .technology .technes .ter .lings .li10 { z-index: 15; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 1s infinite; } .technology .technes .ter .lings .li11 { z-index: 16; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 1.1s infinite; } .technology .technes .ter .lings .li12 { z-index: 17; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 1.2s infinite; } .technology .technes .ter .lings .li13 { z-index: 18; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 1.3s infinite; } .technology .technes .ter .lings .li14 { z-index: 19; animation: opacitys 2s cubic-bezier(0, 0, 0.49, 1.02) 1.4s infinite; } @media (max-width: 1400px) { .technology .technes { padding-left: 0; } } @media (max-width: 800px) { .technology { padding: 0.5rem 0; } .technology .technes .tel { width: 100%; margin-bottom: 0.3rem; } .technology .technes .ter { width: 100%; } } footer { width: 100%; } footer .ftop { width: 100%; padding: 0.7rem 0 0.4rem; } footer .ftop .fop { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; } footer .ftop .fop .fol { display: inline-block; vertical-align: middle; width: calc((300 / 1380) * 100%); padding: 0 0.2rem; } footer .ftop .fop .fol .fit { width: 100%; text-align: center; color: #fff; line-height: 1.5; margin-bottom: 0.3rem; } footer .ftop .fop .fol .tell { width: 100%; text-align: center; } footer .ftop .fop .fol .tell .tc { width: 100%; text-align: center; font-size: 0; } footer .ftop .fop .fol .tell .tc span { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; } footer .ftop .fop .fol .tell .tc span img { width: 100%; display: block; } footer .ftop .fop .fol .tell .num { width: 100%; color: #fff; line-height: 1.5; margin: 0.1rem 0; } footer .ftop .fop .fol .tell .px { width: 100%; color: rgba(255, 255, 255, 0.7); line-height: 1.5; } footer .ftop .fop .fol .shage { width: 100%; font-size: 0; text-align: center; margin-top: 0.35rem; } footer .ftop .fop .fol .shage .am { display: inline-block; vertical-align: middle; width: 0.41rem; height: 0.41rem; opacity: 0.5; margin: 0 0.1rem; transition: opacity ease 0.3s; } footer .ftop .fop .fol .shage .am a, footer .ftop .fop .fol .shage .am img { width: 100%; display: block; } footer .ftop .fop .fol .shage .am .wechat-qrcode{ position:absolute; } footer .ftop .fop .fol .shage .am:hover .wechat-qrcode{ display:block; } footer .ftop .fop .fol .shage .am:hover { opacity: 1; } footer .ftop .fop .line { display: inline-block; vertical-align: middle; text-align: center; font-size: 0; width: calc((79 / 1380) * 100%); } footer .ftop .fop .line span { display: inline-block; vertical-align: middle; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.2); } footer .ftop .fop .for { display: inline-block; vertical-align: middle; width: calc((1000 / 1380) * 100%); } footer .ftop .fop .for .flist { display: inline-block; vertical-align: top; width: calc((128 / 900) * 100%); } footer .ftop .fop .for .flist .fit { width: 100%; color: #fff; line-height: 1.5; margin-bottom: 0.3rem; } footer .ftop .fop .for .flist .ful { width: 100%; font-size: 0; } footer .ftop .fop .for .flist .ful a { width: 100%; display: block; line-height: 2; color: rgba(255, 255, 255, 0.6); transition: all ease 0.3s; } footer .ftop .fop .for .flist .ful a:hover { color: #fff; } footer .ftop .fod { width: 100%; font-size: 0; margin-top: 0.3rem; } footer .ftop .fod .fol { width: calc((300 / 1380) * 100%); display: inline-block; vertical-align: middle; width: 4.6rem; white-space: nowrap; } footer .ftop .fod .fol .fiy { width: 100%; color: #fff; line-height: 1.5; text-align: center; } footer .ftop .fod .for { width: calc((1079 / 1380) * 100%); width: calc(100% - 4.6rem); display: inline-block; vertical-align: middle; text-align: right; font-size: 0; } footer .ftop .fod .for .codes { display: inline-block; vertical-align: middle; width: auto; } footer .ftop .fod .for .codes .cm { width: 1rem; height: 1rem; display: block; margin: 0 0.1rem; } footer .ftop .fod .for .codes .cm img { width: 100%; display: block; } footer .ftop .fod .for .codes .mc { width: 100%; color: rgba(255, 255, 255, 0.6); margin-top: 0.1rem; line-height: 1.5; text-align: center; } footer .fmid { width: 100%; background-color: #123b48; position: relative; padding: 0.2rem 0 0.1rem; } footer .fmid .fim { width: 100%; font-size: 0; position: relative; /* max-width: 4.6rem; white-space: nowrap; */ text-align: justify; } footer .fmid .fim:after { content: ' '; position: absolute; z-index: -1; background-color: #123b48; border-top-left-radius: 0.45rem; border-top-right-radius: 0.45rem; left: 0; top: -0.38rem; width: calc((460 / 1440) * 100%); width: 460px; width: 4.6rem; height: 0.4rem; } footer .fmid .fim .am { display: inline-block; vertical-align: middle; width: auto; margin-bottom: 0.1rem; } footer .fmid .fim .am a { width: auto; display: inline-block; vertical-align: middle; color: rgba(255, 255, 255, 0.5); line-height: 1.6; transition: all ease 0.3s; } footer .fmid .fim .am a:hover { color: white; } footer .fmid .fim .am span { display: inline-block; vertical-align: middle; color: rgba(64, 95, 105, 0.5); line-height: 1.5; position: relative; top: -0.02rem; margin: 0 0.15rem; } footer .fmid .fim .fix { position: absolute; color: rgba(255, 255, 255, 0.5); left: 0; width: 4.6rem; top: -0.4rem; line-height: 0.4rem; text-align: center; } footer .fbot { width: 100%; padding: 0.2rem 0; background-color: #fff; } footer .fbot .fob { width: 100%; } footer .fbot .fob .fmg { width: 100%; } footer .fbot .fob .fmg img { width: 100%; display: block; } footer .fbot .fob .fis { margin-top: 0.15rem; width: 100%; color: #222; line-height: 1.5; } @media (max-width: 800px) { footer .ftop { width: 100%; } footer .ftop .fop { width: 100%; } footer .ftop .fop .fol { width: 100%; padding: 0; margin-bottom: 0.3rem; } footer .ftop .fop .fol .fit { text-align: left; margin-bottom: 0.15rem; } footer .ftop .fop .fol .tell { width: 50%; font-size: 0; text-align: left; display: inline-block; vertical-align: top; } footer .ftop .fop .fol .tell .tc { width: auto; display: inline-block; vertical-align: middle; margin-right: 0.1rem; } footer .ftop .fop .fol .tell .num { width: auto; display: inline-block; vertical-align: middle; margin: 0 0.1rem; } footer .ftop .fop .fol .tell .px { width: auto; display: inline-block; vertical-align: middle; } footer .ftop .fop .fol .shage { display: inline-block; vertical-align: top; width: 50%; text-align: right; } footer .ftop .fop .fol .shage .am { width: 0.61rem; height: 0.61rem; } footer .ftop .fop .line { display: none; } footer .ftop .fop .for { width: 100%; } footer .ftop .fop .for .flist { width: 50%; display: inline-block; vertical-align: top; font-size: 0; width: 100%; border-bottom: solid 1px #eee; position: relative; } footer .ftop .fop .for .flist .fit { width: 100%; margin-bottom: 0; padding: 0.3rem 0; } footer .ftop .fop .for .flist .ful { width: 100%; font-size: 0; padding-bottom: 0.15rem; display: none; } footer .ftop .fop .for .flist:first-child { border-top: solid 1px #efefef; } footer .ftop .fop .for .flist.has-ful:after { content: " "; display: inline-block; width: 0.3rem; height: 0.3rem; line-height: 0.3rem; background-image: url("../images/x.png"); background-position: center; background-size: 100% 100%; text-align: center; position: absolute; right: 0.3rem; left: auto; transform: translateX(0); top: 0.3rem; color: #333; border: none; transition: all ease 0.5s; } footer .ftop .fop .for .flist.has-ful.show:after { content: " "; transform: translateX(0) rotate(180deg); } } .news { width: 100%; } .news .mitop { width: 100%; font-size: 0; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-bottom: 0.3rem; } .news .mitop .nel { width: auto; display: inline-block; vertical-align: middle; } .news .mitop .nel .ft { width: 100%; color: rgba(34, 34, 34, 0.1); line-height: 1.5; font-weight: 400; line-height: 1.3; } .news .mitop .nel .fm { width: 100%; color: #222; font-weight: bold; line-height: 1.5; } .news .mitop .ner { display: inline-block; vertical-align: top; width: auto; font-size: 0; } .news .mitop .ner a { display: inline-block; vertical-align: middle; width: auto; padding: 0 0.6rem; line-height: 3; border-radius: 1.5em; border: solid 1px #ddd; color: #222; } .news .mitop .ner a:hover { background-color: #00a9ce; color: #fff; border: solid 1px #00a9ce; } .news .newcom { width: 100%; font-size: 0; } .news .newcom .nel { display: inline-block; vertical-align: top; width: calc((910 / 1380) * 100%); margin-right: calc((29 / 1380) * 100%); font-size: 0; } .news .newcom .nel .nelam { width: calc((440 / 910) * 100%); display: inline-block; vertical-align: top; margin-right: calc((29 / 910) * 100%); position: relative; } .news .newcom .nel .nelam a { width: 100%; display: block; } .news .newcom .nel .nelam .imgs { width: 100%; display: block; margin: 0 auto; position: relative; overflow: hidden; } .news .newcom .nel .nelam .imgs .img { width: 100%; padding-top: 63.63%; transition: all ease 0.3s; } .news .newcom .nel .nelam .nem { width: 100%; background-color: #fff; padding: 0.4rem 0.3rem; } .news .newcom .nel .nelam .nem .dit { width: 100%; color: #131313; line-height: 1.5; height: 3em; } .news .newcom .nel .nelam .nem .time { width: 100%; color: #131313; line-height: 1.5; margin: 0.45rem 0 0.2rem; } .news .newcom .nel .nelam .nem .tix { width: 100%; font-size: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .news .newcom .nel .nelam .nem .tix .label { display: inline-block; vertical-align: middle; width: auto; font-size: 0; } .news .newcom .nel .nelam .nem .tix .label .bm { display: inline-block; vertical-align: middle; width: 0.47rem; height: 0.49rem; width: 47px; height: 49px; background-image: url("../images/tab.png"); background-size: 100% 100%; color: #717273; position: relative; } .news .newcom .nel .nelam .nem .tix .label .bm span { width: 0.38rem; height: 0.38rem; line-height: 0.38rem; width: 38px; height: 38px; line-height: 38px; display: inline-block; vertical-align: middle; position: absolute; right: 1px; top: 0; color: #717273; text-align: center; } .news .newcom .nel .nelam .nem .tix .rj { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; } .news .newcom .nel .nelam .nem .tix .rj img { width: 100%; display: block; } .news .newcom .nel .nelam:nth-child(2n) { margin-right: 0; } .news .newcom .nel .nelam:hover { box-shadow: 0px 6px 16px 1px rgba(112, 112, 112, 0.13); } .news .newcom .nel .nelam:hover .imgs .img { transform: scale(1.1); } .news .newcom .nel .nelam:hover .nem .dit { color: #00a9ce; } .news .newcom .ner { display: inline-block; vertical-align: top; width: calc((440 / 1380) * 100%); background-color: #fff; } .news .newcom .ner .neroms { width: 100%; height: 100%; display: block; padding: 0.4rem 0.1rem 0.4rem 0.4rem; } .news .newcom .ner .nerm { width: 100%; border-bottom: solid 1px #e8e8e8; } .news .newcom .ner .nerm a { width: 100%; display: block; padding: 0.25rem 0; } .news .newcom .ner .nerm .ny { width: 100%; color: #131313; font-weight: 400; font-weight: bold; line-height: 1.5; } .news .newcom .ner .nerm .time { width: 100%; color: #717273; line-height: 1.5; margin-top: 0.15rem; } .news .newcom .ner .nerm:hover .ny { color: #00a9ce; } @media (max-width: 800px) { .news { padding: 0.5rem 0; } } .nanber { width: 100%; position: relative; } .nanber .swiper-slide { width: 100%; position: relative; } .nanber .img { width: 100%; padding-top: 37.18%; } .nanber .nox { position: absolute; top: 50%; transform: translateY(-50%); left: calc((270 / 1920) * 100%); width: 5rem; width: 580px; max-width: 86%; } .nanber .nox .sic { width: 100%; font-size: 0; margin-bottom: 0.4rem; } .nanber .nox .sic span { display: inline-block; vertical-align: middle; width: 0.55rem; } .nanber .nox .sic span img { width: 100%; display: block; } .nanber .nox .sm { width: 100%; color: #fff; line-height: 1.3; font-weight: bold; } .nanber .nox .sm p { color: #fff; line-height: 1.3; } .nanber .nox .sx { width: 100%; color: #fff; line-height: 1.5; margin: 0.2rem 0 0.4rem; } .nanber .nox .sx p { color: #fff; line-height: 1.5; } .nanber .nox.mid { left: 50%; transform: translate(-50%, -50%); text-align: center; } .nanber .nox.mid .sic { margin-bottom: 0.2rem; } .nanber .nox.mid .sm { color: #e60012; } .nanber .nox.mid .sm p { color: #e60012; } .nanber .voc { background-color: #000; object-fit: contain; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; } .nanber .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.6rem; height: 0.6rem; width: 60px; height: 60px; cursor: pointer; } .nanber .play img { width: 100%; display: block; } .nanber.short .img { padding-top: 20.87%; } @media (max-width: 1400px) { .nanber .nox { left: 7%; } } @media (max-width: 800px) { .nanber .img { /* padding-top: 70%; */ } .nanber.short .img { padding-top: 50.87%; } } .crumbs { width: 100%; position: relative; background-color: transparent; border-bottom: solid 1px #ddd; } .crumbs .crum { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .crumbs .crum .cul { display: inline-block; vertical-align: middle; width: auto; font-size: 0; position: relative; max-width: 10.5rem; } .crumbs .crum .cul .swiper-container { height: 100%; } .crumbs .crum .cul .cum { display: inline-block; vertical-align: middle; width: auto; position: relative; position: relative; } .crumbs .crum .cul .cum a { display: block; color: #222; line-height: 4; padding: 0 0.3rem; text-align: center; transition: all ease 0.3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .crumbs .crum .cul .cum.on:after { display: block; } .crumbs .crum .cul .cum.on a { background-color: #00a9ce; color: #fff; } .crumbs .crum .cul .cum { display: flex; align-items: center; } .crumbs .crum .cul .cum a { width: 100%; } .crumbs .crum .cur { display: inline-block; vertical-align: middle; width: auto; text-align: right; font-size: 0; flex: 1; } .crumbs .crum .cur .home { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; margin-right: 0.1rem; } .crumbs .crum .cur .home img { width: 100%; display: block; } .crumbs .crum .cur a { display: inline-block; vertical-align: middle; color: #666; line-height: 3; } .crumbs .crum .cur a span { display: inline-block; margin-left: 0.15rem; margin-right: 0.15rem; color: #666; } .crumbs .crum .cur a:hover { color: #00a9ce; } .crumbs .crum .cur a:hover span { color: #666; } .crumbs .crum .cur a:last-child span { display: none; } .crumbs.w100 .crum .cur { width: 100%; padding-top: 0; } .crumbs.w100 .crum .cur a { line-height: 4; } @media (max-width: 1580px) { .crumbs:before { width: 3%; } } @media (max-width: 800px) { .crumbs .crum .cul { width: 100%; } .crumbs .crum .cul .cum a { padding: 0 0.15rem; text-align: center; } .crumbs .crum .cur { flex: none; width: 100%; } } .modular .mitop { width: 100%; margin-bottom: 0.3rem; font-size: 0; } .modular .mitop .nel { width: auto; display: inline-block; vertical-align: middle; } .modular .mitop .nel .ft { width: 100%; color: rgba(34, 34, 34, 0.1); line-height: 1.5; font-weight: 400; line-height: 1.3; } .modular .mitop .nel .fm { width: 100%; color: #222; font-weight: bold; line-height: 1.5; } .modular .mitop.flexs { display: flex; align-items: flex-end; justify-content: space-between; } .modular .mitop.flexs .ner { display: inline-block; vertical-align: middle; } .modular .mitop.flexs .ner a { display: inline-block; vertical-align: middle; padding: 0 0.5rem; background-color: #fff; line-height: 3; border-radius: 1.5em; color: #222; } .modular .mitop.flexs .ner a:hover { display: inline-block; vertical-align: middle; background-color: #15a4c6; color: #fff; } .modular .nutop { width: 100%; font-size: 0; margin-bottom: 0.5rem; } .modular .nutop .nul { width: 100%; font-size: 0; display: flex; align-items: center; } .modular .nutop .nul .num { display: inline-block; vertical-align: middle; color: #ff7611; font-weight: bold; } .modular .nutop .nul .pem { flex: 1; display: inline-block; vertical-align: middle; } .modular .nutop .nul .pem .pe { width: 100%; color: rgba(77, 165, 223, 0.2); line-height: 1.1; font-weight: bold; } .modular .nutop .nul .pem .pc { width: 100%; color: #ff7611; line-height: 1.5; font-weight: bold; } .modular .mitop.mid { text-align: center; } .modular.white .mitop .nel .ft { color: rgba(255, 255, 255, 0.1); } .modular.white .mitop .nel .fm { color: #fff; } .message { width: 100%; } .message .agese { width: 100%; position: relative; z-index: 1; overflow: hidden; } .message .agese .agem { width: 100%; display: flex; flex-wrap: wrap; align-items: center; } .message .agese .vmper { width: calc((686 / 1920) * 100%); position: relative; top: 0; z-index: 2; right: 0; } .message .agese .vmper .swiper-slide { width: 100%; } .message .agese .vmper .swiper-slide .img { width: 100%; padding-top: 71.42%; } .message .agese .vmplis { width: calc((800 / 1380) * 100%); width: calc((1233 / 1920) * 100%); padding-left: calc((270 / 1920) * 100%); padding-right: 0.6rem; display: block; position: relative; z-index: 3; padding-top: 0.3rem; padding-bottom: 0.3rem; } .message .agese .vmplis .vli { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; margin-bottom: 0.24rem; } .message .agese .vmplis .vli .x1 { display: inline-block; vertical-align: top; width: 0.1rem; height: 0.1rem; margin-right: 0.12rem; border-radius: 50%; background-color: #15a4c6; margin-top: calc(0.8em - 0.05rem); } .message .agese .vmplis .vli .xms { display: inline-block; vertical-align: top; flex: 1; color: #222; line-height: 1.6; } .message .agese .vmplis .vli .xms p { color: #222; line-height: 1.6; } .message .agese .datasv { width: 100%; /* margin-top: 1rem; */ position: relative; z-index: 3; padding: 0.4rem 0rem 0.4rem 0.3rem; margin-left: calc((260 / 1920) * 100%); width: calc((1660 / 1920) * 100%); font-size: 0; overflow: hidden; } .message .agese .datasv .vatem { display: inline-block; vertical-align: top; width: 25%; font-size: 0; padding: 0.3rem 0rem 0.3rem 0.3rem; position: relative; } .message .agese .datasv .vatem:after { content: ' '; position: absolute; top: 0.35rem; /* transform: translateY(-50%); */ height: 0.63rem; width: 1px; background-color: rgba(51, 51, 51, 0.3); } .message .agese .datasv .vatem .ic { display: inline-block; vertical-align: top; width: 0.54rem; height: 0.62rem; margin-right: 0.12rem; } .message .agese .datasv .vatem .ic img { width: 100%; display: block; } .message .agese .datasv .vatem .nom { display: inline-block; vertical-align: top; width: calc(100% - 0.66rem); } .message .agese .datasv .vatem .nom .num { width: 100%; color: #222; } .message .agese .datasv .vatem .nom .num span { display: inline-block; color: #222; } .message .agese .datasv .vatem .nom .vn { width: 100%; color: #222; line-height: 1.5; margin-top: 0.1rem; padding-right: 0.2rem; } .message .agese .datasv .vatem:nth-child(4n):after { display: none; } @media (max-width: 1400px) { .message .agese .datasv { margin-left: 3%; width: 97%; } } @media (max-width: 800px) { .message .agese { padding: 0.6rem 0; } .message .agese .agem { flex-direction: column-reverse; } .message .agese .vmper { width: 94%; position: relative; margin: 0 auto 0.3rem; } .message .agese .vmplis { width: 100%; margin: 0.6rem 0; padding: 0 3%; } .message .agese .datasv { width: 100%; margin-left: 3%; } .message .agese .datasv .vatem { width: 50%; } } .services { width: 100%; padding: 1.2rem 0; } .services .mitop { margin-bottom: 0.7rem; } .services .serpers { width: 100%; position: relative; } .services .serpers .swiper-slide { display: inline-block; vertical-align: top; width: 100%; position: relative; } .services .serpers .swiper-slide .imgs { width: 98%; margin: 0 auto; position: relative; z-index: 2; top: 0.6rem; transition: all ease 0.5s; overflow: hidden; } .services .serpers .swiper-slide .imgs .img { width: 100%; padding-top: 75%; transition: all ease 0.5s; } .services .serpers .swiper-slide .icon { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: #15a4c6; transition: all ease 0.5s; } .services .serpers .swiper-slide .icon img { width: 100%; display: block; } .services .serpers .swiper-slide .icon img:first-child { display: block; } .services .serpers .swiper-slide .icon img:last-child { display: none; } .services .serpers .swiper-slide .som { width: 100%; background-color: #fff; padding: 0.8rem 0.3rem 0.7rem; position: relative; z-index: 2; top: -0.2rem; transition: all ease 0.5s; } .services .serpers .swiper-slide .som .sit { width: 100%; text-align: center; line-height: 1.5; color: #222; margin-bottom: 0.1rem; } .services .serpers .swiper-slide .som .sinp { width: 100%; color: #222; line-height: 1.5; text-align: center; height: 4.5em; } .services .serpers .swiper-slide .som .sinp p { color: #222; line-height: 1.5; } .services .serpers .swiper-slide .som.left .sit { text-align: left; } .services .serpers .swiper-slide .som.left .sinp { text-align: left; } .services .serpers .swiper-slide .som.h4 { padding: 0.5rem; } .services .serpers .swiper-slide .som.h4 .sinp { height: 6em; margin-bottom: 0.2rem; } .services .serpers .swiper-slide:hover .imgs { top: 0; } .services .serpers .swiper-slide:hover .imgs .img { transform: scale(1.1); } .services .serpers .swiper-slide:hover .icon { top: 25%; background-color: #fff; } .services .serpers .swiper-slide:hover .icon img:first-child { display: none; } .services .serpers .swiper-slide:hover .icon img:last-child { display: block; } .services .serpers .swiper-slide:hover .som { top: 0; background-color: #15a4c6; } .services .serpers .swiper-slide:hover .som .sit { color: #fff; } .services .serpers .swiper-slide:hover .som .sinp { color: #fff; } .services .serpers .swiper-slide:hover .som .sinp p { color: #fff; } .services .serpers .swiper-slide.on .imgs { top: 0; } .services .serpers .swiper-slide.on .imgs .img { transform: scale(1.1); } .services .serpers .swiper-slide.on .icon { top: 25%; background-color: #fff; } .services .serpers .swiper-slide.on .icon img:first-child { display: none; } .services .serpers .swiper-slide.on .icon img:last-child { display: block; } .services .serpers .swiper-slide.on .som { top: 0; background-color: #15a4c6; } .services .serpers .swiper-slide.on .som .sit { color: #fff; } .services .serpers .swiper-slide.on .som .sinp { color: #fff; } .services .serpers .swiper-slide.on .som .sinp p { color: #fff; } .services .serpers .serpers:nth-child(3n+1) { transition-delay: 0.2s; } .services .serpers .serpers:nth-child(3n+2) { transition-delay: 0.3s; } .services .serpers .serpers:nth-child(3n+3) { transition-delay: 0.4s; } .services .serpers .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .services .serpers .btn img { width: 100%; display: block; } .services .serpers .btn img:first-child { display: block; } .services .serpers .btn img:last-child { display: none; } .services .serpers .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .services .serpers .btn:hover img:first-child { display: none; } .services .serpers .btn:hover img:last-child { display: block; } .services .serpers .bl { left: -0.8rem; } .services .serpers .br { right: -0.8rem; } @media (max-width: 1500px) { .services .serpers .btn { background-color: #fff; border: solid 1px #fff; } .services .serpers .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .services .serpers .bl { left: 0rem; } .services .serpers .br { right: 0rem; } } .queues { width: 100%; padding: 1.2rem 0; background-color: #f2f7fa; } .queues .quepers { width: 100%; position: relative; } .queues .quepers .swiper-slide { width: 100%; background-color: #fff; border-radius: 0.3rem; position: relative; overflow: hidden; } .queues .quepers .swiper-slide a { width: 100%; display: block; overflow: hidden; } .queues .quepers .swiper-slide .imgs { width: 100%; overflow: hidden; } .queues .quepers .swiper-slide .imgs .img { width: 100%; padding-top: 100%; transition: all ease 0.4s; } .queues .quepers .swiper-slide .som { width: 100%; margin-top: 0.2rem; padding: 0.1rem 0.5rem 0.5rem; } .queues .quepers .swiper-slide .som .xm { width: 100%; color: #15a4c6; line-height: 1.5; } .queues .quepers .swiper-slide .som .st { width: 100%; color: #222; font-weight: bold; line-height: 1.5; height: 3em; margin: 0.1rem 0 0.2rem; } .queues .quepers .swiper-slide .som .sip { width: 100%; color: #666; line-height: 1.5; height: 3em; margin: 0.2rem 0 0.25rem; } .queues .quepers .swiper-slide .som .sip p { color: #666; line-height: 1.5; } .queues .quepers .swiper-slide .som .more { width: 100%; font-size: 0; } .queues .quepers .swiper-slide .som .more span { display: inline-block; vertical-align: middle; background-color: #222; line-height: 3; color: #fff; width: 1.6rem; text-align: center; border-radius: 1.5em; } .queues .quepers .swiper-slide .som .more span i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; width: 0; margin-left: 0.12rem; margin-left: 0; transition: width ease 0.4s; } .queues .quepers .swiper-slide .som .more span i img { width: 100%; display: block; } .queues .quepers .swiper-slide .icon { position: absolute; z-index: 2; width: 0.65rem; height: 0.75rem; top: 0; left: 0.6rem; } .queues .quepers .swiper-slide .icon img { width: 100%; display: block; } .queues .quepers .swiper-slide:hover .imgs .img { transform: scale(1.1); } .queues .quepers .swiper-slide:hover .more span { background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); } .queues .quepers .swiper-slide:hover .more span i { width: 0.2rem; margin-left: 0.12rem; } .queues .quepers .swiper-slide:nth-child(3n+1) { transition-delay: 0.2s; } .queues .quepers .swiper-slide:nth-child(3n+2) { transition-delay: 0.3s; } .queues .quepers .swiper-slide:nth-child(3n+3) { transition-delay: 0.4s; } .queues .quepers .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .queues .quepers .btn img { width: 100%; display: block; } .queues .quepers .btn img:first-child { display: block; } .queues .quepers .btn img:last-child { display: none; } .queues .quepers .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .queues .quepers .btn:hover img:first-child { display: none; } .queues .quepers .btn:hover img:last-child { display: block; } .queues .quepers .bl { left: -0.8rem; } .queues .quepers .br { right: -0.8rem; } .queues.deep { background-color: #d8e4ec; } @media (max-width: 1500px) { .queues .quepers .btn { background-color: #fff; border: solid 1px #a0b9bf; } .queues .quepers .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .queues .quepers .bl { left: 0rem; } .queues .quepers .br { right: 0rem; } } .cores { width: 100%; padding: 1.2rem 0; } .cores .mitop { margin-bottom: 0.6rem; } .cores .corepers { width: 100%; font-size: 0; position: relative; } .cores .corepers .croem { display: inline-block; vertical-align: top; width: calc((660 / 1380) * 100%); margin-right: calc((49 / 1380) * 100%); background-color: #fff; position: relative; } .cores .corepers .croem a { width: 100%; display: block; } .cores .corepers .croem .imgs { display: inline-block; vertical-align: middle; width: calc((260 / 660) * 100%); position: relative; overflow: hidden; } .cores .corepers .croem .imgs .img { width: 100%; padding-top: 123.07%; transition: all ease 0.3s; } .cores .corepers .croem .icon { position: absolute; top: 50%; transform: translate(-50%, -50%); left: calc((260 / 660) * 100%); width: 1.6rem; height: 1.6rem; background-color: #ffffff; box-shadow: 3px 5px 13px 1px rgba(0, 0, 0, 0.2); overflow: hidden; border-radius: 50%; } .cores .corepers .croem .icon img { width: 100%; display: block; transition: all ease 0.5s; } .cores .corepers .croem .somp { display: inline-block; vertical-align: middle; width: calc((400 / 660) * 100%); padding: 0.2rem 0.3rem 0.2rem 1.2rem; } .cores .corepers .croem .somp .sm { width: 100%; color: #15a4c6; line-height: 1.5; } .cores .corepers .croem .somp .st { width: 100%; font-weight: bold; line-height: 1.5; color: #222; } .cores .corepers .croem .somp .sv { width: 100%; color: #666; line-height: 1.5; height: 4.5em; } .cores .corepers .croem .somp .sv p { color: #666; line-height: 1.5; } .cores .corepers .croem .somp .more { width: 100%; font-size: 0; margin-top: 0.2rem; } .cores .corepers .croem .somp .more span { display: inline-block; vertical-align: middle; color: #222; line-height: 1.5; } .cores .corepers .croem .somp .more span i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; margin-left: 0.12rem; } .cores .corepers .croem .somp .more span i img { width: 100%; display: block; } .cores .corepers .croem:nth-child(2n) { margin-right: 0; } .cores .corepers .croem:nth-child(2n+1) { transition-delay: 0.2s; } .cores .corepers .croem:nth-child(2n+2) { transition-delay: 0.3s; } .cores .corepers .croem:nth-child(4n+1) { margin-bottom: 0.5rem; } .cores .corepers .croem:nth-child(4n+2) { margin-bottom: 0.5rem; } .cores .corepers .croem:hover .imgs .img { transform: scale(1.1); } .cores .corepers .croem:hover .icon img { transform: scale(1.1); } .cores .corepers .croem:hover .somp .st { color: #00a9ce; } .cores .corepers .btn { position: absolute; z-index: 3; width: 0.6rem; height: 0.6rem; border-radius: 50%; top: 50%; cursor: pointer; border: solid 1px #a0b9bf; transform: translateY(-50%); } .cores .corepers .btn img { width: 100%; display: block; } .cores .corepers .btn:hover { background-color: #00a9ce; border: solid 1px #00a9ce; } .cores .corepers .bl { left: -0.8rem; } .cores .corepers .br { right: -0.8rem; } @media (max-width: 1400px) { .cores .corepers .bl { left: -0.3rem; } .cores .corepers .br { right: -0.3rem; } } @media (max-width: 800px) { .cores .corepers .croem { width: 100%; } .cores .corepers .croem:nth-child(4n+1) { margin-bottom: 0rem; } .cores .corepers .croem:nth-child(4n+2) { margin-bottom: 0rem; } .cores .corepers .croem + .croem { margin-top: 0.4rem; } .cores .corepers .btn { background-color: #a0b9bf; border: solid 1px #a0b9bf; } .cores .corepers .bl { left: 0rem; } .cores .corepers .br { right: 0rem; } } .hxnper { width: 100%; padding: 1.5rem 0 0.5rem; position: relative; } .hxnper .bgox { width: 100%; position: absolute; z-index: 2; width: 100%; height: 4rem; left: 0; right: 0; bottom: 0; } .hxnper .xnh { width: 100%; } .hxnper .xnh .img { width: 100%; padding-top: 59.63%; } .hxnper .hop { width: 100%; text-align: center; position: absolute; top: 0; left: 0; right: 0; } .hxnper .hop .hie { width: 100%; color: rgba(77, 165, 223, 0.2); line-height: 1.5; font-weight: bold; } .hxnper .hop .hic { width: 100%; color: #fff; line-height: 1.5; font-weight: bold; } .hxnper .him { width: 100%; position: relative; } .hxnper .him .img { width: 100%; padding-top: 59.63%; animation: bigsaml infinite 15s; } @keyframes bigsaml { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .hxnper .him .tem { position: absolute; top: 50%; transform: translateY(-50%); width: calc((350 / 1380) * 100%); } .hxnper .him .tem .tit { width: 100%; color: #fff; font-weight: bold; line-height: 1.5; transition: all ease 0.5s; } .hxnper .him .tem .tix { width: 100%; color: #fff; line-height: 1.5; transition: all ease 0.5s; white-space: nowrap; } .hxnper .him .tem:hover .tit, .hxnper .him .tem:hover .tix { transform: scale(1.1); } .hxnper .him .tlx { left: 0; text-align: right; cursor: pointer; } .hxnper .him .trx { right: 0; text-align: left; cursor: pointer; } .hxnper .hot { position: absolute; bottom: -0.8rem; left: 0; right: 0; width: 100%; max-width: 8rem; margin: 0 auto; } .hxnper .hot .hmg { width: 100%; padding-top: 31.25%; } .hxnper .hot .hlist { position: absolute; top: 0rem; left: 0; right: 0; width: 100%; } .hxnper .hot .hlist .hitm { width: 25%; display: inline-block; vertical-align: top; } .hxnper .hot .hlist .hitm .mm { display: inline-block; vertical-align: middle; width: auto; color: #fff; white-space: nowrap; line-height: 1.5; position: relative; transition: all ease 0.5s; } .hxnper .hot .hlist .hitm .mm:after { content: ' '; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; background-image: url("../images/l1.png"); background-size: 100% 100%; width: 0.06rem; height: 1.93rem; } .hxnper .hot .hlist .hitm:nth-child(2n) { position: relative; top: 0.4rem; } @media (max-width: 800px) { .hxnper .hop .hie { font-size: 16px; } .hxnper .hop .hic { font-size: 14px; } .hxnper .him .tem .tit { font-size: 16px; } .hxnper .him .tem .tix { font-size: 12px; } .hxnper .hot { bottom: -1.5rem; } .hxnper .hot .hlist .hitm .mm { font-size: 12px; } } .holographic { width: 100%; padding-top: 0.4rem; } .holographic .holom { width: 100%; font-size: 0; } .holographic .holom .hol { width: calc((656 / 1380) * 100%); display: inline-block; vertical-align: middle; margin-right: calc((67 / 1380) * 100%); } .holographic .holom .hol .nutop { margin-bottom: 0.2rem; } .holographic .holom .hol .nim { width: 100%; font-size: 0; padding: 0.4rem 0; border-top: solid 1px rgba(255, 255, 255, 0.5); border-bottom: solid 1px rgba(255, 255, 255, 0.5); } .holographic .holom .hol .nim .nic { display: inline-block; vertical-align: middle; width: 0.9rem; height: 0.9rem; margin-right: 0.4rem; } .holographic .holom .hol .nim .nic img { width: 100%; display: block; } .holographic .holom .hol .nim .nom { width: calc(100% - 1.3rem); display: inline-block; vertical-align: middle; } .holographic .holom .hol .nim .nom .nvt { width: 100%; color: #fff; line-height: 1.5; margin-bottom: 0.1rem; } .holographic .holom .hol .nim .nom .nip { width: 100%; color: #fff; line-height: 1.5; } .holographic .holom .hol .nim .nom .nip p { color: #fff; line-height: 1.5; } .holographic .holom .hor { width: calc((656 / 1380) * 100%); display: inline-block; vertical-align: middle; } .holographic .holom .hor .img { width: 100%; padding-top: 64.02%; } .holographic .homlis { width: 100%; font-size: 0; } .holographic .homlis .hiom { display: inline-block; vertical-align: top; width: calc((656 / 1380) * 100%); margin-right: calc((67 / 1380) * 100%); padding: 0.5rem 0; } .holographic .homlis .hiom .nic { display: inline-block; vertical-align: top; width: 0.9rem; height: 0.9rem; margin-right: 0.4rem; } .holographic .homlis .hiom .nic img { width: 100%; display: block; } .holographic .homlis .hiom .nom { width: calc(100% - 1.3rem); display: inline-block; vertical-align: top; } .holographic .homlis .hiom .nom .nvt { width: 100%; color: #fff; line-height: 1.5; margin-bottom: 0.12rem; } .holographic .homlis .hiom .nom .nip { width: 100%; color: #fff; line-height: 1.5; } .holographic .homlis .hiom .nom .nip p { color: #fff; line-height: 1.5; } .holographic .homlis .hiom:nth-child(2n) { margin-right: 0; } @media (max-width: 800px) { .holographic .holom .hol { width: 100%; margin-bottom: 0.3rem; margin-right: 0; } .holographic .holom .hor { width: 100%; } .holographic .homlis .hiom { padding: 0.4rem 0; width: 100%; margin-right: 0; } } .commun { width: 100%; } .commun .cmg { width: 100%; } .commun .cmg .img { width: 100%; padding-top: 35.78%; } .commun .mun { width: 100%; font-size: 0; padding: 0.5rem 0; } .commun .mun .nic { display: inline-block; vertical-align: middle; width: 0.9rem; height: 0.9rem; margin-right: 0.4rem; } .commun .mun .nic img { width: 100%; display: block; } .commun .mun .nom { width: calc(100% - 1.3rem); display: inline-block; vertical-align: middle; } .commun .mun .nom .nvt { width: 100%; color: #fff; line-height: 1.5; margin-bottom: 0.12rem; } .commun .mun .nom .nip { width: 100%; color: #fff; line-height: 1.5; } .commun .mun .nom .nip p { color: #fff; line-height: 1.5; } .commun .homlis { width: 100%; font-size: 0; } .commun .homlis .hiom { display: inline-block; vertical-align: top; width: calc((656 / 1380) * 100%); margin-right: calc((67 / 1380) * 100%); padding: 0.5rem 0; } .commun .homlis .hiom .nic { display: inline-block; vertical-align: top; width: 0.9rem; height: 0.9rem; margin-right: 0.4rem; } .commun .homlis .hiom .nic img { width: 100%; display: block; } .commun .homlis .hiom .nom { width: calc(100% - 1.3rem); display: inline-block; vertical-align: top; } .commun .homlis .hiom .nom .nvt { width: 100%; color: #fff; line-height: 1.5; margin-bottom: 0.12rem; } .commun .homlis .hiom .nom .nip { width: 100%; color: #fff; line-height: 1.5; } .commun .homlis .hiom .nom .nip p { color: #fff; line-height: 1.5; } .commun .homlis .hiom:nth-child(2n) { margin-right: 0; } .commun .homlis .hiom:nth-child(2n+1) { transition-delay: 0.2s; } .commun .homlis .hiom:nth-child(2n+2) { transition-delay: 0.3s; } .commun .comper { width: 100%; margin-top: 0.4rem; padding-bottom: 0.8rem; position: relative; } .commun .comper .swiper-slide { font-size: 0; } .commun .comper .comsd { padding-top: 0.3rem; display: inline-block; vertical-align: top; width: calc((310 / 1380) * 100%); margin-right: calc((46 / 1380) * 100%); } .commun .comper .comsd .sic { width: 100%; font-size: 0; } .commun .comper .comsd .sic span { display: inline-block; vertical-align: middle; width: 0.92rem; } .commun .comper .comsd .sic span img { width: 100%; display: block; } .commun .comper .comsd .sif { width: 100%; color: #fff; line-height: 1.5; margin: 0.2rem 0; } .commun .comper .comsd .pinps { width: 100%; color: #fff; line-height: 1.5; } .commun .comper .comsd .pinps p { color: #fff; line-height: 1.5; } .commun .comper .comsd:nth-child(4n) { margin-right: 0; } .commun .comper .comsd:nth-child(4n+1) { transition-delay: 0.2s; } .commun .comper .comsd:nth-child(4n+2) { transition-delay: 0.3s; } .commun .comper .comsd:nth-child(4n+3) { transition-delay: 0.4s; } .commun .comper .comsd:nth-child(4n+4) { transition-delay: 0.5s; } @media (max-width: 800px) { .commun .comper .comsd{ width: 48%; margin-right: 4%; } .commun .comper .comsd:nth-child(2n){margin-right: 0;} } .commun .comper .btn { position: absolute; z-index: 3; width: 0.6rem; height: 0.6rem; border-radius: 50%; top: 30%; cursor: pointer; border: solid 1px #fff; transform: translateY(-50%); } .commun .comper .btn img { width: 100%; display: block; } .commun .comper .btn:hover { background-color: #ff7611; border: solid 1px #ff7611; } .commun .comper .bl { left: -0.8rem; } .commun .comper .br { right: -0.8rem; } .commun.rad .nutop { display: flex; align-items: center; justify-content: space-between; } .commun.rad .nutop .nul { width: auto; display: inline-block; vertical-align: middle; } .commun.rad .nutop .nur { width: auto; display: inline-block; vertical-align: middle; font-size: 0; text-align: right; } .commun.rad .nutop .nur .nurm { display: inline-block; vertical-align: middle; width: 2.21rem; position: relative; } .commun.rad .nutop .nur .nurm .img { width: 100%; padding-top: 84.54%; } .commun.rad .nutop .nur .nurm .pnx { width: 1.58rem; height: 1.58rem; border-radius: 50%; background-color: #ff7611; position: absolute; top: 0.08rem; right: 0.08rem; display: flex; flex-wrap: wrap; align-content: center; text-align: center; justify-content: center; } .commun.rad .nutop .nur .nurm .pnx .pe { width: 100%; color: #fff; } .commun.rad .nutop .nur .nurm .pnx .pe span { display: inline-block; color: #fff; } .commun.rad .nutop .nur .nurm .pnx .pp { width: 100%; color: #fff; line-height: 1.5; } .commun.rad .nutop .nur .nurm + .nurm { margin-left: -0.4rem; } @media (max-width: 1400px) { .commun .comper .bl { left: -0.3rem; } .commun .comper .br { right: -0.3rem; } } @media (max-width: 800px) { .commun .comper .swiper-container { width: calc(100% - 1rem); margin: 0 auto; } .commun .comper .bl { left: 0rem; } .commun .comper .br { right: 0rem; } .commun .homlis .hiom { padding: 0.4rem 0; width: 100%; margin-right: 0; } } .shares { width: 100%; padding: 1.3rem 0 2.4rem; } .shares .sih { width: 100%; color: #00a9ce; line-height: 1.5; margin-bottom: 0.25rem; } .shares .sinp { width: 100%; color: #222; line-height: 1.5; } .shares .sinp p { color: #222; line-height: 1.5; } .smp { width: 100%; } .smp .pmg { width: 100%; padding-top: 37.5%; } .Ecological { width: 100%; font-size: 0; padding: 1.2rem 0; display: flex; flex-wrap: wrap; } .Ecological .ecl { width: calc((960 / 1920) * 100%); display: inline-block; vertical-align: middle; padding-left: calc((270 / 1920) * 100%); padding-right: calc((140 / 1920) * 100%); } .Ecological .ecl .eclom { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-content: space-between; } .Ecological .ecl .pinp { width: 100%; color: #222; line-height: 1.5; } .Ecological .ecl .pinp p { color: #222; line-height: 1.5; } .Ecological .ecl .eob { width: 100%; font-size: 0; margin-top: 0.4rem; } .Ecological .ecl .eob .btn { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; border-radius: 50%; cursor: pointer; border: solid 1px #ddd; } .Ecological .ecl .eob .btn img { width: 100%; display: block; } .Ecological .ecl .eob .btn img:first-child { display: block; } .Ecological .ecl .eob .btn img:last-child { display: none; } .Ecological .ecl .eob .btn:hover { border: solid 1px #0ac4cf; background-color: #0ac4cf; } .Ecological .ecl .eob .btn:hover img:first-child { display: none; } .Ecological .ecl .eob .btn:hover img:last-child { display: block; } .Ecological .ecl .eob .btn + .btn { margin-left: 0.3rem; } .Ecological .ecr { width: calc((960 / 1920) * 100%); display: inline-block; vertical-align: middle; } .Ecological .ecr .ecrper { width: 100%; } .Ecological .ecr .ecrper .swiper-slide { width: 100%; } .Ecological .ecr .ecrper .swiper-slide .img { width: 100%; padding-top: 63.89%; } @media (max-width: 1400px) { .Ecological .ecl { padding-left: 3%; } } @media (max-width: 800px) { .Ecological { display: flex; flex-wrap: wrap; flex-direction: column-reverse; padding: 0; } .Ecological .ecl { width: 100%; padding: 0.4rem; } .Ecological .ecr { width: 100%; margin-bottom: 0.3rem; } } .history { width: 100%; padding: 1.4rem 0 1rem; position: relative; overflow: hidden; } .history .w1380 { z-index: 3; } .history .courper { width: 100%; position: relative; z-index: 4; } .history .courper .swiper-container { height: 100vh; position: relative; padding-top: 1.8rem; } .history .courper:after { content: ' '; top: 0.5rem; width: 100%; height: 1px; position: absolute; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.2); } .history .courper .swiper-slide { width: 100%; text-align: left; height: auto; float: left; } .history .courper .swiper-slide .tops { position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%); } .history .courper .swiper-slide .tops .tcon { width: 0.55rem; height: 0.74rem; display: block; position: relative; z-index: 28; border-radius: 50%; cursor: pointer; animation: pulse 1.5s infinite; } .history .courper .swiper-slide .tops .text { width: 100%; text-align: center; line-height: 1.5; position: absolute; top: 1.4rem; left: 50%; z-index: -1; opacity: 0; width: 8rem; margin-left: -4rem; transition: all ease .5s; text-align: center; } .history .courper .swiper-slide .tops .text .stage { width: 100%; color: #333; line-height: 1.5; font-weight: 400; text-align: center; } .history .courper .swiper-slide .tops .text .intro { width: 100%; color: #333; line-height: 1.5; } .history .courper .swiper-slide .tops:before { content: ' '; position: fixed; top: 0; left: 0; z-index: -1; opacity: 0; transition: all ease .3s; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); } .history .courper .swiper-slide .swm { display: inline-block; vertical-align: middle; width: 50%; position: relative; width: 100%; } .history .courper .swiper-slide .swm .year { width: 100%; color: #333; font-weight: bold; line-height: 1.5; padding: 0.1rem 0.4rem; text-align: right; } .history .courper .swiper-slide .swm .line { width: 100%; font-size: 0; } .history .courper .swiper-slide .swm .line span { width: 100%; display: block; background-color: rgba(0, 0, 0, 0.2); height: 1px; } .history .courper .swiper-slide .swm .imgs { width: 100%; font-size: 0; position: absolute; left: 0; top: 100%; } .history .courper .swiper-slide .swm .imgs .mg { display: inline-block; vertical-align: middle; width: calc((480 / 686) * 100%); } .history .courper .swiper-slide .swm .imgs .mg .img { width: 100%; padding-top: 64.16%; margin: 0.25rem 0; } .history .courper .swiper-slide .swm .imgs .tinp { width: 100%; color: #222; line-height: 1.5; height: 3em; } .history .courper .swiper-slide .swm .imgs .tinp p { color: #222; line-height: 1.5; } .history .courper .swiper-slide:after { content: ' '; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; transition: all ease .3s; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); } .history .courper .swiper-slide.bg:after { content: ' '; position: absolute; top: 0; left: 0; z-index: 1; opacity: 1; transition: all ease .3s; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); } .history .courper .swiper-slide.bg .swm .imgs:after { content: ' '; position: absolute; top: 0; left: 0; z-index: 1; transition: all ease .3s; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); } .history .courper .swiper-slide.show .tops { z-index: 388; } .history .courper .swiper-slide.show .tops .tcon { z-index: 300; } .history .courper .swiper-slide.show .tops .text { opacity: 1; z-index: 18; } .history .courper .swiper-slide.show .tops:after { opacity: 1; z-index: 8; } .history .courper .swiper-slide.show:after { content: ' '; position: absolute; top: 0; left: 0; opacity: 1; z-index: 1; transition: all ease .3s; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); } .history .courper .swiper-slide.show .swm .imgs:after { content: ' '; position: absolute; top: 0; left: 0; z-index: 1; opacity: 1; transition: all ease 0.3s; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); } .history .courper .swiper-slide:nth-child(2n) { text-align: right; } .history .courper .swiper-slide:nth-child(2n) .swm .year { text-align: left; } .history .courper .swiper-slide:nth-child(2n) .swm .imgs { text-align: right; } .history .courper .swiper-slide:nth-child(2n) .swm .imgs .tinp { text-align: left; } .history .courper .swiper-slide:nth-child(2n+2) { padding-bottom: 5rem; } .history .courper .swiper-slide:last-child { padding-bottom: 6.5rem; } @keyframes pulse { 0% { transform: scale(0.9); } 70% { transform: scale(1); box-shadow: 0 0 0 2em rgba(197, 34, 39, 0); } to { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(197, 34, 39, 0); } } .history .courper .btns { position: absolute; z-index: 10; right: calc((260 / 1920) * 100%); top: 50%; transform: translateY(-50%); } .history .courper .btns .btn { display: block; width: 0.6rem; height: 0.6rem; cursor: pointer; margin: 0.1rem 0; transform: rotate(90deg); } .history .courper .btns .btn img { width: 100%; display: block; } .history .courper .btns .btn img:first-child { display: block; } .history .courper .btns .btn img:last-child { display: none; } .history .courper .btns .btn:hover img:first-child { display: none; } .history .courper .btns .btn:hover img:last-child { display: block; } .history .bgox { width: 100%; position: absolute; z-index: 2; width: 100%; height: 4rem; left: 0; right: 0; bottom: 0; } .history .topper { width: 100%; position: relative; } .history .topper .swiper-slide { width: 100%; font-size: 0; } .history .topper .swiper-slide .pmg { display: inline-block; vertical-align: middle; width: 4.8rem; } .history .topper .swiper-slide .pmg .img { width: 100%; padding-top: 66.66%; } .history .topper .swiper-slide .comp { display: inline-block; vertical-align: middle; width: calc(100% - 4.8rem); padding: 0 1.2rem 0 1rem; } .history .topper .swiper-slide .comp .cit { width: 100%; color: #0ac4cf; line-height: 1.3; } .history .topper .swiper-slide .comp .cinp { width: 100%; color: #222; line-height: 1.6; } .history .topper .swiper-slide .comp .cinp p { color: #222; line-height: 1.6; } .history .topper .rtns { position: absolute; z-index: 4; right: 0; top: 50%; transform: translateY(-50%); width: 1rem; } .history .topper .rtns .rtn { display: block; width: 0.6rem; height: 0.6rem; margin: 0 auto; border-radius: 50%; border: solid 1px #fff; cursor: pointer; } .history .topper .rtns .rtn img { width: 100%; display: block; } .history .topper .rtns .rtn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .history .topper .rtns .rtn + .rtn { margin-top: 0.2rem; } .history .botper { width: 100%; position: relative; margin-top: 0.6rem; } .history .botper:after { content: ' '; position: absolute; width: 100%; height: 1px; top: 50%; transform: translateY(-50%); background-color: rgba(34, 34, 34, 0.1); left: 0; right: 0; } .history .botper .swiper-slide { width: 100%; position: relative; padding: 50px 0; cursor: pointer; } .history .botper .swiper-slide .dian { display: block; width: 20px; height: 20px; margin: 0 auto; border-radius: 50%; background-color: rgba(102, 102, 102, 0.2); position: relative; cursor: pointer; } .history .botper .swiper-slide .dian .em { width: 14px; height: 14px; border-radius: 50%; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #666; } .history .botper .swiper-slide .dian .year { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #222; line-height: 1.5; top: 30px; transition: all ease 0.6s; } .history .botper .swiper-slide.on .dian, .history .botper .swiper-slide:hover .dian { background-color: rgba(10, 196, 207, 0.2); } .history .botper .swiper-slide.on .dian .em, .history .botper .swiper-slide:hover .dian .em { background-color: #0ac4cf; } .history .botper .swiper-slide.on .dian .year, .history .botper .swiper-slide:hover .dian .year { top: -40px; transform: translateX(-50%) scale(1.2); } @media (max-width: 1420px) { .history .courper .btns { right: 3%; } } .history.bg:after { content: ' '; position: absolute; top: 0; left: 0; z-index: 3; opacity: 1; transition: all ease .3s; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); } @media (max-width: 800px) { .history .courper .swiper-slide:nth-child(2n+2) { padding-bottom: 3.5rem; } .history .topper .swiper-slide .pmg { width: 100%; } .history .topper .swiper-slide .comp { width: 100%; padding: 0.3rem 0.2rem; } } .edits { width: 100%; /*padding: 0.6rem 0;*/ } .edits .edomp { width: 100%; /*padding: 0.5rem;*/ color: #666; line-height: 1.8; box-shadow: 0px 6px 16px 1px rgba(112, 112, 112, 0.13); } .edits .edomp p { color: #666; line-height: 1.8; } .edits .edomp img { max-width: 100%; } .industry { width: 100%; padding: 1.2rem 0; } .industry .mitop { margin-bottom: 0.6rem; } .industry .indulis { width: 100%; } .industry .indulis .indum { width: 100%; font-size: 0; padding: 0.2rem 0; border-bottom: solid 1px #ddd; } .industry .indulis .indum .int { width: calc((180 / 1380) * 100%); display: inline-block; vertical-align: top; position: relative; margin-top: 0.1rem; background-color: #ebf0f5; margin-right: calc((20 / 1380) * 100%); } .industry .indulis .indum .int .tim { width: 100%; padding-top: 44.44%; } .industry .indulis .indum .int .tim span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #222; line-height: 1.5; padding: 0.15rem; } .industry .indulis .indum .int:hover span { background-color: #15a4c6; color: #fff; } .industry .indulis .indum .rompers { display: inline-block; vertical-align: top; width: calc((1180 / 1380) * 100%); } .industry .indulis .indum .rompers .pimg { width: calc((180 / 1180) * 100%); display: inline-block; vertical-align: middle; margin-right: calc((19 / 1180) * 100%); overflow: hidden; margin-top: 0.1rem; margin-bottom: 0.1rem; } .industry .indulis .indum .rompers .pimg .img { width: 100%; padding-top: 44.44%; transition: all ease 0.3s; } .industry .indulis .indum .rompers .pimg:nth-child(6n) { margin-right: 0; } .industry .indulis .indum:first-child { border-top: solid 1px #ddd; } @media (max-width: 800px) { .industry .indulis .indum .int { width: 100px; margin-right: 10px; } .industry .indulis .indum .rompers { display: inline-block; vertical-align: middle; width: calc(100% - 110px); } .industry .indulis .indum .rompers .pimg { width: 32%; margin-right: 2%; } .industry .indulis .indum .rompers .pimg:nth-child(3n) { margin-right: 0; } } .Innovation { width: 100%; position: relative; } .Innovation .imglist { width: 100%; position: relative; } .Innovation .imglist .swiper-slide { width: 100%; } .Innovation .imglist .swiper-slide .img { width: 100%; padding-top: 44.79%; } .Innovation .imglist .btns { width: auto; position: absolute; z-index: 3; font-size: 0; bottom: 0.3rem; left: calc((500 / 1920) * 100%); } .Innovation .imglist .btns:after { content: ' '; position: absolute; top: 50%; transform: translateY(-50%); right: 120%; width: 1rem; height: 1px; background-color: #fff; } .Innovation .imglist .btns .btn { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; cursor: pointer; border-radius: 50%; border: solid 1px #fff; } .Innovation .imglist .btns .btn img { width: 100%; display: block; } .Innovation .imglist .btns .btn:hover { border: solid 1px #0ac4cf; background-color: #0ac4cf; } .Innovation .imglist .btns .btn + .btn { margin-left: 0.2rem; } .Innovation .imglist .swiper-pagination { left: calc((270 / 1920) * 100%); bottom: 0.4rem; text-align: left; width: auto; font-size: 0.18rem; color: #fff; } .Innovation .imglist .swiper-pagination-current { font-size: 0.38rem; } .Innovation .iox { position: absolute; top: 1.2rem; left: calc((270 / 1920) * 100%); z-index: 3; } .Innovation .iox .mitop .nel .ft { color: rgba(255, 255, 255, 0.1); } .Innovation .iox .mitop .nel .fm { color: #fff; } .Innovation .box { width: calc((690 / 1920) * 100%); position: absolute; z-index: 3; bottom: 0; right: calc((270 / 1920) * 100%); background-color: #fff; padding: 0.5rem; } .Innovation .box .binp { width: 100%; color: #222; line-height: 1.6; height: 1.3rem; } .Innovation .box .binp p { color: #222; line-height: 1.6; } .Innovation .box .dvom { width: 100%; font-size: 0; border-top: solid 1px #ccc; margin-top: 0.3rem; } .Innovation .box .dvom .dim { display: inline-block; vertical-align: top; width: 50%; position: relative; } .Innovation .box .dvom .dim:after { content: ' '; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: 0.6rem; background-color: #ccc; right: 0; } .Innovation .box .dvom .dim .dt { width: 100%; color: #00a9ce; line-height: 1.5; } .Innovation .box .dvom .dim .dt span { color: #00a9ce; line-height: 1.5; } .Innovation .box .dvom .dim .dx { width: 100%; color: #999; line-height: 1.5; } .Innovation .box .dvom .dim:nth-child(2n) { padding-left: 0.3rem; } .Innovation .box .dvom .dim:nth-child(2n):after { display: none; } @media (max-width: 800px) { .Innovation { padding-top: 0.5rem; } .Innovation .iox { position: relative; top: 0; left: 0; width: 94%; margin: 0 auto 0.3rem; } .Innovation .iox .mitop .nel .ft { color: rgba(34, 34, 34, 0.1); } .Innovation .iox .mitop .nel .fm { color: #222; } .Innovation .imglist { width: 100%; } .Innovation .imglist .btns { right: 3%; left: auto; } .Innovation .imglist .swiper-pagination { left: 3%; } .Innovation .box { width: 100%; position: relative; right: 0; } .Innovation .box .binp { height: auto; } .Innovation .box .dvom .dim { padding-top: 0.2rem; padding-bottom: 0.2rem; } } .business { width: 100%; padding: 1.2rem 0 0rem; } .business .maps { width: 100%; position: relative; margin-top: 0.6rem; } .business .maps .img { width: 100%; padding-top: 57.14%; } .business .maps .itemlis { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: block; } .business .maps .itemlis .item { position: absolute; cursor: pointer; } .business .maps .itemlis .item .cms { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #222; white-space: nowrap; text-shadow: #fff 0px 0px 3px; } .business .internationals { width: 100%; display: flex; flex-wrap: wrap; position: relative; top: -1.2rem; z-index: 4; } .business .internationals .intem { width: 50%; display: inline-block; vertical-align: top; padding: 0.4rem; background-color: #ebf0f5; } .business .internationals .intem .ti { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.35rem; } .business .internationals .intem .invlis { width: 100%; font-size: 0; } .business .internationals .intem .invlis .dim { display: inline-block; vertical-align: top; width: 33.3%; position: relative; padding-left: 0.3rem; } .business .internationals .intem .invlis .dim:after { content: ' '; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: 0.6rem; background-color: #ccc; right: 0; } .business .internationals .intem .invlis .dim .dt { width: 100%; color: #00a9ce; line-height: 1.5; } .business .internationals .intem .invlis .dim .dt span { color: #00a9ce; line-height: 1.5; } .business .internationals .intem .invlis .dim .dx { width: 100%; color: #999; line-height: 1.5; } .business .internationals .intem .invlis .dim:nth-child(3n):after { display: none; } .business .internationals .intem .invlis .dim:nth-child(3n+1) { padding-left: 0rem; } .business .internationals .intem .inmp { width: 100%; color: #222; line-height: 1.5; } .business .internationals .intem .inmp p { color: #222; line-height: 1.5; } .business .internationals .intem.hover { background-color: #00a9ce; } .business .internationals .intem.hover .ti { color: #fff; } .business .internationals .intem.hover .inmp { color: #fff; } .business .internationals .intem.hover .inmp p { color: #fff; } @media (max-width: 800px) { .business { padding: 0.5rem 0; } .business .internationals { top: 0; } .business .internationals .intem { width: 100%; } } .smart { width: 100%; height: 100vh; position: relative; display: flex; flex-wrap: wrap; overflow: hidden; } .smart .sel { width: calc((1100 / 1920) * 100%); position: relative; } .smart .sel .selper { width: 100%; height: 100%; } .smart .sel .selper .swiper-container { height: 100%; } .smart .sel .selper .swiper-slide { width: 100%; height: 100%; } .smart .sel .selper .swiper-slide .img { width: 100%; height: 100vh; display: block; } .smart .sel .snav { width: 100%; position: absolute; z-index: 3; top: 0; left: 0; right: 0; background-color: #8695a3; } .smart .sel .snav .swiper-slide { width: 100%; text-align: center; color: #fff; line-height: 3; cursor: pointer; position: relative; } .smart .sel .snav .swiper-slide:after { content: ' '; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; background-color: rgba(255, 255, 255, 0.5); height: 0.35rem; } .smart .sel .snav .swiper-slide.on { background-color: #00a9ce; } .smart .sel .snav .swiper-slide.on:after { display: none; } .smart .ser { /* display: flex; */ /* flex-wrap: wrap; */ /* align-content: center; */ width: calc((819 / 1920) * 100%); padding: 1rem calc((160 / 1920) * 100%) 1rem 0.9rem; } .smart .ser .serom { width: 100%; display: none; } .smart .ser .serom.on { display: block; } .smart .ser .sinp { width: 100%; color: #222; line-height: 1.6; } .smart .ser .sinp p { color: #222; line-height: 1.6; } .smart .ser .more { width: 100%; font-size: 0; margin-top: 0.6rem; } .smart .ser .more a { display: inline-block; vertical-align: middle; padding: 0 0.5rem; width: auto; line-height: 3.5; color: #fff; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); background-color: #00a9ce; border-radius: 1.75em; } .smart .ser .more a i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; margin-left: 0.2rem; position: relative; top: -0.02rem; } .smart .ser .more a i img { width: 100%; display: block; } .smart .ser .sob { width: 100%; margin-top: 0.3rem; } .smart .ser .sob .img { width: 100%; max-width: 5.8rem; padding-top: 53.22%; } @media (max-width: 800px) { .smart { height: auto; } .smart .sel { width: 100%; } .smart .sel .selper .swiper-slide .img { height: auto; padding-top: 87.27%; } .smart .ser { width: 100%; padding: 0.5rem 0.4rem; } } .safety { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; align-items: center; /* justify-content: space-between; */ /* padding-bottom: 1.5rem; */ } .safety .sal { display: inline-block; vertical-align: top; width: 450px; width: calc((550 / 1380) * 100%); margin-right: 1rem; margin-bottom: 20px; } .safety .sal .sinp { width: 100%; color: #fff; line-height: 1.5; } .safety .sal .sinp p { color: #fff; line-height: 1.5; } .safety .sal .more { width: 100%; font-size: 0; margin-top: 0.7rem; } .safety .sal .more a { display: inline-block; vertical-align: middle; width: auto; padding: 0 0.5rem; color: #222; line-height: 3; border-radius: 1.5em; background-color: #fff; } .safety .sal .more a:hover { background-color: #00a9ce; color: #fff; } .safety .sar { display: inline-block; vertical-align: top; width: 550px; width: calc((550 / 1380) * 100%); font-size: 0; margin-right: 0.5rem; } .safety .sar .swiper-slide { width: 100%; height: auto; font-size: 0; } .safety .sar .seatm { display: inline-block; vertical-align: top; width: calc((260 / 550) * 100%); margin-right: calc((29 / 550) * 100%); margin-bottom: 0.3rem; position: relative; } .safety .sar .seatm a { width: 100%; display: block; } .safety .sar .seatm .num { position: absolute; z-index: 4; top: 0.2rem; left: 0.2rem; color: rgba(255, 255, 255, 0.5); line-height: 1.5; } .safety .sar .seatm .sox { width: 100%; position: relative; } .safety .sar .seatm .sox .sim { width: 100%; padding-top: 55.76%; border: solid 1px #fff; } .safety .sar .seatm .sox .mid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0.1rem; } .safety .sar .seatm .sox .mid span { display: inline-block; vertical-align: middle; color: #fff; line-height: 1.5; } .safety .sar .seatm .sox .mid span i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; margin-left: 0.1rem; width: 0; margin-left: 0; position: relative; top: -0.02rem; transition: all ease 0.4s; } .safety .sar .seatm .sox .mid span i img { width: 100%; display: block; } .safety .sar .seatm:hover .sox .sim { background-color: #00a8ce; border: solid 1px #00a8ce; } .safety .sar .seatm:hover .sox .mid span i { width: 0.2rem; margin-left: 0.1rem; } .safety .sar .seatm:nth-child(2n) { margin-right: 0; } .safety .sar .seatm:nth-child(2n+1) { transition-delay: 0.2s; } .safety .sar .seatm:nth-child(2n+2) { transition-delay: 0.3s; } @media (max-width: 800px) { .safety { padding: 0.5rem 0; } .safety .sal { width: 100%; } .safety .sar { width: 100%; margin-top: 0.5rem; } } .rightnav { position: fixed; z-index: 20; right: 0.6rem; top: 50%; transform: translateY(-50%); } .rightnav .retm { display: block; margin: 0.2rem 0; cursor: pointer; } .rightnav .retm .com .cys { display: block; width: 6px; height: 6px; border-radius: 50%; margin: 2px auto 2px; background-color: #fff; } .rightnav .retm .com .shu { display: block; height: 17px; width: 6px; border-radius: 3px; background-color: #fff; margin: 2px auto; } .rightnav .retm .xi { width: 100%; text-align: center; color: #fff; line-height: 1.5; height: 0; overflow: hidden; transition: all ease 0.3s; position: relative; } .rightnav .retm .xi span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; line-height: 1.5; width: 10em; } .rightnav .retm.on .xi { height: 1.5em; margin-top: 0.1rem; overflow: visible; } .rightnav .retm.gray .com .cys, .rightnav .retm.gray .com .shu { background-color: #ccc; } .rightnav .re1.on .com .cys, .rightnav .re1.on .com .shu { background-color: #e27339; } .rightnav .re1.on .xi span { color: #e27339; } .rightnav .re2.on .com .cys, .rightnav .re2.on .com .shu { background-color: #df2727; } .rightnav .re2.on .xi span { color: #df2727; } .rightnav .re3.on .com .cys, .rightnav .re3.on .com .shu { background-color: #086db0; } .rightnav .re3.on .xi span { color: #086db0; } .rightnav .re4.on .com .cys, .rightnav .re4.on .com .shu { background-color: #093c49; } .rightnav .re4.on .xi span { color: #093c49; } .rightnav .re5.on .com .cys, .rightnav .re5.on .com .shu { background-color: #086db0; } .rightnav .re5.on .xi span { color: #086db0; } .rightnav .re6.on .com .cys, .rightnav .re6.on .com .shu { background-color: #e27339; } .rightnav .re6.on .xi span { color: #e27339; } @media (max-width: 800px) { .rightnav { display: none; } } header { width: 100%; position: fixed; z-index: 20; top: 0; left: 0; right: 0; background-color: transparent; transition: all ease 0.6s; } header .w1800 { position: initial; } header .hop { width: 100%; display: flex; align-items: center; } header .logo { display: inline-block; vertical-align: middle; width: 2.33rem; } header .logo a, header .logo img { width: 100%; display: block; } header .logo img:first-child { display: block; } header .logo img:last-child { display: none; } header nav { flex: 1; text-align: left; padding-left: 0.6rem; } header nav .natem { width: auto; display: inline-block; vertical-align: middle; position: relative; } header nav .natem .nas { width: auto; display: inline-block; position: relative; } header nav .natem .nas a { display: inline-block; line-height: 3.5; line-height: 1rem; color: #fff; position: relative; padding: 0 0.2rem; } header nav .natem .nas:after { content: ' '; position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; width: 100%; background-color: #15a4c6; height: 2px; display: none; } header nav .natem .navuls { width: 2rem; position: absolute; z-index: 101; left: 50%; top: 100%; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.95); /* display: none; */ display: block; opacity: 0; visibility: hidden; z-index: -110; } header nav .natem.ons .navuls{ visibility: visible; opacity: 1; z-index: 101; transition: all ease 0.3s; transition-delay: 0.3s; } 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.2rem; 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: #00a9ce; line-height: 2.5; padding: 0 0.2rem; } header nav .natem .navuls ul li:hover .ns { background-color: #00a9ce; 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; } header nav .natem .navuls ul li.has-the.show:after { content: "-"; } header nav .natem .navul { width: 100vw; position: absolute; z-index: 101; left: 0; top: 100%; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.09); padding: 0.2rem 0; display: block; opacity: 0; visibility: hidden; z-index: -110; } header nav .natem.long.onc .navul{ visibility: visible; opacity: 1; z-index: 101; transition: all ease 0.3s; transition-delay: 0.3s; } header nav .natem .navul .navcon { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; } header nav .natem .navul .nvm { width: 100%; flex: 1; } header nav .natem .navul .nvm .njm { width: 100%; display: block; position: relative; border-bottom: solid 1px #eee; margin-bottom: 0.2rem; } header nav .natem .navul .nvm .njm .ns { width: 100%; display: inline-block; vertical-align: middle; line-height: 2.5; color: #333; font-weight: bold; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; } header nav .natem .navul .nvm .njm .ns:hover { color: #15a4c6; } header nav .natem .navul .nvm .theuls { width: 100%; font-size: 0; } header nav .natem .navul .nvm .theuls li { width: 100%; display: inline-block; vertical-align: top; } header nav .natem .navul .nvm .theuls li a { display: inline-block; vertical-align: top; width: auto; color: #535353; line-height: 2; margin-bottom: 0.1rem; } header nav .natem .navul .nvm .theuls li a:hover { color: #15a4c6; } header nav .natem .navul .nvm + .nvm { margin-left: 0.3rem; } header nav .natem.on .nas a { color: #00a9ce; } header nav .natem.on .nas:after { display: block; } header nav .natem:hover .nas a { color: #00a9ce; } header nav .natem:hover .nas:after { display: block; } header .rav { display: inline-block; vertical-align: middle; margin-left: 0.2rem; } header .rav .usem { display: inline-block; vertical-align: middle; width: auto; font-size: 0; margin: 0 0.2rem; } header .rav .usem a { width: 100%; display: block; } header .rav .usem .ic { display: inline-block; vertical-align: middle; width: 0.24rem; height: 0.24rem; margin-right: 0.1rem; } header .rav .usem .ic img { width: 100%; display: block; } header .rav .usem .ic img:first-child { display: block; } header .rav .usem .ic img:last-child { display: none; } header .rav .usem .cm { display: inline-block; vertical-align: middle; width: calc(100% - 0.34rem); color: #fff; white-space: nowrap; line-height: 1.5; } header .rav .ss { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; cursor: pointer; } header .rav .ss img { width: 100%; display: block; } header .rav .ss img:first-child { display: block; } header .rav .ss img:last-child { display: none; } header .rav .menu { display: inline-block; vertical-align: middle; display: none; } header .rav .menu .c1 { display: block; } header .rav .menu .c2 { display: none; } header .rav .stvm { display: inline-block; vertical-align: middle; position: relative; } header .rav .stvm .input { display: inline-block; vertical-align: middle; width: 0; border-bottom: solid 1px #ddd; transition: all ease 0.3s; overflow: hidden; } header .rav .stvm .input input { width: 100%; display: block; border: none; background-color: transparent; line-height: 2.5; color: #fff; } header .rav .stvm .input input[type=text] { width: calc(100% - 2.5em); display: inline-block; vertical-align: middle; border: none; background-color: transparent; line-height: 2.5; color: #fff; } header .rav .stvm .input input[type=submit] { width: 2.5em; display: inline-block; vertical-align: middle; text-align: center; color: #fff; line-height: 2.5; height: 2.5em; cursor: pointer; } header .rav .stvm .clost { display: inline-block; vertical-align: middle; width: 0.24rem; height: 0.24rem; width: 0; cursor: pointer; transition: all ease 0.3s; } header .rav .stvm .clost img { width: 100%; display: block; } header .rav .stvm .clost img:first-child { display: block; } header .rav .stvm .clost img:last-child { display: none; } header .rav .stvm .tli { width: 100%; padding: 0.1rem 0; position: absolute; width: 100%; left: 0; background-color: #fff; border-bottom-left-radius: 0.2rem; border-bottom-right-radius: 0.2rem; display: none; } header .rav .stvm .tli ul { width: 100%; display: block; } header .rav .stvm .tli li { width: 100%; padding: 0 0.2rem; cursor: pointer; color: #666; line-height: 2; } header .rav .stvm .tli li a { width: 100%; color: #666; line-height: 2; display: block; } header .rav .stvm .tli li a:hover { color: #00a9ce; } header .rav .stvm.long .input { width: 2rem; font-size: 0; } header .rav .stvm.long .input input[type=text] { padding: 0 0.15rem; } header .rav .stvm.long .clost { display: inline-block; } header .rav .stvm.long .clost { width: 0.24rem; } header .black { display: none; width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 140; cursor: pointer; } header .sear { width: 100%; font-size: 0; padding: 0.3rem 0.3rem; border-top: solid 1px #f6f6f6; display: none; position: fixed; right: 0; left: 0; z-index: 1111; background: #fff; } header .sear form { width: 100%; font-size: 0; margin: 0 auto; max-width: 10rem; display: block; } header .sear .input { width: calc(100% - 1rem); display: inline-block; vertical-align: middle; font-size: 0; background: #222; } header .sear .input input { width: 100%; display: inline-block; vertical-align: middle; background: #fff; background: #222; color: #666666; font-size: calc(12px - 0.12rem + 0.16rem); line-height: 2.5; height: 2.5em; padding: 0 0.2rem; border: none; } header .sear .submxt { width: 1rem; display: inline-block; vertical-align: middle; font-size: 0; } header .sear .submxt input { width: 100%; display: inline-block; vertical-align: middle; background: #00a9ce; color: #fff; font-size: calc(12px - 0.12rem + 0.16rem); line-height: 2.5; padding: 0 0.2rem; border: none; text-align: center; cursor: pointer; } header.white { background-color: #fff; } header.white .logo img:first-child { display: none; } header.white .logo img:last-child { display: block; } header.white .rav .usem .ic img:first-child { display: none; } header.white .rav .usem .ic img:last-child { display: block; } header.white .rav .usem .cm { color: #222; } header.white .rav .ss img:first-child { display: none; } header.white .rav .ss img:last-child { display: block; } header.white .rav .menu .c1 { display: none; } header.white .rav .menu .c2 { display: block; } header.white .rav .stvm .input input[type=submit] { color: #333; } header.white .rav .stvm .clost img:first-child { display: none; } header.white .rav .stvm .clost img:last-child { display: block; } header.white nav .natem .nas a { color: #222; } header.white nav .natem.on .nas a { color: #15a4c6; } header.nofixed { transform: translateY(-100%); } @media (max-width: 1100px) { header nav { padding-left: 0.3rem; } header nav .natem .nas a { padding: 0 0.1rem; } } @media (max-width: 900px) { header .w1800 { z-index: 150; } header .hop { height: 0.9rem; } header nav { width: 100%; position: fixed; right: 0; top: 0.9rem; left: auto; height: calc(100vh - 0.9rem); background-color: #fff; margin-right: 0; padding-top: 10px; padding-bottom: 10px; overflow: auto; z-index: 500; transform: translate(100%, 0); transition: transform .3s; padding-left: 0.1rem; padding: 0.1rem; display: block; text-align: left; } header nav .natem { display: inline-block; vertical-align: middle; position: relative; width: auto; width: 100%; margin-bottom: 0.2rem; } header nav .natem .nas { width: auto; display: inline-block; width: 100%; border-bottom: solid 1px #d4d4d4; padding: 0.1rem 0 0; } header nav .natem .nas a { width: auto; display: inline-block; vertical-align: middle; line-height: 2.5; color: #333; font-weight: bold; padding: 0 0.3rem; position: relative; } header nav .natem .navuls { width: 100%; position: relative; z-index: 101; left: 0%; top: 0%; transform: translateX(0%); display: none; visibility: visible; opacity: 1; transition: all ease 0s; transition-delay: 0s; } header nav .natem .navuls ul { width: 100%; padding: 0.1rem 0.3rem; } header nav .natem .navuls ul li { width: 100%; display: block; position: relative; } header nav .natem .navuls ul li .ns { width: 100%; 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: #00a9ce; } header nav .natem .navuls ul li .ns:after { content: ' '; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); width: 7px; height: 12px; background-image: url("../images/r.png"); background-size: 100% 100%; } header nav .natem .navuls ul li .theul li .xn { color: #333; } header nav .natem .navuls ul li .theul li:hover .xn { background-color: transparent; color: #149fc2; } header nav .natem .navuls ul li + li { border-top: solid 1px #eee; } header nav .natem .navuls ul li:hover .ns { background-color: transparent; color: #149fc2; } header nav .natem .navuls ul li.has-the:after { content: " "; display: inline-block; width: 10px; height: 10px; line-height: 10px; text-align: center; position: absolute; background: none; right: 0.15rem; left: auto; transform: translateX(0); top: 0.4rem; font-size: 20px; color: #333; border: none; background-image: url("../images/x1.png"); background-size: 100% 100%; transition: all ease 0.5s; } header nav .natem .navuls ul li.has-the.show:after { content: " "; transform: translateX(0) rotate(180deg); } header nav .natem.on .nas:after { display: none; } header nav .natem:hover .nas:after { display: none; } header nav .natem.has-nav:after { content: " "; display: inline-block; width: 10px; height: 10px; line-height: 10px; text-align: center; position: absolute; background: none; right: 0.3rem; left: auto; transform: translateX(0); top: 0.3rem; font-size: 20px; color: #333; border: none; background-image: url("../images/x1.png"); background-size: 100% 100%; transition: all ease 0.5s; } header nav .natem.has-nav.show:after { content: " "; transform: translateX(0) rotate(180deg); } header .rav { width: calc(100% - 1.62rem); text-align: right; } header .rav .menu { display: inline-block; vertical-align: middle; width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; position: relative; } header .rav .menu .c1, header .rav .menu .c2 { opacity: 1; } header .rav .menu .clona { width: 100%; height: 100%; display: none; position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; } header .rav .menu .clona img { width: 100%; display: block; } header .rav .menu .clona img:first-child { display: block; } header .rav .menu .clona img:last-child { display: none; } header .rav .ss { display: inline-block; vertical-align: middle; width: 0.3rem; height: 0.3rem; } header .rav .stvm.long { text-align: left; } header .rav .stvm.long .input { width: 2.2rem; } header.menu-state { z-index: 10000; } header.menu-state nav { transform: translate(0, 0); } header.menu-state .rav .menu .c1, header.menu-state .rav .menu .c2 { opacity: 0; } header.menu-state .rav .menu .clona { display: block; } header.white.menu-state .rav .menu .clona img:first-child { display: none; } header.white.menu-state .rav .menu .clona img:last-child { display: block; } } @media (max-width: 450px) { header .rav .usem.coo { display: none; } } .dynamics { width: 100%; } .dynamics .dynam { width: 100%; font-size: 0; } .dynamics .dynam .dyl { display: inline-block; vertical-align: top; width: calc((420 / 1380) * 100%); padding-top: 1.2rem; padding-bottom: 1rem; position: relative; } .dynamics .dynam .dyl .dompc { width: 100%; position: relative; } .dynamics .dynam .dyl .dyt { width: 100%; color: rgba(34, 34, 34, 0.5); line-height: 1.5; margin-bottom: 0.2rem; } .dynamics .dynam .dyl .ddm { width: 100%; margin: 0.2rem 0 0.3rem; } .dynamics .dynam .dyl .dum { width: 100%; color: #8790a1; font-weight: bold; line-height: 1.2; } .dynamics .dynam .dyl .dx { width: 100%; color: rgba(34, 34, 34, 0.5); line-height: 1.5; } .dynamics .dynam .dyl .mes { width: 100%; font-size: 0; } .dynamics .dynam .dyl .mes .xu { display: inline-block; vertical-align: middle; color: #333; line-height: 1.3; } .dynamics .dynam .dyl .mes .rop { display: inline-block; vertical-align: middle; margin: 0 0.1rem; } .dynamics .dynam .dyl .mes .rop .xp { width: 100%; display: block; color: #333; line-height: 1.5; } .dynamics .dynam .dyl .mes .up { display: inline-block; vertical-align: middle; } .dynamics .dynam .dyl .mes .up .contact { display: inline-block; vertical-align: middle; width: 0.06rem; height: 0.2rem; background-color: #333; position: relative; top: 0.03rem; display: none; } .dynamics .dynam .dyl .mes .up .contact:after { content: ' '; width: 0; height: 0; position: absolute; border: solid 0.06rem transparent; left: 50%; transform: translateX(-50%); } .dynamics .dynam .dyl .mes.red .xu { color: #df2727; } .dynamics .dynam .dyl .mes.red .rop .xp { color: #df2727; } .dynamics .dynam .dyl .mes.red .up .contact { top: -0.03rem; background-color: #df2727; display: block; } .dynamics .dynam .dyl .mes.red .up .contact:after { bottom: auto; top: -0.12rem; border: solid 0.06rem transparent; border-bottom-color: #df2727; } .dynamics .dynam .dyl .mes.green .xu { color: #26c40a; } .dynamics .dynam .dyl .mes.green .rop .xp { color: #26c40a; } .dynamics .dynam .dyl .mes.green .up .contact { top: -0.03rem; background-color: #26c40a; display: block; } .dynamics .dynam .dyl .mes.green .up .contact:after { top: auto; bottom: -0.12rem; border: solid 0.06rem transparent; border-top-color: #26c40a; } .dynamics .dynam .dyl .pmg { width: 100%; margin-top: 0.7rem; } .dynamics .dynam .dyl .pmg .pm { width: 100%; padding-top: 124.17%; } .dynamics .dynam .dyr { display: inline-block; vertical-align: top; width: calc((959 / 1380) * 100%); padding-top: 1.2rem; padding-bottom: 1rem; text-align: right; border-left: solid 1px #d3d4d6; } .dynamics .dynam .dyr .dyrom { width: calc((830 / 959) * 100%); display: inline-block; vertical-align: top; text-align: left; } .dynamics .dynam .dyr .dyrom .dyrlis { width: 100%; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom { width: 100%; font-size: 0; border-bottom: solid 1px #ddd; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom a { width: 100%; display: block; padding: 0.2rem 0; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom .day { display: inline-block; vertical-align: middle; width: 0.8rem; width: 70px; background-color: #ebf0f5; padding: 0.1rem 0; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom .day .ym { width: 100%; color: #8790a1; text-align: center; line-height: 1.3; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom .day .yd { width: 100%; color: #8790a1; text-align: center; line-height: 1.5; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom .pix { display: inline-block; vertical-align: middle; width: calc(100% - 70px - 0.6rem); padding: 0 0.2rem; color: #222; line-height: 1.5; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom .rtn { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: solid 1px #ddd; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom .rtn img { width: 100%; display: block; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom .rtn img:first-child { display: block; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom .rtn img:last-child { display: none; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom:hover .day { background-color: #15a4c6; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom:hover .day .ym, .dynamics .dynam .dyr .dyrom .dyrlis .dyom:hover .day .yd { color: #fff; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom:hover .pix { color: #15a4c6; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom:hover .rtn { border: solid 1px #15a4c6; background-color: #15a4c6; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom:hover .rtn img:first-child { display: none; } .dynamics .dynam .dyr .dyrom .dyrlis .dyom:hover .rtn img:last-child { display: block; } .dynamics .dynam .dyr .dyrom .more { width: 100%; font-size: 0; padding-top: 0.5rem; text-align: center; } .dynamics .dynam .dyr .dyrom .more a { display: inline-block; vertical-align: middle; background-color: #00a9ce; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); color: #fff; padding: 0 0.4rem; line-height: 3; border-radius: 1.5em; } .dynamics .dynam .dyr .dyrom .more a i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; position: relative; margin-left: 0.1rem; } .dynamics .dynam .dyr .dyrom .more a i img { width: 100%; display: block; } @media (max-width: 800px) { .dynamics .dynam .dyl { width: 100%; padding: 0.5rem 0; text-align: center; } .dynamics .dynam .dyr { width: 100%; padding: 0rem 0 0.5rem; border-left: none; } .dynamics .dynam .dyr .dyrom { width: 100%; padding-left: 0; } } .roots { width: 100%; padding: 1.2rem 0 0.5rem; background-color: #f4f8fb; } .roots .root { width: 100%; background-color: #fff; padding: 0.8rem 1rem; border-radius: 24px; border-bottom: solid 0.06rem #15a4c6; } .roots .root .rom { width: 100%; /* height: 2rem; */ } .roots .root .rom .rit { width: 100%; color: #222; font-weight: bold; line-height: 1.5; margin-bottom: 0.3rem; } .roots .root .rom .rinp { width: 100%; color: #222; line-height: 1.5; } .roots .root .rom .rinp p { color: #222; line-height: 1.5; } @media (max-width: 800px) { .roots { width: 100%; padding: 0.5rem 0; } .roots .root { padding: 0.4rem; } .roots .root .rom { height: auto; } } .collection { width: 100%; padding: 0.5rem 0; background-color: #f4f8fb; position: relative; } .collection .mitop { width: 100%; margin-bottom: 0.5rem; } .collection .mitop .fx { width: 100%; color: #222; line-height: 1.5; } .collection .collist { width: 100%; font-size: 0; } .collection .collist .colem { width: calc((672 / 1380) * 100%); display: inline-block; vertical-align: top; margin-right: calc((35 / 1380) * 100%); background-color: #fff; border-radius: 0.3rem; margin-bottom: 0.3rem; } .collection .collist .colem a { width: 100%; display: block; padding: 0.6rem 1rem 0.6rem; } .collection .collist .colem .imgs { width: 100%; font-size: 0; text-align: center; overflow: hidden; margin: 0 auto; max-width: calc((340 / 550) * 100%); } .collection .collist .colem .imgs .img { width: 100%; padding-top: 100%; margin: 0 auto 0.3rem; display: block; transition: all ease 0.4s; } .collection .collist .colem .cy { width: 100%; color: #15a4c6; line-height: 1.5; } .collection .collist .colem .ct { width: 100%; color: #222; font-weight: bold; line-height: 1.5; margin: 0.1rem 0 0.3rem; } .collection .collist .colem .more { width: 100%; font-size: 0; } .collection .collist .colem .more span { display: inline-block; vertical-align: middle; background-color: #222; line-height: 3; color: #fff; width: 1.6rem; text-align: center; border-radius: 1.5em; } .collection .collist .colem .more span i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; width: 0; margin-left: 0.12rem; margin-left: 0; transition: all ease 0.4s; } .collection .collist .colem .more span i img { width: 100%; display: block; } .collection .collist .colem:nth-child(2n) { margin-right: 0; } .collection .collist .colem:nth-child(2n+1) { transition-delay: 0.2s; } .collection .collist .colem:nth-child(2n+2) { transition-delay: 0.3s; } .collection .collist .colem:hover .imgs .img { transform: scale(1.1); } .collection .collist .colem:hover .more span { background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); } .collection .collist .colem:hover .more span i { width: 0.2rem; margin-left: 0.12rem; } @media (max-width: 800px) { .collection { width: 100%; } .collection .collist { width: 100%; } .collection .collist .colem a { padding: 0.2rem; } .collection .collist .colem .more span { width: 2rem; } } .advanges { width: 100%; padding: 1.2rem 0 1.2rem; position: relative; overflow: hidden; } .advanges .w1380 { z-index: 4; } .advanges .mitop { margin-bottom: 0.6rem; } .advanges .bgox { width: 100%; position: absolute; z-index: 2; width: 100%; height: 4rem; left: 0; right: 0; bottom: 0; } .advanges .adlist { width: 100%; font-size: 0; position: relative; } .advanges .adlist .advom.auto { width: calc((345 / 1380) * 100%); } .advanges .adlist .advom { display: inline-block; vertical-align: top; padding: 0.15rem; } .advanges .adlist .advom a { width: 100%; display: block; } .advanges .adlist .advom .icon { display: block; width: 1.48rem; height: 1.91rem; margin: 0 auto 0.2rem; } .advanges .adlist .advom .icon img { width: 100%; display: block; } .advanges .adlist .advom .icon img:first-child { display: block; } .advanges .adlist .advom .icon img:last-child { display: none; } .advanges .adlist .advom .ict { width: 100%; text-align: center; line-height: 1.5; color: #131313; } .advanges .adlist .advom:hover .icon img:first-child { display: none; } .advanges .adlist .advom:hover .icon img:last-child { display: block; } .advanges .adlist .advom:nth-child(4n+1) { transition-delay: 0.2s; } .advanges .adlist .advom:nth-child(4n+2) { transition-delay: 0.3s; } .advanges .adlist .advom:nth-child(4n+3) { transition-delay: 0.4s; } .advanges .adlist .advom:nth-child(4n+4) { transition-delay: 0.5s; } .advanges .adlist .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .advanges .adlist .btn img { width: 100%; display: block; } .advanges .adlist .btn img:first-child { display: block; } .advanges .adlist .btn img:last-child { display: none; } .advanges .adlist .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .advanges .adlist .btn:hover img:first-child { display: none; } .advanges .adlist .btn:hover img:last-child { display: block; } .advanges .adlist .bl { left: -0.8rem; } .advanges .adlist .br { right: -0.8rem; } @media (max-width: 1500px) { .advanges .adlist .btn { background-color: #fff; border: solid 1px #fff; } .advanges .adlist .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .advanges .adlist .bl { left: 0rem; } .advanges .adlist .br { right: 0rem; } } @media (max-width: 800px) { .advanges .adlist .advom.auto { width: 50%; } } .Applications { width: 100%; padding: 1.2rem 0; font-size: 0; } .Applications .appl { display: inline-block; vertical-align: middle; width: calc((819 / 1920) * 100%); padding-left: calc((270 / 1920) * 100%); padding-right: 0.6rem; position: relative; z-index: 3; } .Applications .appl .mitop { margin-bottom: 1rem; } .Applications .appl .mitop .fx { width: 100%; color: #222; line-height: 1.5; } .Applications .appl .apms { width: 100%; } .Applications .appl .apms .apm { width: 100%; padding-left: 0.3rem; border-left: solid 1px #a3a6a9; padding: 0.1rem 0 0.15rem 0.3rem; display: none; } .Applications .appl .apms .apm.on { display: block; } .Applications .appl .apms .at { width: 100%; color: #222; line-height: 1.5; } .Applications .appl .apms .ainp { width: 100%; color: #666; line-height: 1.5; } .Applications .appl .apms .ainp p { color: #666; line-height: 1.5; } .Applications .appl .acom { width: 100%; margin: 0.3rem 0 0.6rem; } .Applications .appl .acom .acm { width: 130%; position: relative; z-index: 4; background-color: #00acd0; color: #fff; line-height: 1.5; padding: 0.3rem; display: none; } .Applications .appl .acom .acm p { color: #fff; line-height: 1.5; } .Applications .appl .acom .acm.on { display: block; } .Applications .appl .btns { width: 100%; font-size: 0; } .Applications .appl .btns .btn { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; cursor: pointer; border-radius: 50%; border: solid 1px #ddd; } .Applications .appl .btns .btn img { width: 100%; display: block; } .Applications .appl .btns .btn img:first-child { display: block; } .Applications .appl .btns .btn img:last-child { display: none; } .Applications .appl .btns .btn:hover { border: solid 1px #0ac4cf; background-color: #0ac4cf; } .Applications .appl .btns .btn:hover img:first-child { display: none; } .Applications .appl .btns .btn:hover img:last-child { display: block; } .Applications .appl .btns .btn + .btn { margin-left: 0.2rem; } .Applications .appr { display: inline-block; vertical-align: middle; width: calc((1100 / 1920) * 100%); position: relative; z-index: 2; } .Applications .appr .apprper { width: 100%; } .Applications .appr .apprper .swiper-slide { width: 100%; } .Applications .appr .apprper .swiper-slide .img { width: 100%; padding-top: 63.75%; } @media (max-width: 1400px) { .Applications .appl { padding-left: 3%; } } @media (max-width: 800px) { .Applications { padding: 0.5rem 0 0; } .Applications .appl { width: 100%; } .Applications .appl .mitop { margin-bottom: 0.6rem; } .Applications .appl .acom .acm { width: 100%; } .Applications .appr { width: 100%; margin-top: 0.5rem; } } .contacts { width: 100%; padding: 1.2rem 0 0; } .contacts .contc { width: 100%; } .contacts .contc .tov { z-index: 4; } .contacts .contc .map { width: 100%; position: relative; z-index: 2; top: -1.2rem; } .contacts .contc .map .amp { width: 100%; height: 6.6rem; } .contacts .contc .map .amp .BMap_Marker > div { width: 39px !important; } .contacts .contc .map .mob { position: absolute; bottom: 0; width: 100%; } .contacts .contc .map .code { position: absolute; right: 0; bottom: -0.4rem; background-color: #ffffff; border: solid 1px #cccccc; padding: 0.4rem 0.2rem; text-align: center; } .contacts .contc .map .code .ce { width: 100%; color: #222; line-height: 1.5; } .contacts .contc .map .code .mg { width: 100%; width: 1.2rem; display: block; margin: 0.1rem auto; } .contacts .contc .map .code .mg img { width: 100%; display: block; } .contacts .contc .map .code .cv { width: 100%; color: #222; line-height: 1.5; } .contacts .contc .contlis { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; position: relative; z-index: 3; } .contacts .contc .contlis .contm { width: 50%; background-color: #fff; padding: 0.3rem 0.8rem; border: solid 1px #cccccc; } .contacts .contc .contlis .contm .ctop { width: 100%; font-size: 0; border-bottom: solid 1px #ddd; position: relative; margin-bottom: 0.3rem; } .contacts .contc .contlis .contm .ctop:after { content: ' '; position: absolute; width: 0.4rem; height: 2px; background-color: #15a4c6; bottom: -1px; left: 0; } .contacts .contc .contlis .contm .ctop .ct { display: inline-block; vertical-align: middle; color: #222; line-height: 2.5; } .contacts .contc .contlis .contm .meslis { width: 100%; font-size: 0; } .contacts .contc .contlis .contm .meslis .meson { width: 100%; font-size: 0; padding: 0.1rem 0; } .contacts .contc .contlis .contm .meslis .meson .mic { display: inline-block; vertical-align: middle; width: 0.3rem; height: 0.3rem; width: 30px; height: 30px; margin-right: 0.2rem; } .contacts .contc .contlis .contm .meslis .meson .mic img { width: 100%; display: block; } .contacts .contc .contlis .contm .meslis .meson .com { display: inline-block; vertical-align: middle; width: calc(100% - 0.2rem - 30px); } .contacts .contc .contlis .contm .meslis .meson .com .ct { width: 100%; color: #666; line-height: 1.5; } .contacts .contc .contlis .contm .meslis .meson .com .cx { width: 100%; color: #222; line-height: 1.5; } .contacts .contc .contlis .contm.blue, .contacts .contc .contlis .contm:nth-child(2n) { background-color: #00a9ce; border: solid 1px #00a9ce; } .contacts .contc .contlis .contm.blue .ctop, .contacts .contc .contlis .contm:nth-child(2n) .ctop { border-bottom: solid 1px rgba(255, 255, 255, 0.5); } .contacts .contc .contlis .contm.blue .ctop .ct, .contacts .contc .contlis .contm:nth-child(2n) .ctop .ct { color: #fff; } .contacts .contc .contlis .contm.blue .ctop:after, .contacts .contc .contlis .contm:nth-child(2n) .ctop:after { background-color: #fff; } .contacts .contc .contlis .contm.blue .meslis .meson .com .ct, .contacts .contc .contlis .contm:nth-child(2n) .meslis .meson .com .ct { color: #a7e9f8; } .contacts .contc .contlis .contm.blue .meslis .meson .com .cx, .contacts .contc .contlis .contm:nth-child(2n) .meslis .meson .com .cx { color: #fff; } @media (max-width: 800px) { .contacts { padding-top: 0.5rem; } .contacts .contc .contlis { width: 100%; } .contacts .contc .contlis .contm { width: 100%; padding: 0.3rem; } .contacts .contc .map { top: 0rem; } } .Investor { width: 100%; padding: 0 0 2rem; } .Investor .mitop { margin-bottom: 0.5rem; } .Investor .mitop .nel .fx { width: 100%; color: #222; line-height: 1.5; margin-top: 0.15rem; } .Investor .forms { width: 100%; font-size: 0; } .Investor .forms form { width: 100%; display: block; } .Investor .forms .row { width: 100%; font-size: 0; } .Investor .forms .row .item { display: inline-block; vertical-align: middle; width: calc((438 / 1380) * 100%); margin-right: calc((32 / 1380) * 100%); font-size: 0; margin-bottom: 0.2rem; } .Investor .forms .row .item .im { display: inline-block; vertical-align: middle; color: #666; line-height: 1.5; } .Investor .forms .row .item .label { display: inline-block; vertical-align: middle; width: auto; font-size: 0; position: relative; margin: 0 0.1rem; } .Investor .forms .row .item .label .xm { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 0.1rem; } .Investor .forms .row .item .label .xm img { width: 100%; display: block; } .Investor .forms .row .item .label .xm img:first-child { display: block; } .Investor .forms .row .item .label .xm img:last-child { display: none; } .Investor .forms .row .item .label .lm { display: inline-block; vertical-align: middle; color: #666; line-height: 1.5; } .Investor .forms .row .item .label .ram { position: absolute; width: 100%; height: 100%; display: block; opacity: 0; cursor: pointer; left: 0; top: 0; } .Investor .forms .row .item .label.selected .xm img:first-child { display: none; } .Investor .forms .row .item .label.selected .xm img:last-child { display: block; } .Investor .forms .row .item .input { width: 100%; } .Investor .forms .row .item .input input { width: 100%; display: block; background-color: #ffffff; border-radius: 4px; border: solid 1px #cccccc; padding: 0 0.2rem; height: 3.5em; line-height: 3.5; color: #666; transition: all ease 0.3s; } .Investor .forms .row .item .input.on input { box-shadow: 1px 2px 8px 0px rgba(0, 169, 206, 0.3); border-radius: 4px; border: solid 1px #15a4c6; } .Investor .forms .row .item .chox { width: 100%; font-size: 0; } .Investor .forms .row .item .chox .choxm { display: inline-block; vertical-align: middle; width: 1rem; height: 1rem; position: relative; background-color: #ffffff; border: solid 1px #d2d2d2; line-height: 1rem; font-size: calc(12px - 0.12rem + 0.2rem); text-align: center; margin-right: 0.2rem; margin-bottom: 0.1rem; } .Investor .forms .row .item .chox .choxm div { position: absolute; left: 0; top: 0; width: 100%; height: 1rem; display: flex; align-items: center; text-align: center; justify-content: center; filter: alpha(opacity=0); } .Investor .forms .row .item .chox .choxm input { position: absolute; left: 0; top: 0; width: 100%; height: 1rem; opacity: 0; display: block; filter: alpha(opacity=0); } .Investor .forms .row .item .chox .choxm .c-img { max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .Investor .forms .row .item .chox .choxm .c-delete { width: 0.3rem; height: 0.3rem; line-height: 0.3rem; border-radius: 50%; border: 1px solid #eee; background-color: #fff; text-align: center; position: absolute; right: -0.15rem; top: -0.15rem; z-index: 10; cursor: pointer; box-sizing: border-box; } .Investor .forms .row .item .chox .choxm .uv-x { display: inline-block; vertical-align: top; line-height: 0.25rem; font-size: calc(12px - 0.12rem + 0.3rem); } .Investor .forms .row .item .chox .tip { display: inline-block; vertical-align: middle; line-height: 1.8; font-size: calc(12px - 0.12rem + 0.16rem); color: #888; } .Investor .forms .row .item:nth-child(3n) { margin-right: 0; } .Investor .forms .row .item:nth-child(3n+1) { transition-delay: 0.2s; } .Investor .forms .row .item:nth-child(3n+2) { transition-delay: 0.3s; } .Investor .forms .row .item:nth-child(3n+3) { transition-delay: 0.4s; } .Investor .forms .rule { width: 100%; margin: 0.24rem 0; font-size: 0; } .Investor .forms .rule .label { display: inline-block; vertical-align: middle; width: auto; } .Investor .forms .rule .label .rms { display: inline-block; vertical-align: middle; width: 19px; height: 19px; margin-right: 0.1rem; position: relative; } .Investor .forms .rule .label .rms img { width: 100%; height: 100%; display: none; } .Investor .forms .rule .label .rms .amm { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; cursor: pointer; opacity: 1; border: solid 1px #ddd; } .Investor .forms .rule .label .pm { display: inline-block; vertical-align: middle; width: auto; color: #666; line-height: 1.5; } .Investor .forms .rule .label .pm span { color: #666; line-height: 1.5; display: inline-block; vertical-align: middle; } .Investor .forms .rule .label .pm a { display: inline-block; vertical-align: middle; color: #666; line-height: 1.5; } .Investor .forms .rule .label.selected .rms img { display: block; } .Investor .forms .rule .label.selected .rms .amm { opacity: 0; } .Investor .forms .fob { width: 100%; font-size: 0; margin-top: 0.24rem; } .Investor .forms .fob a { display: inline-block; vertical-align: middle; background-color: rgba(34, 34, 34, 0.5); padding: 0 0.4rem; line-height: 3; color: #fff; min-width: 1.6rem; text-align: center; border-radius: 0.25rem; } .Investor .forms .fob a:hover { background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); } .Investor .forms .fob .sub { display: inline-block; vertical-align: middle; position: relative; width: 1.6rem; text-align: center; margin-right: 0.4rem; background-color: rgba(34, 34, 34, 0.5); border-radius: 0.25rem; } .Investor .forms .fob .sub .sm { display: inline-block; vertical-align: middle; color: #fff; line-height: 3; } .Investor .forms .fob .sub .ht { display: inline-block; vertical-align: middle; width: 0px; height: 20px; margin-left: 0.15rem; transition: width ease 0.3s; } .Investor .forms .fob .sub .ht img { width: 100%; height: 100%; display: block; } .Investor .forms .fob .sub .stn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; opacity: 0; } .Investor .forms .fob .sub:hover { background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); } .Investor .forms .fob .sub:hover .ht { width: 20px; } @media (max-width: 800px) { .Investor { padding: 0.5rem 0; } .Investor .forms .row .item { width: 100%; margin-right: 0; } } .rational { width: 100%; padding: 0.6rem 0; } .rational .rationlis { width: 100%; font-size: 0; } .rational .rationlis .ratim { width: 100%; font-size: 0; border-bottom: solid 1px #ebf0f5; } .rational .rationlis .ratim a { width: 100%; display: block; padding: 0.4rem 0; transition: all ease 0.5s; } .rational .rationlis .ratim .day { display: inline-block; vertical-align: middle; width: 0.8rem; width: 70px; padding: 0.1rem 0; } .rational .rationlis .ratim .day .ym { width: 100%; color: #8790a1; text-align: center; line-height: 1.3; } .rational .rationlis .ratim .day .yd { width: 100%; color: #8790a1; text-align: center; line-height: 1.5; } .rational .rationlis .ratim .pix { display: inline-block; vertical-align: middle; width: calc(100% - 70px - 0.6rem); padding: 0 0.2rem; color: #222; line-height: 1.5; } .rational .rationlis .ratim .rtn { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: solid 1px #ddd; } .rational .rationlis .ratim .rtn img { width: 100%; display: block; } .rational .rationlis .ratim .rtn img:first-child { display: block; } .rational .rationlis .ratim .rtn img:last-child { display: none; } .rational .rationlis .ratim:hover { background-color: #15a4c6; border-bottom: solid 1px #15a4c6; } .rational .rationlis .ratim:hover a { padding: 0.4rem 0.3rem; } .rational .rationlis .ratim:hover .day .ym, .rational .rationlis .ratim:hover .day .yd { color: #fff; } .rational .rationlis .ratim:hover .pix { color: #fff; } .rational .rationlis .ratim:hover .rtn { background-color: #fff; border: solid 1px #fff; } .rational .rationlis .ratim:hover .rtn img:first-child { display: none; } .rational .rationlis .ratim:hover .rtn img:last-child { display: block; } .pages { width: 100%; padding: 0.4rem 0; font-size: 0; text-align: center; } .pages .page { display: inline-block; vertical-align: middle; width: 0.5rem; height: 0.5rem; line-height: 0.5rem; text-align: center; color: #131313; background-color: transparent; margin: 0 0.1rem; border-radius: 50%; border: solid 1px transparent; } .pages .page.ltn { background-image: url("../images/j2.png"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: none; border: solid 1px #ddd; } .pages .page.rtn { background-image: url("../images/j1.png"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: none; border: solid 1px #ddd; } .pages .page.on { background-color: #0ac4cf; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; color: #fff; border: solid 1px #0ac4cf; } .pages .page.on.ltn { background-image: url("../images/b7.png"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: none; } .pages .page.on.rtn { background-image: url("../images/b8.png"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: none; } .pages .page.auto { width: auto; padding: 0 0.24rem; } .pages .page:hover { background-color: #0ac4cf; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; color: #fff; border: solid 1px #0ac4cf; } .pages .page.ltn:hover { background-image: url("../images/b7.png"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; } .pages .page.rtn:hover { background-image: url("../images/b8.png"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; } @media (max-width: 900px) { .pages .page { width: 0.8rem; height: 0.8rem; line-height: 0.8rem; } } .groups { width: 100%; padding: 1.2rem 0 0.6rem; } .groups .map { width: 100%; position: relative; z-index: 2; margin: 0.5rem 0 0.8rem; } .groups .map .amp { width: 100%; height: 6.6rem; } .groups .map .amp .BMap_Marker > div { width: 39px !important; } .groups .maplist { width: 100%; font-size: 0; } .groups .maplist .mapen { display: inline-block; vertical-align: top; width: 33.3%; margin-bottom: 0.4rem; } .groups .maplist .mapen .pom { width: 100%; padding: 0.4rem; border-right: solid 1px #dddddd; transition: all ease 0.4s; background-color: #fff; } .groups .maplist .mapen .mt { width: 100%; color: #222; font-weight: 600; line-height: 1.5; } .groups .maplist .mapen .line { width: 100%; font-size: 0; } .groups .maplist .mapen .line span { display: inline-block; vertical-align: middle; width: 0.2rem; height: 2px; background-color: #ddd; margin: 0.15rem 0; } .groups .maplist .mapen .minp { width: 100%; color: #666; line-height: 1.5; height: 4.5em; } .groups .maplist .mapen .minp p { color: #666; line-height: 1.5; } .groups .maplist .mapen:hover { background-color: #ffffff; } .groups .maplist .mapen:hover .pom { border-right: solid 1px none; box-shadow: 0px 6px 16px 1px rgba(112, 112, 112, 0.13); } .groups .maplist .mapen:nth-child(3n+1) { transition-delay: 0.2s; } .groups .maplist .mapen:nth-child(3n+2) { transition-delay: 0.3s; } .groups .maplist .mapen:nth-child(3n+3) { transition-delay: 0.4s; } .Bomestic { width: 100%; padding: 0.6rem 0; } .Bomestic .bome { width: 100%; position: relative; } .Bomestic .bome .img { width: 100%; padding-top: 76.81%; } .Bomestic .bome .pointlis { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .Bomestic .bome .pointlis .pion { position: absolute; } .Bomestic .bome .pointlis .pion .im { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; cursor: pointer; border-radius: 50%; background-color: #15a4c6; } @keyframes kuosan { 0% { width: 7px; height: 7px; opacity: 1; } 50% { width: 15px; height: 15px; opacity: 0.6; } 100% { width: 24px; height: 24px; opacity: 0; } } .Bomestic .bome .pointlis .pion .im:before { content: ''; background: rgba(21, 164, 198, 0.2); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: kuosan 2.2s linear 0.1s infinite; } .Bomestic .bome .pointlis .pion .im:after { content: ''; background: rgba(21, 164, 198, 0.1); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: kuosan 2.2s linear .8s infinite; } .Bomestic .bome .pointlis .pion .mv { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: #333; line-height: 1.5; white-space: nowrap; } .Bomestic .bome .pointlis .pion .mtb { position: absolute; bottom: calc(10px + 00.1rem); left: 50%; transform: translateX(-50%); width: 4rem; background-color: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.09); padding: 0.3rem; display: none; } .Bomestic .bome .pointlis .pion .mtb:after { content: ' '; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: solid 0.1rem transparent; border-top-color: #fff; } .Bomestic .bome .pointlis .pion .mtb .my { width: 100%; color: #222; line-height: 1.5; } .Bomestic .bome .pointlis .pion .mtb .line { width: 100%; font-size: 0; margin: 0.1rem 0; } .Bomestic .bome .pointlis .pion .mtb .line span { display: inline-block; vertical-align: top; width: 0.2rem; height: 2px; background-color: #15a4c6; } .Bomestic .bome .pointlis .pion .mtb .mips { width: 100%; color: #666; line-height: 1.5; } .Bomestic .bome .pointlis .pion .mtb .mips p { color: #666; line-height: 1.5; } .Bomestic .bome .pointlis .pion:hover { z-index: 5; } .Bomestic .bome .pointlis .pion:hover .mtb { display: block; } .Bomestic .bome .pointlis .pion.on { z-index: 5; } .Bomestic .bome .pointlis .pion.on .mtb { display: block; } .International { width: 100%; padding: 0.6rem 0; } .International .bome { width: 100%; position: relative; } .International .bome .img { width: 100%; padding-top: 57.14%; } .International .bome .pointlis { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .International .bome .pointlis .pion { position: absolute; } .International .bome .pointlis .pion .im { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; cursor: pointer; border-radius: 50%; background-color: #15a4c6; } @keyframes kuosan { 0% { width: 7px; height: 7px; opacity: 1; } 50% { width: 15px; height: 15px; opacity: 0.6; } 100% { width: 24px; height: 24px; opacity: 0; } } .International .bome .pointlis .pion .im:before { content: ''; background: rgba(21, 164, 198, 0.2); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: kuosan 2.2s linear 0.1s infinite; } .International .bome .pointlis .pion .im:after { content: ''; background: rgba(21, 164, 198, 0.1); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: kuosan 2.2s linear .8s infinite; } .International .bome .pointlis .pion .mv { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: #333; line-height: 1.5; white-space: nowrap; } .International .bome .pointlis .pion .mtb { position: absolute; bottom: calc(10px + 00.1rem); left: 50%; transform: translateX(-50%); width: 4rem; background-color: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.09); padding: 0.3rem; display: none; } .International .bome .pointlis .pion .mtb:after { content: ' '; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: solid 0.1rem transparent; border-top-color: #fff; } .International .bome .pointlis .pion .mtb .my { width: 100%; color: #222; line-height: 1.5; } .International .bome .pointlis .pion .mtb .line { width: 100%; font-size: 0; margin: 0.1rem 0; } .International .bome .pointlis .pion .mtb .line span { display: inline-block; vertical-align: top; width: 0.2rem; height: 2px; background-color: #15a4c6; } .International .bome .pointlis .pion .mtb .mips { width: 100%; color: #666; line-height: 1.5; } .International .bome .pointlis .pion .mtb .mips p { color: #666; line-height: 1.5; } .International .bome .pointlis .pion:hover { z-index: 5; } .International .bome .pointlis .pion:hover .mtb { display: block; } .International .bome .pointlis .pion.on { z-index: 5; } .International .bome .pointlis .pion.on .mtb { display: block; } @media (max-width: 900px) { .International .bome .pointlis .pion .mv { top: 0; display: none; font-size: 0; transform: translateX(-50%) scale(0.5); } } .news { width: 100%; padding: 0.6rem 0; } .news .newpers { width: 100%; position: relative; } .news .newpers .swiper-container { padding: 0.2rem 0; } .news .newpers .nelam { width: 100%; display: inline-block; vertical-align: top; position: relative; } .news .newpers .nelam a { width: 100%; display: block; } .news .newpers .nelam .imgs { width: 100%; display: block; margin: 0 auto; position: relative; overflow: hidden; } .news .newpers .nelam .imgs .img { width: 100%; padding-top: 63.63%; transition: all ease 0.3s; } .news .newpers .nelam .nem { width: 100%; background-color: #fff; padding: 0.4rem 0.3rem; background-color: #ebf0f5; } .news .newpers .nelam .nem .dit { width: 100%; color: #131313; line-height: 1.5; height: 3em; } .news .newpers .nelam .nem .time { width: 100%; color: #131313; line-height: 1.5; margin: 0.45rem 0 0.2rem; } .news .newpers .nelam .nem .tix { width: 100%; font-size: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .news .newpers .nelam .nem .tix .label { display: inline-block; vertical-align: middle; width: auto; font-size: 0; } .news .newpers .nelam .nem .tix .label .bm { display: inline-block; vertical-align: middle; width: 0.47rem; height: 0.49rem; width: 47px; height: 49px; background-image: url("../images/tab.png"); background-size: 100% 100%; color: #717273; position: relative; } .news .newpers .nelam .nem .tix .label .bm span { width: 0.38rem; height: 0.38rem; line-height: 0.38rem; width: 38px; height: 38px; line-height: 38px; display: inline-block; vertical-align: middle; position: absolute; right: 1px; top: 0; color: #717273; text-align: center; } .news .newpers .nelam .nem .tix .rj { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; } .news .newpers .nelam .nem .tix .rj img { width: 100%; display: block; } .news .newpers .nelam:nth-child(3n+1) { transition-delay: 0.2s; } .news .newpers .nelam:nth-child(3n+2) { transition-delay: 0.3s; } .news .newpers .nelam:nth-child(3n+3) { transition-delay: 0.4s; } .news .newpers .nelam:hover { box-shadow: 0px 6px 16px 1px rgba(112, 112, 112, 0.13); } .news .newpers .nelam:hover .imgs .img { transform: scale(1.1); } .news .newpers .nelam:hover .nem { background-color: #fff; } .news .newpers .nelam:hover .nem .dit { color: #00a9ce; } .news .newpers .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .news .newpers .btn img { width: 100%; display: block; } .news .newpers .btn img:first-child { display: block; } .news .newpers .btn img:last-child { display: none; } .news .newpers .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .news .newpers .btn:hover img:first-child { display: none; } .news .newpers .btn:hover img:last-child { display: block; } .news .newpers .bl { left: -0.8rem; } .news .newpers .br { right: -0.8rem; } .news .necont { width: 100%; padding: 0.6rem 0; } .news .necont .dyrlis { width: 100%; } .news .necont .dyrlis .dyom { width: 100%; font-size: 0; border-bottom: solid 1px #ddd; } .news .necont .dyrlis .dyom a { width: 100%; display: block; padding: 0.2rem 0; } .news .necont .dyrlis .dyom .day { display: inline-block; vertical-align: middle; width: 0.8rem; width: 70px; background-color: #ebf0f5; padding: 0.1rem 0; } .news .necont .dyrlis .dyom .day .ym { width: 100%; color: #8790a1; text-align: center; line-height: 1.3; } .news .necont .dyrlis .dyom .day .yd { width: 100%; color: #8790a1; text-align: center; line-height: 1.5; } .news .necont .dyrlis .dyom .pix { display: inline-block; vertical-align: middle; width: calc(100% - 70px - 0.6rem); padding: 0 0.2rem; color: #222; line-height: 1.5; } .news .necont .dyrlis .dyom .rtn { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: solid 1px #ddd; } .news .necont .dyrlis .dyom .rtn img { width: 100%; display: block; } .news .necont .dyrlis .dyom .rtn img:first-child { display: block; } .news .necont .dyrlis .dyom .rtn img:last-child { display: none; } .news .necont .dyrlis .dyom:hover .day { background-color: #15a4c6; } .news .necont .dyrlis .dyom:hover .day .ym, .news .necont .dyrlis .dyom:hover .day .yd { color: #fff; } .news .necont .dyrlis .dyom:hover .pix { color: #15a4c6; } .news .necont .dyrlis .dyom:hover .rtn { border: solid 1px #15a4c6; background-color: #15a4c6; } .news .necont .dyrlis .dyom:hover .rtn img:first-child { display: none; } .news .necont .dyrlis .dyom:hover .rtn img:last-child { display: block; } @media (max-width: 1500px) { .news .newpers .btn { background-color: #fff; border: solid 1px #fff; } .news .newpers .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .news .newpers .bl { left: 0rem; } .news .newpers .br { right: 0rem; } } .details { width: 100%; padding: 1.2rem 0; } .details .detop { width: 100%; border-bottom: solid 1px #666; margin-bottom: 0.5rem; } .details .detop .dt { width: 100%; color: #333; padding: 0.15rem 0; line-height: 1.5; } .details .decom { width: 100%; font-size: 0; } .details .decom .del { display: inline-block; vertical-align: top; width: calc((900 / 1380) * 100%); margin-right: calc((109 / 1380) * 100%); } .details .decom .del .dinp { width: 100%; color: #666; line-height: 1.5; font-family: '思源宋体', serif; } .details .decom .del .dinp p { color: #666; line-height: 1.5; } .details .decom .del .dinp span { color: #666; line-height: 1.5; text-wrap: wrap !important; } .details .decom .del .dinp img { max-width: 100%; } .details .decom .der { display: inline-block; vertical-align: top; width: calc((370 / 1380) * 100%); } .details .decom .der .shnw { width: 100%; } .details .decom .der .shnw .sm { width: 100%; color: #222; line-height: 1.5; } .details .decom .der .shnw .sm + .sm { margin-top: 0.2rem; } .details .decom .der .shnw .share { width: 100%; font-size: 0; margin: 0.15rem 0; } .details .decom .der .shnw .share .xm { display: inline-block; vertical-align: middle; color: #222; line-height: 1.5; margin-right: 0.15rem; } .details .decom .der .shnw .share .am { display: inline-block; vertical-align: middle; width: 0.4rem; height: 0.4rem; width: 40px; height: 40px; margin-right: 0.12rem; background-image: url("../images/vl.png"); background-size: 100% 100%; position: relative; background-size: 100% 100%; } .details .decom .der .shnw .share .am a { width: 100%; height: 100%; display: block; } .details .decom .der .shnw .share .am .a1, .details .decom .der .shnw .share .am .a2 { position: absolute; width: 0.24rem; height: 0.24rem; width: 24px; height: 24px; right: 0.06rem; top: 0.06rem; right: 6px; top: 6px; } .details .decom .der .shnw .share .am .a1 { display: block; } .details .decom .der .shnw .share .am .a2 { display: none; } .details .decom .der .shnw .share .am:hover { background-image: url("../images/vls.png"); background-position: -0.01rem 0; background-position: -1px 0; background-size: 100% 100%; } .details .decom .der .shnw .share .am:hover .a1 { display: none; } .details .decom .der .shnw .share .am:hover .a2 { display: block; } .details .decom .der .pm { width: 100%; font-size: 0; } .details .decom .der .pm a { display: inline-block; vertical-align: middle; color: #222; line-height: 1.5; } .details .decom .der .pm a:hover { color: #15a4c6; } .details .decom .der .pm .ic { display: inline-block; vertical-align: middle; width: 0.24rem; height: 0.24rem; width: 24px; height: 24px; margin: 0 0.15rem; } .details .decom .der .pm .ic img { width: 100%; display: block; } .details .decom .der .pm .ic img:first-child { display: block; } .details .decom .der .pm .ic img:last-child { display: none; } .details .decom .der .pm .ic:hover img:first-child { display: none; } .details .decom .der .pm .ic:hover img:last-child { display: block; } .details .decom .der .pmx { width: 100%; border-bottom: solid 1px #ddd; } .details .decom .der .pmx a, .details .decom .der .pmx img { width: 100%; display: block; } .details .decom .der .pmx .img { width: 100%; } .details .decom .der .pmx .tix { width: 100%; color: #222; line-height: 1.5; padding: 0.1rem 0; } .details .decom .der .newlis { width: 100%; margin-top: 0.3rem; } .details .decom .der .newlis .pit { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.2rem; } .details .decom .der .newlis .pmx { width: 100%; } .details .decom .der .newlis .pmx .img { width: 100%; } .details .decom .der .newlis .pmx a, .details .decom .der .newlis .pmx img { width: 100%; display: block; } .details .decom .der .newlis .pmx .tix { width: 100%; color: #222; line-height: 1.5; } .details .decom .der .newlis .newom { width: 100%; margin-top: 0.2rem; } .details .decom .der .newlis .newom .npm { width: 100%; font-size: 0; } .details .decom .der .newlis .newom .npm a { width: 100%; display: block; font-size: 0; padding: 0.04rem 0; } .details .decom .der .newlis .newom .npm .ix { display: inline-block; vertical-align: top; margin-top: calc(0.75em - 0.04rem); width: 0.08rem; height: 0.08rem; border-radius: 50%; background-color: #15a4c6; margin-right: 0.14rem; } .details .decom .der .newlis .newom .npm .im { display: inline-block; vertical-align: top; width: calc(100% - 0.24rem); color: #666; line-height: 1.5; } .details .decom .der .newlis .newom .npm a:hover .im { color: #15a4c6; } @media (max-width: 800px) { .details { padding: 0.5rem 0 1rem; } } .partys { width: 100%; position: relative; } .partys .bot { width: 100%; position: relative; bottom: 0; left: 0; right: 0; } .partys .bot .img { width: 100%; padding-top: 19.28%; } .Committee { width: 100%; padding: 1.2rem 0 0; } .Committee .mitop { width: 100%; margin-bottom: 0.5rem; } .Committee .mitop .fx { width: 100%; color: #222; line-height: 1.5; margin-top: 0.15rem; } .Committee .mitop .fx p { color: #222; line-height: 1.5; } .Committee .comper { width: 100%; position: relative; } .Committee .comper .swiper-slide { width: 100%; } .Committee .comper .swiper-slide .imgs { width: 100%; } .Committee .comper .swiper-slide .imgs .img { width: 100%; padding-top: 63.55%; transition: all ease 0.6s; } .Committee .comper .swiper-slide .sim { width: 100%; color: #666; line-height: 1.5; padding: 0.1rem 0; margin-top: 0.04rem; text-align: center; } .Committee .comper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .Committee .comper .btn img { width: 100%; display: block; } .Committee .comper .btn img:first-child { display: block; } .Committee .comper .btn img:last-child { display: none; } .Committee .comper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .Committee .comper .btn:hover img:first-child { display: none; } .Committee .comper .btn:hover img:last-child { display: block; } .Committee .comper .bl { left: -0.8rem; } .Committee .comper .br { right: -0.8rem; } .Committee .cinp { width: 100%; margin: 0.3rem 0; color: #222; line-height: 1.5; } .Committee .cinp p { color: #222; line-height: 1.5; } .Committee .cinp img { max-width: 100%; } @media (max-width: 1500px) { .Committee .comper .btn { background-color: #fff; border: solid 1px #fff; } .Committee .comper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .Committee .comper .bl { left: 0rem; } .Committee .comper .br { right: 0rem; } } .intre { width: 100%; } .intoms { width: 100%; padding: 1.2rem 0; } .intoms .intom { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .intoms .intom .inl { display: inline-block; vertical-align: middle; width: calc((625 / 1380) * 100%); } .intoms .intom .inl .img { width: 100%; padding-top: 68%; transition: all ease 1s; } .intoms .intom .inl .img:hover { transform: scale(1.1); } @keyframes bigsaml { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .intoms .intom .inr { display: inline-block; vertical-align: middle; width: calc((640 / 1380) * 100%); } .intoms .intom .inr .sic { width: 100%; font-size: 0; margin-bottom: 0.4rem; } .intoms .intom .inr .sic span { display: inline-block; vertical-align: middle; } .intoms .intom .inr .sic span img { width: 100%; display: inline-block; } .intoms .intom .inr .rinp { width: 100%; color: #222; line-height: 1.5; text-align: justify; } .intoms .intom .inr .rinp p { color: #222; line-height: 1.5; } .centers { width: 100%; padding: 1.2rem 0; } .centers .ceom { width: 100%; font-size: 0; } .centers .ceom .cel { display: inline-block; vertical-align: top; width: calc((590 / 1920) * 100%); padding-left: calc((270 / 1920) * 100%); padding-top: 0.5rem; padding-right: 0.2rem; } .centers .ceom .cel .btns { width: 100%; font-size: 0; margin-top: 1.8rem; } .centers .ceom .cel .btns .btn { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .centers .ceom .cel .btns .btn img { width: 100%; display: block; } .centers .ceom .cel .btns .btn img:first-child { display: block; } .centers .ceom .cel .btns .btn img:last-child { display: none; } .centers .ceom .cel .btns .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .centers .ceom .cel .btns .btn:hover img:first-child { display: none; } .centers .ceom .cel .btns .btn:hover img:last-child { display: block; } .centers .ceom .cel .btns .btn + .btn { margin-left: 0.24rem; } .centers .ceom .cer { display: inline-block; vertical-align: top; width: calc((1330 / 1920) * 100%); } .centers .ceom .cer .cerpers { width: 100%; } .centers .ceom .cer .cerpers .swiper-slide { width: 100%; } .centers .ceom .cer .cerpers .swiper-slide a { width: 100%; display: block; } .centers .ceom .cer .cerpers .swiper-slide .imgs { width: 100%; overflow: hidden; } .centers .ceom .cer .cerpers .swiper-slide .imgs .img { width: 100%; padding-top: 64.16%; transition: all ease 0.3s; } .centers .ceom .cer .cerpers .swiper-slide .som { width: 100%; background-color: #fff; padding: 0.4rem 0.5rem; } .centers .ceom .cer .cerpers .swiper-slide .som .st { width: 100%; color: #222; font-weight: bold; line-height: 1.5; } .centers .ceom .cer .cerpers .swiper-slide .som .line { width: 100%; font-size: 0; margin: 0.2rem 0; } .centers .ceom .cer .cerpers .swiper-slide .som .line span { display: inline-block; vertical-align: middle; width: 0.24rem; height: 3px; background-color: #eee; } .centers .ceom .cer .cerpers .swiper-slide .som .sip { width: 100%; color: #666; line-height: 1.5; height: 4.5em; } .centers .ceom .cer .cerpers .swiper-slide .som .sip p { color: #666; line-height: 1.5; } .centers .ceom .cer .cerpers .swiper-slide .som .num { width: 100%; color: #222; line-height: 1.5; margin-top: 0.6rem; font-weight: bold; } .centers .ceom .cer .cerpers .swiper-slide:hover .imgs .img { transform: scale(1.1); } .centers .ceom .cer .cerpers .swiper-slide:hover .som .st { color: #0ac4cf; } .centers .ceom .cer .cerpers .swiper-slide:nth-child(3n+1) { transition-delay: 0.2s; } .centers .ceom .cer .cerpers .swiper-slide:nth-child(3n+2) { transition-delay: 0.3s; } .centers .ceom .cer .cerpers .swiper-slide:nth-child(3n+3) { transition-delay: 0.4s; } @media (max-width: 1400px) { .centers .ceom .cel { padding-left: 3%; } } .Advantages { width: 100%; padding: 1.2rem 0; } .Advantages .mitop { width: 100%; text-align: center; margin-bottom: 0.5rem; } .Advantages .mitop .nel .fm { color: #fff; } .Advantages .mitop .nel .fk { width: 100%; margin-top: 0.1rem; color: #fff; line-height: 1.5; } .Advantages .mitop .nel .fk p { color: #fff; line-height: 1.5; } .Advantages .advanper { width: 100%; position: relative; } .Advantages .advanper .swiper-slide { width: 100%; } .Advantages .advanper .swiper-slide .imgs { width: 100%; overflow: hidden; } .Advantages .advanper .swiper-slide .imgs .img { width: 100%; padding-top: 64.17%; transition: all ease 0.4s; } .Advantages .advanper .swiper-slide .dom { width: 100%; padding-top: 0.4rem; } .Advantages .advanper .swiper-slide .dom .dt { width: 100%; color: #222; font-weight: bold; line-height: 1.5; margin-bottom: 0.2rem; } .Advantages .advanper .swiper-slide .dom .dinp { width: 100%; padding-left: 0.2rem; border-left: solid 1px #ccc; height: 1.2rem; height: 120px; color: #666; line-height: 1.6; } .Advantages .advanper .swiper-slide .dom .dinp p { color: #666; line-height: 1.6; } .Advantages .advanper .swiper-slide:nth-child(2n+1) { transition-delay: 0.2s; } .Advantages .advanper .swiper-slide:nth-child(2n+2) { transition-delay: 0.3s; } .Advantages .advanper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #fff; border-radius: 50%; } .Advantages .advanper .btn img { width: 100%; display: block; } .Advantages .advanper .btn img:first-child { display: none; } .Advantages .advanper .btn img:last-child { display: block; } .Advantages .advanper .btn:hover { background-color: #fff; border: solid 1px #fff; } .Advantages .advanper .btn:hover img:first-child { display: none; } .Advantages .advanper .btn:hover img:last-child { display: block; } .Advantages .advanper .btn:hover img:first-child { display: block; } .Advantages .advanper .btn:hover img:last-child { display: none; } .Advantages .advanper .bl { left: -0.8rem; } .Advantages .advanper .br { right: -0.8rem; } @media (max-width: 1400px) { .Advantages { background-size: auto 5rem !important; } .Advantages .advanper .btn { background-color: #fff; border: solid 1px #fff; } .Advantages .advanper .btn img:first-child { display: block; } .Advantages .advanper .btn img:last-child { display: none; } .Advantages .advanper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .Advantages .advanper .btn:hover img:first-child { display: none; } .Advantages .advanper .btn:hover img:last-child { display: block; } .Advantages .advanper .bl { left: 0rem; } .Advantages .advanper .br { right: 0rem; } } @media (max-width: 800px) { .Advantages { padding: 0.5rem 0; } } .relevant { width: 100%; padding: 1.2rem 0; } .relevant .releper { width: 100%; } .relevant .releper .swiper-slide { width: 100%; background-color: #fff; border-radius: 0.3rem; } .relevant .releper .swiper-slide a { width: 100%; display: block; padding: 0.5rem; } .relevant .releper .swiper-slide .imgs { width: 100%; overflow: hidden; } .relevant .releper .swiper-slide .imgs .img { width: 100%; padding-top: 100%; transition: all ease 0.4s; } .relevant .releper .swiper-slide .som { width: 100%; margin-top: 0.2rem; } .relevant .releper .swiper-slide .som .xm { width: 100%; color: #15a4c6; line-height: 1.5; } .relevant .releper .swiper-slide .som .st { width: 100%; color: #222; font-weight: bold; line-height: 1.5; margin: 0.1rem 0 0.2rem; } .relevant .releper .swiper-slide .som .sip { width: 100%; color: #666; line-height: 1.5; height: 3em; margin: 0.2rem 0 0.25rem; } .relevant .releper .swiper-slide .som .sip p { color: #666; line-height: 1.5; } .relevant .releper .swiper-slide .som .more { width: 100%; font-size: 0; } .relevant .releper .swiper-slide .som .more span { display: inline-block; vertical-align: middle; background-color: #222; line-height: 3; color: #fff; width: 1.6rem; text-align: center; border-radius: 1.5em; } .relevant .releper .swiper-slide .som .more span i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; width: 0; margin-left: 0.12rem; margin-left: 0; transition: width ease 0.4s; } .relevant .releper .swiper-slide .som .more span i img { width: 100%; display: block; } .relevant .releper .swiper-slide:hover .imgs .img { transform: scale(1.1); } .relevant .releper .swiper-slide:hover .more span { background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); } .relevant .releper .swiper-slide:hover .more span i { width: 0.2rem; margin-left: 0.12rem; } .relevant .releper .swiper-slide:nth-child(3n+1) { transition-delay: 0.2s; } .relevant .releper .swiper-slide:nth-child(3n+2) { transition-delay: 0.3s; } .relevant .releper .swiper-slide:nth-child(3n+3) { transition-delay: 0.4s; } .relevant .releper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .relevant .releper .btn img { width: 100%; display: block; } .relevant .releper .btn img:first-child { display: block; } .relevant .releper .btn img:last-child { display: none; } .relevant .releper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .relevant .releper .btn:hover img:first-child { display: none; } .relevant .releper .btn:hover img:last-child { display: block; } .relevant .releper .bl { left: -0.8rem; } .relevant .releper .br { right: -0.8rem; } @media (max-width: 1500px) { .relevant .releper .btn { background-color: #fff; border: solid 1px #999; } .relevant .releper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .relevant .releper .bl { left: 0rem; } .relevant .releper .br { right: 0rem; } } .recorder { width: 100%; background-color: #f3f9fb; } .cameras { width: 100%; padding: 0.8rem 0 0.6rem; } .cameras .mitop { margin-bottom: 0.6rem; } .cameras .camelis { width: 100%; font-size: 0; } .cameras .camelis .camet { width: 100%; font-size: 0; border-radius: 0.3rem; overflow: hidden; background-color: #fff; position: relative; margin-bottom: 0.3rem; } .cameras .camelis .camet a { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row-reverse; } .cameras .camelis .camet .cal { display: inline-block; vertical-align: middle; width: calc((732 / 1380) * 100%); position: relative; } .cameras .camelis .camet .cal .imd { width: 100%; overflow: hidden; } .cameras .camelis .camet .cal .img { width: 100%; padding-top: 62.84%; transition: all ease 0.4s; } .cameras .camelis .camet .car { display: flex; flex-wrap: wrap; align-content: center; width: calc((647 / 1380) * 100%); padding: 0.6rem 1.6rem 0.6rem 1rem; } .cameras .camelis .camet .car .xm { width: 100%; color: #15a4c6; line-height: 1.5; } .cameras .camelis .camet .car .st { width: 100%; color: #222; font-weight: bold; line-height: 1.5; margin: 0.1rem 0 0.2rem; } .cameras .camelis .camet .car .sip { width: 100%; color: #666; line-height: 1.5; height: 3em; margin: 0.2rem 0 0.25rem; } .cameras .camelis .camet .car .sip p { color: #666; line-height: 1.5; } .cameras .camelis .camet .car .more { width: 100%; font-size: 0; } .cameras .camelis .camet .car .more span { display: inline-block; vertical-align: middle; background-color: #222; line-height: 3; color: #fff; width: 1.6rem; text-align: center; border-radius: 1.5em; } .cameras .camelis .camet .car .more span i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; width: 0; margin-left: 0.12rem; margin-left: 0; transition: width ease 0.4s; } .cameras .camelis .camet .car .more span i img { width: 100%; display: block; } .cameras .camelis .camet .pro { display: inline-block; vertical-align: middle; width: calc((330 / 732) * 100%); position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); } .cameras .camelis .camet .pro .img { width: 100%; padding-top: 100%; } .cameras .camelis .camet:nth-child(2n) a { flex-direction: row; } .cameras .camelis .camet:nth-child(2n) .car { padding: 0.6rem 1rem 0.6rem 1.6rem; } .cameras .camelis .camet:nth-child(2n) .pro { left: auto; right: 0; transform: translate(50%, -50%); } .cameras .camelis .camet:hover .cal .imd .img { transform: scale(1.1); } .cameras .camelis .camet:hover .car .more span { background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); } .cameras .camelis .camet:hover .car .more span i { width: 0.2rem; margin-left: 0.12rem; } .cameras .macelis { width: 100%; font-size: 0; } .cameras .macelis .maces { display: inline-block; vertical-align: top; width: calc((675 / 1380) * 100%); background-color: #fff; border-radius: 0.3rem; margin-right: calc((29 / 1380) * 100%); } .cameras .macelis .maces a { width: 100%; display: block; padding: 0.6rem 1rem; position: relative; } .cameras .macelis .maces .imgs { width: 100%; overflow: hidden; display: block; margin: 0 auto 0; max-width: 3.3rem; } .cameras .macelis .maces .imgs .img { width: 100%; padding-top: 100%; transition: all ease 0.4s; } .cameras .macelis .maces .som { width: 100%; margin-top: 0.2rem; } .cameras .macelis .maces .som .xm { width: 100%; color: #15a4c6; line-height: 1.5; } .cameras .macelis .maces .som .st { width: 100%; color: #222; font-weight: bold; line-height: 1.5; height: 3em; margin: 0.1rem 0 0.2rem; } .cameras .macelis .maces .som .sip { width: 100%; color: #666; line-height: 1.5; height: 3em; margin: 0.2rem 0 0.25rem; } .cameras .macelis .maces .som .sip p { color: #666; line-height: 1.5; } .cameras .macelis .maces .som .more { width: 100%; font-size: 0; } .cameras .macelis .maces .som .more span { display: inline-block; vertical-align: middle; background-color: #222; line-height: 3; color: #fff; width: 1.6rem; text-align: center; border-radius: 1.5em; } .cameras .macelis .maces .som .more span i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; width: 0; margin-left: 0.12rem; margin-left: 0; transition: width ease 0.4s; } .cameras .macelis .maces .som .more span i img { width: 100%; display: block; } .cameras .macelis .maces .icon { position: absolute; z-index: 2; width: 0.65rem; height: 0.75rem; top: 0; left: 0.6rem; } .cameras .macelis .maces .icon img { width: 100%; display: block; } .cameras .macelis .maces:hover .imgs .img { transform: scale(1.1); } .cameras .macelis .maces:hover .more span { background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); } .cameras .macelis .maces:hover .more span i { width: 0.2rem; margin-left: 0.12rem; } .cameras .macelis .maces:nth-child(2n) { margin-right: 0; } .cameras .macelis .maces:nth-child(2n+1) { transition-delay: 0.2s; } .cameras .macelis .maces:nth-child(2n+2) { transition-delay: 0.3s; } .cameras .macelis.td3 .maces { width: calc((438 / 1380) * 100%); margin-right: calc((32 / 1380) * 100%); margin-bottom: 0.3rem; } .cameras .macelis.td3 .maces a { padding: 0; } .cameras .macelis.td3 .maces .imgs { padding: 0.5rem 0 0; } .cameras .macelis.td3 .maces .som { padding: 0.1rem 0.5rem 0.5rem; } .cameras .macelis.td3 .maces:nth-child(2n) { margin-right: calc((32 / 1380) * 100%); } .cameras .macelis.td3 .maces:nth-child(3n) { margin-right: 0; } .cameras .macelis.td3 .maces:nth-child(3n+1) { transition-delay: 0.2s; } .cameras .macelis.td3 .maces:nth-child(3n+2) { transition-delay: 0.3s; } .cameras .macelis.td3 .maces:nth-child(3n+3) { transition-delay: 0.4s; } .cameras .cameper { width: 100%; position: relative; } .cameras .cameper .swiper-slide { width: 100%; background-color: #fff; border-radius: 0.3rem; } .cameras .cameper .swiper-slide a { width: 100%; display: block; padding: 0.5rem; } .cameras .cameper .swiper-slide .imgs { width: 100%; overflow: hidden; } .cameras .cameper .swiper-slide .imgs .img { width: 100%; padding-top: 100%; transition: all ease 0.4s; } .cameras .cameper .swiper-slide .som { width: 100%; margin-top: 0.2rem; } .cameras .cameper .swiper-slide .som .xm { width: 100%; color: #15a4c6; line-height: 1.5; } .cameras .cameper .swiper-slide .som .st { width: 100%; color: #222; font-weight: bold; line-height: 1.5; margin: 0.1rem 0 0.2rem; } .cameras .cameper .swiper-slide .som .sip { width: 100%; color: #666; line-height: 1.5; height: 3em; margin: 0.2rem 0 0.25rem; } .cameras .cameper .swiper-slide .som .sip p { color: #666; line-height: 1.5; } .cameras .cameper .swiper-slide .som .more { width: 100%; font-size: 0; } .cameras .cameper .swiper-slide .som .more span { display: inline-block; vertical-align: middle; background-color: #222; line-height: 3; color: #fff; width: 1.6rem; text-align: center; border-radius: 1.5em; } .cameras .cameper .swiper-slide .som .more span i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; width: 0; margin-left: 0.12rem; margin-left: 0; transition: width ease 0.4s; } .cameras .cameper .swiper-slide .som .more span i img { width: 100%; display: block; } .cameras .cameper .swiper-slide:hover .imgs .img { transform: scale(1.1); } .cameras .cameper .swiper-slide:hover .more span { background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); } .cameras .cameper .swiper-slide:hover .more span i { width: 0.2rem; margin-left: 0.12rem; } .cameras .cameper .swiper-slide:nth-child(3n+1) { transition-delay: 0.2s; } .cameras .cameper .swiper-slide:nth-child(3n+2) { transition-delay: 0.3s; } .cameras .cameper .swiper-slide:nth-child(3n+3) { transition-delay: 0.4s; } .cameras .cameper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .cameras .cameper .btn img { width: 100%; display: block; } .cameras .cameper .btn img:first-child { display: block; } .cameras .cameper .btn img:last-child { display: none; } .cameras .cameper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .cameras .cameper .btn:hover img:first-child { display: none; } .cameras .cameper .btn:hover img:last-child { display: block; } .cameras .cameper .bl { left: -0.8rem; } .cameras .cameper .br { right: -0.8rem; } @media (max-width: 1500px) { .cameras .cameper .btn { background-color: #fff; border: solid 1px #999; } .cameras .cameper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .cameras .cameper .bl { left: 0rem; } .cameras .cameper .br { right: 0rem; } } @media (max-width: 800px) { .cameras .camelis .camet { position: relative; } .cameras .camelis .camet .cal { width: 100%; position: initial; } .cameras .camelis .camet .car { width: 100%; padding: 0.4rem !important; } .cameras .camelis .camet .car .more span { width: 2.4rem; } .cameras .camelis .camet .pro { left: auto !important; right: 0 !important; top: 43% !important; transform: translate(0%, -50%) !important; } .cameras .macelis .maces .som { width: 100%; } .cameras .macelis .maces .som .more span { width: 2.4rem; } .cameras .cameper .swiper-slide .som .more span { width: 2.4rem; } } .Features { width: 100%; padding: 1.2rem 0; } .Features .featper { width: 100%; /* cursor: url(../images/b10.png) 0 0, pointer; */ position: relative; } .Features .featper .swiper-container { padding-bottom: 0.5rem; } .Features .featper .swiper-slide { width: 100%; font-size: 0; } .Features .featper .facam { /* width: 100%; */ width: calc((460 / 1380) * 100%); display: inline-block; vertical-align: top; background-color: #f1f7fb; border: solid 1px #e5e5e5; padding: 0.6rem 0.2rem 0.4rem 0.4rem; overflow: hidden; position: relative; z-index: 2; } .Features .featper .facam:before { content: ' '; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: url(../images/jmg2.png) no-repeat center/cover; transition: all .5s; transform: translateY(100%); opacity: 0; } .Features .featper .facam .icon { width: 100%; font-size: 0; } .Features .featper .facam .icon span { display: inline-block; vertical-align: middle; width: 0.7rem; height: 0.7rem; } .Features .featper .facam .icon span img { width: 100%; display: block; } .Features .featper .facam .pit { width: 100%; color: #222; line-height: 1.5; margin: 0.15rem 0 0.25rem; } .Features .featper .facam .pinp { width: 100%; color: #666; line-height: 1.5; height: 2.2rem; text-align: justify; } .Features .featper .facam .pinp p { color: #666; line-height: 1.5; } .Features .featper .facam .num { width: 100%; font-size: 0; margin-top: 0.5rem; } .Features .featper .facam .num .lls { display: inline-block; vertical-align: middle; width: 0.08rem; height: 0.4rem; border-radius: 0.04rem; background-color: #15a4c6; margin-right: 0.2rem; } .Features .featper .facam .num .lms { display: inline-block; vertical-align: middle; color: #15a4c6; line-height: 1.5; } .Features .featper .facam:hover:before { transform: translateY(0); opacity: 1; } .Features .featper .facam:nth-child(4n+1) { transition-delay: 0.2s; } .Features .featper .facam:nth-child(4n+2) { transition-delay: 0.3s; } .Features .featper .facam:nth-child(4n+3) { transition-delay: 0.4s; } .Features .featper .facam:nth-child(4n+4) { transition-delay: 0.5s; } .Features .featper .swiper-scrollbar-drag { background-color: #15a4c6; } /* .Features .featper .btn { position: absolute; left: calc((920 / 1380) * 100%); top: 50%; transform: translate(-50%, -50%); z-index: 4; height: 0.63rem; } .Features .featper .btn .bmg { width: 0.63rem; height: 0.63rem; } .Features .featper .btn .bmg img { width: 100%; display: block; } .Features .featper .btn .bl, .Features .featper .btn .br { position: absolute; display: block; width: 0.315rem; height: 0.63rem; top: 0; cursor: pointer; } .Features .featper .btn .bl { left: 0; } .Features .featper .btn .br { right: 0; } @media (max-width: 800px) { .Features .featper .btn { left: 50%; } } */ .Features .featper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; } .Features .featper .btn img { width: 100%; display: block; } .Features .featper .btn img:first-child { display: block; } .Features .featper .btn img:last-child { display: none; } .Features .featper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .Features .featper .btn:hover img:first-child { display: none; } .Features .featper .btn:hover img:last-child { display: block; } .Features .featper .bl { left: -0.8rem; } .Features .featper .br { right: -0.8rem; } @media (max-width: 1500px) { .Features .featper .btn { background-color: #fff; border: solid 1px #999; } .Features .featper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .Features .featper .bl { left: 0rem; } .Features .featper .br { right: 0rem; } } @media (max-width: 800px) { .Features .featper .facam { width: 50%; } } .section .bgox { width: 100%; position: absolute; overflow: hidden; z-index: 2; width: 100%; height: 4rem; left: 0; right: 0; bottom: 0; } .bases { width: 100%; background-color: #f8fdfb; } .bases .base { width: 100%; padding: 1.2rem 0 0.6rem; } .bases .base .baseper { width: 100%; } .bases .base .baseper .basem { width: calc((420 / 1380) * 100%); display: inline-block; vertical-align: top; margin-right: calc((60 / 1380) * 100%); } .bases .base .baseper .basem a { width: 100%; display: block; } .bases .base .baseper .basem .imgs { width: 100%; position: relative; } .bases .base .baseper .basem .imgs .imd { width: 100%; overflow: hidden; } .bases .base .baseper .basem .imgs .imd .img { width: 100%; padding-top: 56.25%; transition: all ease 0.3s; } .bases .base .baseper .basem .imgs .icon { width: 0.8rem; height: 0.8rem; display: block; border-radius: 50%; position: absolute; left: 50%; bottom: 0; background-color: #15a4c6; transform: translate(-50%, 50%); background-color: #15a4c6; transition: all ease 0.5s; } .bases .base .baseper .basem .imgs .icon img { width: 100%; display: block; } .bases .base .baseper .basem .bom { width: 100%; padding: 0.8rem 0.3rem 0.4rem 0.4rem; background-color: #fff; } .bases .base .baseper .basem .bom .bit { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.1rem; } .bases .base .baseper .basem .bom .sinp { width: 100%; height: 2.8rem; } .bases .base .baseper .basem .bom .sinp .sli { width: 100%; font-size: 0; padding: 0.02rem 0; } .bases .base .baseper .basem .bom .sinp .sli .ic { width: 0.07rem; height: 0.07rem; display: inline-block; vertical-align: top; background-color: #15a4c6; margin-top: calc(0.75em - 0.035rem); margin-right: 0.1rem; } .bases .base .baseper .basem .bom .sinp .sli .im { display: inline-block; vertical-align: top; width: calc(100% - 0.17rem); color: 666; line-height: 1.5; } .bases .base .baseper .basem:nth-child(3n) { margin-right: 0; } .bases .base .baseper .basem:nth-child(3n+1) { transition-delay: 0.2s; } .bases .base .baseper .basem:nth-child(3n+2) { transition-delay: 0.3s; } .bases .base .baseper .basem:nth-child(3n+3) { transition-delay: 0.4s; } .bases .base .baseper .basem:hover .imgs .icon { bottom: 50%; } .bases.wmgg { background-color: #fff; } .bases .base .baseper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .bases .base .baseper .btn img { width: 100%; display: block; } .bases .base .baseper .btn img:first-child { display: block; } .bases .base .baseper .btn img:last-child { display: none; } .bases .base .baseper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .bases .base .baseper .btn:hover img:first-child { display: none; } .bases .base .baseper .btn:hover img:last-child { display: block; } .bases .base .baseper .bl { left: -0.8rem; } .bases .base .baseper .br { right: -0.8rem; } @media (max-width: 1500px) { .bases .base .baseper .btn { background-color: #fff; border: solid 1px #999; } .bases .base .baseper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .bases .base .baseper .bl { left: 0rem; } .bases .base .baseper .br { right: 0rem; } } @media (max-width: 800px) { .bases .base .baseper .basem { width: 100%; margin-right: 0; } } .Equipment { width: 100%; padding: 0.7rem 0; } .Equipment .equim { width: 100%; font-size: 0; flex-direction: row-reverse; display: flex; flex-wrap: wrap; justify-content: space-between; } .Equipment .equim .epl { display: inline-block; vertical-align: middle; width: calc((490 / 1380) * 100%); } .Equipment .equim .epl .mitop { margin-bottom: 0.3rem; } .Equipment .equim .epl .line { width: 100%; height: 1px; background-color: rgba(102, 102, 102, 0.3); margin: 0.3rem 0; } .Equipment .equim .epl .pimt { width: 100%; color: #15a4c6; line-height: 1.5; margin: 0.2rem 0; } .Equipment .equim .epl .funlis { width: 100%; font-size: 0; } .Equipment .equim .epl .funlis .fuls { display: inline-block; vertical-align: top; width: 48%; margin-right: 4%; } .Equipment .equim .epl .funlis .fuls:nth-child(2n) { margin-right: 0; } .Equipment .equim .epl .funlis .fit { width: 100%; color: #666; line-height: 1.5; margin-bottom: 0.1rem; } .Equipment .equim .epl .funlis .ful { width: 100%; } .Equipment .equim .epl .funlis .ful .fli { width: 100%; font-size: 0; padding: 0.02rem 0; } .Equipment .equim .epl .funlis .ful .fli .ic { width: 0.07rem; height: 0.07rem; display: inline-block; vertical-align: top; background-color: #15a4c6; margin-top: calc(0.75em - 0.035rem); margin-right: 0.1rem; } .Equipment .equim .epl .funlis .ful .fli .im { display: inline-block; vertical-align: top; width: calc(100% - 0.17rem); color: 666; line-height: 1.5; } .Equipment .equim .epr { display: inline-block; vertical-align: middle; width: calc((810 / 1380) * 100%); font-size: 0; } .Equipment .equim .epr .emaper { width: 100%; position: relative; } .Equipment .equim .epr .emaper .swiper-slide { width: 100%; font-size: 0; } .Equipment .equim .epr .emaper a { width: 100%; display: inline-block; } .Equipment .equim .epr .emaper .emas { width: calc((390 / 810) * 100%); display: inline-block; vertical-align: top; margin-right: calc((29 / 810) * 100%); position: relative; margin-bottom: 0.3rem; } .Equipment .equim .epr .emaper .emas .imgs { width: 100%; overflow: hidden; } .Equipment .equim .epr .emaper .emas .imgs .img { width: 100%; padding-top: 66.66%; transition: all ease 0.3s; } .Equipment .equim .epr .emaper .emas .eob { width: 100%; position: absolute; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); color: #fff; line-height: 2.5; padding: 0 0.2rem; } .Equipment .equim .epr .emaper .emas:hover .imgs .img { transform: scale(1.1); } .Equipment .equim .epr .emaper .emas:nth-child(2n) { margin-right: 0; } .Equipment .equim .epr .emaper .emas:nth-child(2n+1) { transition-delay: 0.2s; } .Equipment .equim .epr .emaper .emas:nth-child(2n+2) { transition-delay: 0.3s; } .Equipment .equim .epr .emaper .emas:nth-child(4n+3) { margin-bottom: 0; } .Equipment .equim .epr .emaper .emas:nth-child(4n+4) { margin-bottom: 0; } .Equipment .equim .epr .emaper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .Equipment .equim .epr .emaper .btn img { width: 100%; display: block; } .Equipment .equim .epr .emaper .btn img:first-child { display: block; } .Equipment .equim .epr .emaper .btn img:last-child { display: none; } .Equipment .equim .epr .emaper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .Equipment .equim .epr .emaper .btn:hover img:first-child { display: none; } .Equipment .equim .epr .emaper .btn:hover img:last-child { display: block; } .Equipment .equim .epr .emaper .bl { left: -0.3rem; } .Equipment .equim .epr .emaper .br { right: -0.3rem; } @media (max-width: 800px) { .Equipment .equim .epl { width: 100%; } .Equipment .equim .epr { width: 100%; } .Equipment .equim .epr .emaper .bl { left: 0; } .Equipment .equim .epr .emaper .br { right: 0; } } .scale { width: 100%; padding: 0.6rem 0 1.2rem; } .scale .mitop .fk { width: 100%; color: #15a4c6; line-height: 1.5; } .scale .sacaper { width: 100%; font-size: 0; position: relative; margin: 0.4rem 0; } .scale .sacaper .sacam { display: inline-block; vertical-align: top; width: calc((438 / 1380 ) * 100%); margin-right: calc((32 / 1380) * 100%); } .scale .sacaper .sacam .img { width: 100%; padding-top: 66.21%; } .scale .sacaper .sacam:nth-child(3n) { margin-right: 0; } .scale .sacaper .sacam:nth-child(3n+1) { transition-delay: 0.2s; } .scale .sacaper .sacam:nth-child(3n+2) { transition-delay: 0.3s; } .scale .sacaper .sacam:nth-child(3n+3) { transition-delay: 0.4s; } .scale .sacaper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .scale .sacaper .btn img { width: 100%; display: block; } .scale .sacaper .btn img:first-child { display: block; } .scale .sacaper .btn img:last-child { display: none; } .scale .sacaper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .scale .sacaper .btn:hover img:first-child { display: none; } .scale .sacaper .btn:hover img:last-child { display: block; } .scale .sacaper .bl { left: -0.8rem; } .scale .sacaper .br { right: -0.8rem; } .scale .scate { width: 100%; font-size: 0; } .scale .scate .scam { display: inline-block; vertical-align: top; width: 25%; padding: 0.05rem 0.5rem; border-left: solid 1px rgba(102, 102, 102, 0.3); } .scale .scate .scam .st { width: 100%; color: #15a4c6; } .scale .scate .scam .st span { color: #15a4c6; } .scale .scate .scam .xm { width: 100%; margin-top: 0.1rem; color: #717273; line-height: 1.5; } .scale .scate .scam:nth-child(4n+1) { transition-delay: 0.2s; } .scale .scate .scam:nth-child(4n+2) { transition-delay: 0.3s; } .scale .scate .scam:nth-child(4n+3) { transition-delay: 0.4s; } .scale .scate .scam:nth-child(4n+4) { transition-delay: 0.5s; } @media (max-width: 1500px) { .scale .sacaper .btn { background-color: #fff; border: solid 1px #999; } .scale .sacaper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .scale .sacaper .bl { left: 0rem; } .scale .sacaper .br { right: 0rem; } } @media (max-width: 800px) { .scale .scate .scam { width: 50%; padding: 0.3rem 0.5rem; text-align: center; } } .values { width: 100%; background-color: rgba(145, 194, 224, 0.6); position: relative; padding: 0.6rem 0; overflow: hidden; } .values .bgox { width: 100%; position: absolute; z-index: 2; width: 100%; height: 4rem; left: 0; right: 0; bottom: 0; } .values .chain { width: 100%; padding: 0.7rem 0; } .values .chain .cimg { width: 100%; } .values .chain .cimg .img { width: 100%; padding-top: 37.68%; } .values .quality { width: 100%; padding: 0.7rem 0; } .values .quality .mitop .fk { width: 100%; color: #15a4c6; line-height: 1.5; } .values .quality .quanlis { width: 100%; position: relative; padding: 1.1rem 0; } .values .quality .quanlis .qmg { width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .values .quality .quanlis .qmg .img { width: 100%; padding-top: 20.3125%; } .values .quality .quanlis .qualsit { width: 100%; font-size: 0; } .values .quality .quanlis .qualsit .quams { width: calc((180 / 1380) * 100%); display: inline-block; vertical-align: middle; margin-right: calc((19 / 1380) * 100%); position: relative; top: 0.8rem; } .values .quality .quanlis .qualsit .quams .qox { width: 100%; position: relative; } .values .quality .quanlis .qualsit .quams .height { width: 100%; padding-top: 100%; } .values .quality .quanlis .qualsit .quams .img1 { width: 100%; height: 100%; position: absolute; z-index: 3; left: 0; top: 0; transition: all ease 0.3s; opacity: 1; } .values .quality .quanlis .qualsit .quams .img2 { width: 100%; height: 100%; position: absolute; z-index: 4; left: 0; top: 0; opacity: 0; border-radius: 50%; transition: all ease 0.3s; } .values .quality .quanlis .qualsit .quams .img2:after { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); content: ' '; position: absolute; top: 0; left: 0; right: 0; transition: all ease 0.3s; border-radius: 50%; } .values .quality .quanlis .qualsit .quams .nox { width: 100%; height: 100%; position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 0.3rem; border-radius: 50%; transition: all ease 0.3s; } .values .quality .quanlis .qualsit .quams .nox .nix { width: 100%; color: #222; line-height: 1.8; text-align: center; transition: all ease 0.3s; } .values .quality .quanlis .qualsit .quams .nox .nix p { color: #222; line-height: 1.8; } .values .quality .quanlis .qualsit .quams:nth-child(2n) { top: -0.8rem; } .values .quality .quanlis .qualsit .quams:hover .img1 { transform: scale(1.4); opacity: 0; } .values .quality .quanlis .qualsit .quams:hover .img2 { opacity: 1; transform: scale(1.2); } .values .quality .quanlis .qualsit .quams:hover .nox { width: 120%; height: 120%; } .values .quality .quanlis .qualsit .quams:hover .nox .nix { color: #fff; } .values .quality .quanlis .qualsit .quams:hover .nox .nix p { color: #fff; } .values .quality .quanlis .qualsit .quams:nth-child(7n) { margin-right: 0; } .values .supply { width: 100%; padding: 0.7rem 0; } .values .supply .wmgs { width: 100%; position: relative; } .values .supply .wmgs .img { width: 100%; padding-top: 39.53%; } .values .supply .wmgs .wix { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); text-align: center; } .values .supply .wmgs .wix .tw { width: 100%; color: #00a9ce; } .values .supply .wmgs .wix .tw span { color: #00a9ce; } .values .supply .wmgs .wix .xm { width: 100%; color: #717273; line-height: 1.5; margin-top: 0.1rem; } .values .supply .scate { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; padding: 0.4rem 0; } .values .supply .scate .scam { display: inline-block; vertical-align: top; flex: 1; padding: 0.05rem 0.2rem; position: relative; text-align: center; } .values .supply .scate .scam:after { content: ' '; width: 1px; height: 0.6rem; background-color: rgba(102, 102, 102, 0.3); } .values .supply .scate .scam .st { width: 100%; color: #15a4c6; } .values .supply .scate .scam .st span { color: #15a4c6; } .values .supply .scate .scam .xm { width: 100%; margin-top: 0.1rem; color: #717273; line-height: 1.5; } .values .supply .scate .scam .xm p { color: #717273; line-height: 1.5; } .values .supply .scate .scam:nth-child(4n+1) { transition-delay: 0.2s; } .values .supply .scate .scam:nth-child(4n+2) { transition-delay: 0.3s; } .values .supply .scate .scam:nth-child(4n+3) { transition-delay: 0.4s; } .values .supply .scate .scam:nth-child(4n+4) { transition-delay: 0.5s; } .values .supply .sip { width: 100%; text-align: center; line-height: 1.5; color: #222; } .values .supply .sip p { text-align: center; line-height: 1.5; } .values .certificate { width: 100%; font-size: 0; margin: 0.7rem 0; } .values .certificate .certim { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; } .values .certificate .certim .cel { display: inline-block; vertical-align: middle; width: 50%; width: 100%; background-color: #fff; } .values .certificate .certim .cel .celper { width: 100%; position: relative; height: 100%; } .values .certificate .certim .cel .celper .swiper-container { height: 100%; padding: 0.4rem; } .values .certificate .certim .cel .celper .swiper-wrapper { height: 100%; } .values .certificate .certim .cel .celper .swiper-slide { text-align: center; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; } .values .certificate .certim .cel .celper .cerm { display: inline-block; vertical-align: middle; width: 1.85rem; margin: 0 0.1rem; } .values .certificate .certim .cel .celper .cerm .imgs { width: 100%; position: relative; } .values .certificate .certim .cel .celper .cerm .imgs .img { width: 100%; padding-top: 139.45%; } .values .certificate .certim .cel .celper .cerm .imgs .mg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; } .values .certificate .certim .cel .celper .cerm .imt { width: 100%; text-align: center; line-height: 2; margin-top: 0.04rem; color: #717273; } .values .certificate .certim .cel .celper .btn { position: absolute; z-index: 3; top: 40%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .values .certificate .certim .cel .celper .btn img { width: 100%; display: block; } .values .certificate .certim .cel .celper .btn img:first-child { display: block; } .values .certificate .certim .cel .celper .btn img:last-child { display: none; } .values .certificate .certim .cel .celper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .values .certificate .certim .cel .celper .btn:hover img:first-child { display: none; } .values .certificate .certim .cel .celper .btn:hover img:last-child { display: block; } .values .certificate .certim .cel .celper .bl { left: 0.4rem; } .values .certificate .certim .cel .celper .br { right: 0.4rem; } .values .certificate .certim .cer { display: inline-block; vertical-align: middle; width: 50%; display: none; } .values .certificate .certim .cer .img { width: 100%; padding-top: 58.66%; } @media (max-width: 800px) { .values { padding: 0.3rem 0; } .values .chain { padding: 0.2rem 0; } .values .quality { padding: 0.2rem 0; } .values .quality .quanlis { padding: 0rem 0; } .values .quality .quanlis .qmg { display: none; } .values .quality .quanlis .qualsit { width: 100%; text-align: right; } .values .quality .quanlis .qualsit .quams { width: 35%; margin: 0 7.5% 0.4rem; text-align: center; } .values .quality .quanlis .qualsit .quams:nth-child(7n) { margin-right: 7.5%; top: -0.8rem; } .values .certificate { margin: 0 0 0rem; } .values .certificate .certim .cel { width: 100%; } .values .certificate .certim .cel .celper .cerm { width: 35%; margin: 0 5%; } .values .certificate .certim .cer { width: 100%; } .values .supply .scate .scam { flex: none; width: 33.3%; padding: 0.3rem; } } .control { width: 100%; padding: 1.2rem 0 2rem; } .control .mitop { margin-bottom: 1rem; } .control .contmgs { width: 100%; position: relative; } .control .contmgs .cmg { display: block; margin: 0 auto 0; width: calc((650 / 1380) * 100%); position: relative; } .control .contmgs .cmg .img { width: 100%; padding-top: 85.71%; } .control .contmgs .quas { position: absolute; top: 48%; left: 49.5%; transform: translate(-50%, -50%); width: 2.54rem; height: 2.54rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; color: #fff; line-height: 1.5; padding: 0.2rem; border-radius: 50%; } .control .contmgs .conlist { width: 100%; position: absolute; top: 0; left: 0; height: 100%; z-index: 2; } .control .contmgs .conlist .citem { position: absolute; width: calc((350 / 650) * 100%); } .control .contmgs .conlist .citem:after { content: ' '; position: absolute; width: 1.46rem; height: 0.66rem; } @media (max-width: 800px) { .control .contmgs .conlist .citem:after { display: none; } } .control .contmgs .conlist .citem .cit { width: 100%; color: #222; line-height: 1.5; } .control .contmgs .conlist .citem .cinp { width: 100%; color: #666; line-height: 1.5; } .control .contmgs .conlist .citem .cinp p { color: #666; line-height: 1.5; } .control .contmgs .conlist .citem:nth-child(1) { right: 101%; top: -1%; text-align: right; } .control .contmgs .conlist .citem:nth-child(1):after { background-image: url("../images/ko1.png"); background-size: 100% 100%; top: 0.2rem; left: calc(100% + 0.15rem); } .control .contmgs .conlist .citem:nth-child(2) { left: 94%; top: 0; text-align: left; } .control .contmgs .conlist .citem:nth-child(2):after { background-image: url("../images/ko3.png"); background-size: 100% 100%; top: 0.2rem; right: calc(100% + 0.15rem); } .control .contmgs .conlist .citem:nth-child(3) { right: 101%; text-align: right; top: 73%; } .control .contmgs .conlist .citem:nth-child(3):after { background-image: url("../images/ko2.png"); background-size: 100% 100%; bottom: calc(100% - 0.25rem); left: calc(100% + 0.15rem); } .control .contmgs .conlist .citem:nth-child(4) { left: 102%; top: 45%; text-align: left; } .control .contmgs .conlist .citem:nth-child(4):after { background-image: url("../images/ko4.png"); background-size: 100% 100%; top: 0.2rem; right: calc(100% + 0.15rem); } .control .contmgs .conlist .citem:nth-child(5) { left: 88%; top: 95%; text-align: left; } .control .contmgs .conlist .citem:nth-child(5):after { background-image: url("../images/ko5.png"); background-size: 100% 100%; bottom: calc(100% - 0.25rem); right: calc(100% + 0.15rem); } @media (max-width: 800px) { .control { padding: 0.5rem 0; } .control .mitop { margin-bottom: 0.5rem; } .control .contmgs .quas { display: none; } .control .contmgs .cmg { width: 100%; } .control .contmgs .cmg .img { display: none; } .control .contmgs .conlist { width: 100%; position: relative; } .control .contmgs .conlist .citem { width: 100% !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; text-align: left !important; margin-bottom: 0.3rem; } .control .contmgs .conlist .citem .cit { width: 100%; font-weight: bold; line-height: 1.5; margin-bottom: 0.08rem; } } .erps { width: 100%; padding: 1.4rem 0; } .erps .earmp { width: 100%; font-size: 0; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; flex-direction: row-reverse; } .erps .earmp .eal { display: inline-block; vertical-align: middle; width: calc((480 / 1380) * 100%); } .erps .earmp .eal .earlist { width: 100%; margin-top: 0.6rem; } .erps .earmp .eal .earlist .eitem { width: 100%; border-top: solid 1px #666; } .erps .earmp .eal .earlist .eitem .eit { width: 100%; font-weight: bold; line-height: 1.5; padding: 0.15rem 0; cursor: pointer; } .erps .earmp .eal .earlist .eitem .econt { width: 100%; padding: 0.1rem 0 0.2rem; display: none; } .erps .earmp .eal .earlist .eitem .econt .tix { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.14rem; } .erps .earmp .eal .earlist .eitem .econt .tuli { width: 100%; color: #666; line-height: 2; } .erps .earmp .eal .earlist .eitem .econt .tuli .tli { width: 100%; font-size: 0; padding: 0.02rem 0; } .erps .earmp .eal .earlist .eitem .econt .tuli .tli .ic { width: 0.07rem; height: 0.07rem; display: inline-block; vertical-align: top; background-color: #15a4c6; margin-top: calc(0.75em - 0.035rem); margin-right: 0.1rem; } .erps .earmp .eal .earlist .eitem .econt .tuli .tli .im { display: inline-block; vertical-align: top; width: calc(100% - 0.17rem); color: 666; line-height: 1.5; } .erps .earmp .eal .earlist .eitem:nth-child(1) .eit { color: #efa618; } .erps .earmp .eal .earlist .eitem:nth-child(2) .eit { color: #eb673c; } .erps .earmp .eal .earlist .eitem:nth-child(3) .eit { color: #9dcd4f; } .erps .earmp .ear { display: inline-block; vertical-align: middle; width: calc((690 / 1380) * 100%); } .erps .earmp .ear .img { width: 100%; padding-top: 100%; } @media (max-width: 800px) { .erps { padding: 0.5rem 0; } .erps .earmp .ear { width: 100%; max-width: 70%; display: block; margin: 0 auto 0.3rem; } .erps .earmp .eal { width: 100%; } } .sharing { width: 100%; padding: 1.4rem 0 4.5rem; } .sharing .mitop { margin-bottom: 0.5rem; } .sharing .mitop .fk { width: 100%; color: #15a4c6; line-height: 1.5; } .sharing .featper { width: 100%; position: relative; /* cursor: url(../images/b10.png) 0 0, pointer; */ position: relative; z-index: 2; } .sharing .featper .swiper-slide { width: 100%; background-color: #fff; border: solid 1px #e5e5e5; padding: 0.6rem 0.2rem 0.4rem 0.4rem; position: relative; z-index: 2; overflow: hidden; } .sharing .featper .swiper-slide:before { content: ' '; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: url(../images/jmg2.png) no-repeat center/cover; transition: all .5s; transform: translateY(100%); opacity: 0; } .sharing .featper .swiper-slide .icon { width: 100%; font-size: 0; } .sharing .featper .swiper-slide .icon span { display: inline-block; vertical-align: middle; width: 0.7rem; height: 0.7rem; } .sharing .featper .swiper-slide .icon span img { width: 100%; display: block; } .sharing .featper .swiper-slide .pit { width: 100%; color: #222; line-height: 1.5; margin: 0.15rem 0 0.25rem; } .sharing .featper .swiper-slide .pinp { width: 100%; color: #666; line-height: 1.5; height: 2.5rem; text-align: justify; } .sharing .featper .swiper-slide .pinp p { color: #666; line-height: 1.5; } .sharing .featper .swiper-slide .num { width: 100%; font-size: 0; margin-top: 0.5rem; } .sharing .featper .swiper-slide .num .lls { display: inline-block; vertical-align: middle; width: 0.08rem; height: 0.4rem; border-radius: 0.04rem; background-color: #15a4c6; margin-right: 0.2rem; } .sharing .featper .swiper-slide .num .lms { display: inline-block; vertical-align: middle; color: #15a4c6; line-height: 1.5; } .sharing .featper .swiper-slide + .swiper-slide { border-left: none; } .sharing .featper .swiper-slide:nth-child(4n+1) { transition-delay: 0.2s; } .sharing .featper .swiper-slide:nth-child(4n+2) { transition-delay: 0.3s; } .sharing .featper .swiper-slide:nth-child(4n+3) { transition-delay: 0.4s; } .sharing .featper .swiper-slide:nth-child(4n+4) { transition-delay: 0.5s; } .sharing .featper .swiper-slide:hover:before { transform: translateY(0); opacity: 1; } .sharing .featper .swiper-scrollbar-drag { background-color: #15a4c6; } /* .sharing .featper .btn { position: absolute; left: calc((920 / 1380) * 100%); top: 50%; transform: translate(-50%, -50%); z-index: 4; height: 0.63rem; } .sharing .featper .btn .bmg { width: 0.63rem; height: 0.63rem; } .sharing .featper .btn .bmg img { width: 100%; display: block; } .sharing .featper .btn .bl, .sharing .featper .btn .br { position: absolute; display: block; width: 0.315rem; height: 0.63rem; top: 0; cursor: pointer; } .sharing .featper .btn .bl { left: 0; } .sharing .featper .btn .br { right: 0; } @media (max-width: 800px) { .sharing { padding: 1rem 0 1.2rem; } .sharing .featper .btn { left: 50%; } } */ .sharing .featper .btn { position: absolute; z-index: 3; top: 45%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .sharing .featper .btn img { width: 100%; display: block; } .sharing .featper .btn img:first-child { display: block; } .sharing .featper .btn img:last-child { display: none; } .sharing .featper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .sharing .featper .btn:hover img:first-child { display: none; } .sharing .featper .btn:hover img:last-child { display: block; } .sharing .featper .bl { left: -0.8rem; } .sharing .featper .br { right: -0.8rem; } @media (max-width: 1500px) { .sharing .featper .btn { background-color: #fff; border: solid 1px #999; } .sharing .featper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .sharing .featper .bl { left: 0rem; } .sharing .featper .br { right: 0rem; } } .cluster { width: 100%; position: relative; overflow: hidden; } .cluster .clust { width: 100%; width: 100vw; height: 90vh; } .cluster .imgs { width: 100%; } .cluster .imgs .img { width: 100%; padding-top: 51.015625%; } .cluster .linemg { width: 100vw; height: 100vh; position: relative; z-index: 2; top: 0; left: 0; } .cluster .linemg .lmg { width: 100%; height: 100%; display: block; transition: all ease 1s; } .cluster .linemg.enlarge .lmg { transform: scale(1.1); } .cluster .pionlis { width: calc((875 / 1920) * 100vw); height: calc((700 / 1920) * 100vw); position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); } .cluster .pionlis .piont { position: absolute; z-index: 6; transform: scale(0); } .cluster .pionlis .piont a { width: 100%; display: block; } .cluster .pionlis .piont .dd { width: 1px; height: 1px; display: block; } .cluster .pionlis .piont .img { position: absolute; top: 50%; left: 50%; cursor: pointer; transform: translate(-50%, -50%); width: 0.45rem; height: 0.59rem; } .cluster .pionlis .piont .img img { width: 100%; display: block; } .cluster .pionlis .piont .px { width: auto; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); color: #15a4c6; line-height: 1.5; text-align: center; white-space: nowrap; } .cluster .pionlis .piont.on { transform: scale(1.3); } .cluster .pionlis .piont.enlarge.on { transition: all ease 1s; transform: scale(1.3); } .cluster .pionlis .piont.enlarge { transform: scale(1.1); } .cluster .pionlis .piont:nth-child(1) { left: calc(1562 / 1920 * 100%); top: calc(590 / 980 * 100%); transition: all ease 2.1s; } .cluster .pionlis .piont:nth-child(1) .img { width: 0.85rem; height: auto; } .cluster .pionlis .piont:nth-child(2) { left: calc(1412 / 1920 * 100%); top: calc(757 / 980 * 100%); transition: all ease 2.2s; } .cluster .pionlis .piont:nth-child(2) .img { width: 0.5rem; height: auto; } .cluster .pionlis .piont:nth-child(3) { left: calc(1083 / 1920 * 100%); top: calc(671 / 980 * 100%); transition: all ease 2.3s; } .cluster .pionlis .piont:nth-child(3) .img { width: 0.73rem; height: auto; } .cluster .pionlis .piont:nth-child(4) { left: calc(683 / 1920 * 100%); top: calc(747 / 980 * 100%); transition: all ease 2.4s; } .cluster .pionlis .piont:nth-child(4) .img { width: 0.73rem; height: auto; } .cluster .pionlis .piont:nth-child(5) { left: calc(1477 / 1920 * 100%); top: calc(204 / 980 * 100%); transition: all ease 2.5s; } .cluster .pionlis .piont:nth-child(5) .img { width: 0.73rem; height: auto; } .cluster .pionlis .piont:nth-child(6) { left: calc(1234 / 1920 * 100%); top: calc(387 / 980 * 100%); transition: all ease 2.6s; } .cluster .pionlis .piont:nth-child(6) .img { width: 1.2rem; height: auto; } .cluster .pionlis .piont:nth-child(7) { left: calc(818 / 1920 * 100%); top: calc(452 / 980 * 100%); transition: all ease 2.7s; } .cluster .pionlis .piont:nth-child(7) .img { width: 1.2rem; height: auto; } .cluster .pionlis .piont:nth-child(8) { left: calc(808 / 1920 * 100%); top: calc(154 / 980 * 100%); transition: all ease 2.8s; } .cluster .pionlis .piont:nth-child(8) .img { width: 1.0rem; height: auto; } .cluster .pionlis .piont:nth-child(9) { left: calc(431 / 1920 * 100%); top: calc(289 / 980 * 100%); transition: all ease 2.9s; } .cluster .pionlis .piont:nth-child(9) .img { width: 1.0rem; height: auto; } .cluster .pionlis .piont:nth-child(10) { display: none; } .cluster .pionlis .tit { position: absolute; z-index: 4; top: 43%; left: 50%; transform: translate(-50%, -50%) scale(0); color: #086db0; font-weight: bold; line-height: 1.5; cursor: pointer; text-align: center; } .cluster .pionlis .tit p { color: #086db0; font-weight: bold; line-height: 1.5; } .cluster .pionlis .tit.big { transition: all ease 2s; transform: translate(-50%, -50%) scale(1.3); } .cluster .pionlis .tit:hover { transition: all ease 1s; transform: translate(-50%, -50%) scale(1.4); } @media (max-width: 800px) { .cluster .pionlis { width: 110vw; height: 80vw; } } .dorxm { background-color: #ebf0f5; } .directors { width: 100%; padding: 1rem 0 2rem; } .directors .direper { width: 100%; position: relative; } .directors .direper .direm { width: calc((438 / 1380) * 100%); display: inline-block; vertical-align: top; margin-right: calc((32 / 1380) * 100%); margin-bottom: 0.3rem; } .directors .direper .direm .imgs { overflow: hidden; width: 100%; } .directors .direper .direm .imgs .img { width: 100%; padding-top: 87.41%; transition: all ease 0.5s; } .directors .direper .direm .coms { width: 100%; background-color: #fff; padding: 0.4rem; box-shadow: 0px 6px 16px 1px rgba(112, 112, 112, 0.13); } .directors .direper .direm .coms .fit { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.1rem; } .directors .direper .direm .coms .finp { width: 100%; color: #222; line-height: 1.5; height: 6em; } .directors .direper .direm .coms .finp p { color: #222; line-height: 1.5; } .directors .direper .direm:nth-child(3n) { margin-right: 0; } .directors .direper .direm:nth-child(3n+1) { transition-delay: 0.2s; } .directors .direper .direm:nth-child(3n+2) { transition-delay: 0.3s; } .directors .direper .direm:nth-child(3n+3) { transition-delay: 0.4s; } .directors .direper .swiper-container { padding-bottom: 0.4rem; } .directors .direper .swiper-pagination { width: 100%; bottom: 0; } .directors .direper .swiper-pagination-bullet { background-color: #ccc; opacity: 1; transition: all ease 0.3s; } .directors .direper .swiper-pagination-bullet-active { background-color: #149fc2; width: 0.3rem; height: 8px; border-radius: 4px; } .directors .direper .btn { position: absolute; z-index: 3; top: 45%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .directors .direper .btn img { width: 100%; display: block; } .directors .direper .btn img:first-child { display: block; } .directors .direper .btn img:last-child { display: none; } .directors .direper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .directors .direper .btn:hover img:first-child { display: none; } .directors .direper .btn:hover img:last-child { display: block; } .directors .direper .bl { left: -0.8rem; } .directors .direper .br { right: -0.8rem; } @media (max-width: 1500px) { .directors .direper .btn { background-color: #fff; border: solid 1px #999; } .directors .direper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .directors .direper .bl { left: 0rem; } .directors .direper .br { right: 0rem; } } .Committee { width: 100%; padding: 0.7rem 0; } .Committee .commlis { width: 100%; font-size: 0; } .Committee .commlis .compe { display: inline-block; vertical-align: top; width: calc((320 / 1380) * 100%); margin-right: calc((32 / 1380) * 100%); margin-bottom: 0.3rem; } .Committee .commlis .compe .imgs { overflow: hidden; width: 100%; } .Committee .commlis .compe .imgs .img { width: 100%; padding-top: 87.5%; transition: all ease 0.5s; } .Committee .commlis .compe .coms { width: 100%; background-color: #ebf0f5; padding: 0.4rem; position: relative; } .Committee .commlis .compe .coms:after { content: ' '; position: absolute; width: 0.08rem; height: 0.3rem; background-color: #00a9ce; border-radius: 0.04rem; left: 0.4rem; top: 0; transform: translateY(-50%); } .Committee .commlis .compe .coms .fit { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.1rem; } .Committee .commlis .compe .coms .finp { width: 100%; color: #222; line-height: 1.5; height: 6em; } .Committee .commlis .compe .coms .finp p { color: #222; line-height: 1.5; } .Committee .commlis .compe:nth-child(4n) { margin-right: 0; } .Committee .commlis .compe:nth-child(4n+1) { transition-delay: 0.2s; } .Committee .commlis .compe:nth-child(4n+2) { transition-delay: 0.3s; } .Committee .commlis .compe:nth-child(4n+3) { transition-delay: 0.4s; } .Committee .commlis .compe:nth-child(4n+4) { transition-delay: 0.5s; } .Committee.gray { background-color: #ebf0f5; } .Committee.gray .commlis .compe .coms { background-color: #fff; } .detam { width: 100%; padding: 0.7rem 0; } .detam .deomt { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .detam .deomt .del { display: inline-block; vertical-align: middle; width: calc((685 / 1380) * 100%); } .detam .deomt .del .delper { width: 100%; position: relative; } .detam .deomt .del .delper .swiper-slide { width: 100%; } .detam .deomt .del .delper .swiper-slide .img { width: 100%; padding-top: 100%; } .detam .deomt .del .delper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .detam .deomt .del .delper .btn img { width: 100%; display: block; } .detam .deomt .del .delper .btn img:first-child { display: block; } .detam .deomt .del .delper .btn img:last-child { display: none; } .detam .deomt .del .delper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .detam .deomt .del .delper .btn:hover img:first-child { display: none; } .detam .deomt .del .delper .btn:hover img:last-child { display: block; } .detam .deomt .del .delper .bl { left: -0.3rem; } .detam .deomt .del .delper .br { right: -0.3rem; } .detam .deomt .der { display: inline-block; vertical-align: middle; width: calc((530 / 1380) * 100%); } .detam .deomt .der .xh { width: 100%; color: #999; line-height: 1.5; } .detam .deomt .der .xit { width: 100%; color: #222; line-height: 1.5; } .detam .deomt .der .line { width: 100%; font-size: 0; margin: 0.36rem 0; } .detam .deomt .der .line span { display: inline-block; vertical-align: middle; background-color: #333; width: 0.2rem; height: 3px; } .detam .deomt .der .xinp { width: 100%; margin: 0.36rem 0; color: #999; line-height: 1.6; } .detam .deomt .der .xinp p { color: #999; line-height: 1.6; } .detam .deomt .der .xob { width: 100%; border-top: solid 2px #b5b5b5; padding: 0.35rem 0; font-size: 0; margin-top: 0.36rem; position: relative; } .detam .deomt .der .xob:after { content: ' '; position: absolute; width: 0.14rem; height: 0.14rem; border-radius: 50%; top: -1px; left: 0; transform: translateY(-50%); border: solid 2px #b5b5b5; background-color: #fff; } .detam .deomt .der .xob .vmg { display: inline-block; vertical-align: middle; width: 1.37rem; margin-right: 0.23rem; position: relative; } .detam .deomt .der .xob .vmg .img { width: 100%; padding-top: 62.77%; } .detam .deomt .der .xob .vmg .xox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .detam .deomt .der .xob .vmg .xox .cm { width: 0.61rem; height: 0.61rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } .detam .deomt .der .xob .vmg .xox .cm img { width: 100%; display: block; } .detam .deomt .der .xob .vom { display: inline-block; vertical-align: middle; width: calc(100% - 1.37rem - 0.24rem); color: #999; line-height: 1.6; } .detam .deomt .der .xob .vom p { color: #999; line-height: 1.6; } @media (max-width: 1400px) { .detam .deomt .del .delper .bl { left: 0rem; } .detam .deomt .del .delper .br { right: 0rem; } } .function { width: 100%; padding: 0.7rem 0; } .function .funtlis { width: 100%; font-size: 0; } .function .funtlis .foem { display: inline-block; vertical-align: top; width: calc((436 / 1380) * 100%); margin-right: calc((35 / 1380) * 100%); margin-bottom: 0.3rem; } .function .funtlis .foem a { width: 100%; display: block; } .function .funtlis .foem .imgs { overflow: hidden; width: 100%; } .function .funtlis .foem .imgs .img { width: 100%; padding-top: 64.2%; transition: all ease 0.5s; } .function .funtlis .foem .coms { width: 100%; background-color: #ebf0f5; padding: 0.4rem; position: relative; transition: all ease 0.5s; } .function .funtlis .foem .coms:after { content: ' '; position: absolute; right: 0.3rem; top: 0; width: 0.32rem; height: 0.26rem; transform: translateY(-50%); background-image: url("../images/i20.png"); background-size: 100% 100%; background-repeat: no-repeat; } .function .funtlis .foem .coms .line { width: 100%; font-size: 0; margin: 0.35rem 0 0.15rem; } .function .funtlis .foem .coms .line span { display: inline-block; vertical-align: middle; background-color: #ccc; height: 3px; width: 0.3rem; } .function .funtlis .foem .coms .fit { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.1rem; } .function .funtlis .foem .coms .finp { width: 100%; color: #666; line-height: 1.5; height: 4.5em; } .function .funtlis .foem .coms .finp p { color: #666; line-height: 1.5; } .function .funtlis .foem .coms .num { width: 100%; color: #222; line-height: 1.5; font-weight: bold; margin-top: 0.45rem; } .function .funtlis .foem:hover .imgs .img { transform: scale(1.1); } .function .funtlis .foem:hover .coms { background-color: #15a4c6; } .function .funtlis .foem:hover .coms .line span { background-color: #fff; } .function .funtlis .foem:hover .coms .fit { color: #fff; } .function .funtlis .foem:hover .coms .finp { color: #fff; } .function .funtlis .foem:hover .coms .finp p { color: #fff; } .function .funtlis .foem:hover .coms .num { color: #fff; } .function .funtlis .foem:nth-child(3n) { margin-right: 0; } .function .funtlis .foem:nth-child(3n+1) { transition-delay: 0.2s; } .function .funtlis .foem:nth-child(3n+2) { transition-delay: 0.3s; } .function .funtlis .foem:nth-child(3n+3) { transition-delay: 0.4s; } .skills { width: 100%; padding: 1rem 0; } .skills .skillis { width: 100%; font-size: 0; } .skills .skillis .skem { display: inline-block; vertical-align: top; width: calc((670 / 1380) * 100%); margin-bottom: 0.3rem; background-color: #ebf0f5; margin-right: calc((39 / 1380) * 100%); } .skills .skillis .skem a { width: 100%; display: block; padding: 0.5rem; } .skills .skillis .skem .line { width: 100%; font-size: 0; margin: 0.3rem 0 0.25rem; } .skills .skillis .skem .line span { display: inline-block; vertical-align: middle; background-color: #ccc; height: 3px; width: 0.3rem; } .skills .skillis .skem .fit { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.1rem; } .skills .skillis .skem .finp { width: 100%; color: #666; line-height: 1.5; height: 3em; } .skills .skillis .skem .finp p { color: #666; line-height: 1.5; } .skills .skillis .skem:nth-child(2n) { margin-right: 0; } .skills .skillis .skem:nth-child(2n+1) { transition-delay: 0.2s; } .skills .skillis .skem:nth-child(2n+2) { transition-delay: 0.3s; } @media (max-width: 800px) { .skills .skillis .skem { width: 100%; margin-right: 0; } } .Scenarios { width: 100%; padding: 1rem 0; background-color: rgba(145, 194, 224, 0.5); } .Scenarios .scens { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; } .Scenarios .scens .sel { width: calc((819 / 1920 ) * 100%); display: inline-block; vertical-align: middle; padding-left: calc((270 / 1920) * 100%); display: flex; flex-wrap: wrap; align-content: space-around; padding-right: 0.8rem; } .Scenarios .scens .sel .mitop .fk { color: #222; } .Scenarios .scens .sel .comps { width: 100%; } .Scenarios .scens .sel .comps .cmp { width: 100%; display: none; padding-left: 0.26rem; border-left: solid 1px #8697a1; padding: 0.1rem 0 0.1rem 0.26rem; } .Scenarios .scens .sel .comps .cmp .cit { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.06rem; } .Scenarios .scens .sel .comps .cmp .cinp { width: 100%; color: #666; line-height: 1.5; } .Scenarios .scens .sel .comps .cmp .cinp p { color: #666; line-height: 1.5; } .Scenarios .scens .sel .comps .cmp.on { display: block; } .Scenarios .scens .sel .comps .pinps { width: 100%; color: #222; line-height: 1.6; } .Scenarios .scens .sel .comps .pinps p { color: #222; line-height: 1.6; } .Scenarios .scens .sel .btns { font-size: 0; width: 100%; } .Scenarios .scens .sel .btns .btn { position: relative; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #ddd; border-radius: 50%; background-color: rgba(145, 194, 224, 0.5); display: inline-block; vertical-align: middle; } .Scenarios .scens .sel .btns .btn img { width: 100%; display: block; } .Scenarios .scens .sel .btns .btn img:first-child { display: block; } .Scenarios .scens .sel .btns .btn img:last-child { display: none; } .Scenarios .scens .sel .btns .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .Scenarios .scens .sel .btns .btn:hover img:first-child { display: none; } .Scenarios .scens .sel .btns .btn:hover img:last-child { display: block; } .Scenarios .scens .sel .btns .btn + .btn { margin-left: 0.24rem; } .Scenarios .scens .ser { width: calc((1100 / 1920 ) * 100%); display: inline-block; vertical-align: middle; } .Scenarios .scens .ser .sepers { width: 100%; } .Scenarios .scens .ser .sepers .swiper-slide { width: 100%; } .Scenarios .scens .ser .sepers .swiper-slide .img { width: 100%; padding-top: 63.90%; } .Scenarios.wbg { background-color: #fff; } .Scenarios.wbg .scens .sel .btns .btn { border: solid 1px #ddd; background-color: white; } .Scenarios.wbg .scens .sel .btns .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .Scenarios.wbg .scens .sel .btns .btn:hover img:first-child { display: none; } .Scenarios.wbg .scens .sel .btns .btn:hover img:last-child { display: block; } .Scenarios.transfer .scens { flex-direction: row-reverse; } .Scenarios.transfer .scens .sel { padding-left: 1rem; padding-right: calc((270 / 1920) * 100%); } @media (max-width: 1400px) { .Scenarios .scens .sel { padding-left: 3%; } } @media (max-width: 800px) { .Scenarios { padding: 0.5rem 0 0; } .Scenarios .scens .sel { width: 100%; margin-bottom: 0.3rem; padding: 0 0.5rem; } .Scenarios .scens .sel .comps { margin: 0.3rem 0 0.5rem; } .Scenarios .scens .ser { width: 100%; } .Scenarios.transfer .scens .sel { padding: 0 0.5rem; } } .appcation { width: 100%; padding: 1.2rem 0; } .appcation .cationper { width: 100%; font-size: 0; position: relative; } .appcation .cationper .catom { display: inline-block; vertical-align: top; width: calc((336 / 1380) * 100%); margin-right: calc((11 / 1380) * 100%); } .appcation .cationper .catom .imgs { width: 100%; overflow: hidden; } .appcation .cationper .catom .imgs .img { width: 100%; padding-top: 64.37%; transition: all ease 0.4s; } .appcation .cationper .catom .sim { width: 100%; text-align: center; line-height: 2; color: #222; margin-top: 0.06rem; } .appcation .cationper .catom:nth-child(4n) { margin-right: 0; } .appcation .cationper .catom:nth-child(4n+1) { transition-delay: 0.2s; } .appcation .cationper .catom:nth-child(4n+2) { transition-delay: 0.3s; } .appcation .cationper .catom:nth-child(4n+3) { transition-delay: 0.4s; } .appcation .cationper .catom:nth-child(4n+4) { transition-delay: 0.5s; } .appcation .cationper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .appcation .cationper .btn img { width: 100%; display: block; } .appcation .cationper .btn img:first-child { display: block; } .appcation .cationper .btn img:last-child { display: none; } .appcation .cationper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .appcation .cationper .btn:hover img:first-child { display: none; } .appcation .cationper .btn:hover img:last-child { display: block; } .appcation .cationper .bl { left: -0.8rem; } .appcation .cationper .br { right: -0.8rem; } @media (max-width: 1500px) { .appcation .cationper .btn { background-color: #fff; border: solid 1px #999; } .appcation .cationper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .appcation .cationper .bl { left: 0rem; } .appcation .cationper .br { right: 0rem; } } @media (max-width: 800px) { .appcation .cationper .catom { width: 48%; margin-right: 4%; } .appcation .cationper .catom:nth-child(2n) { margin-right: 0; } } .cimgs { width: 100%; } .cimgs .cmx { width: 100%; padding-top: 41.66%; } .lifeCycle { width: 100%; padding: 1.4rem 0; } .lifeCycle .mitop { width: 100%; margin-bottom: 0.6rem; } .lifeCycle .mitop .fk { width: 100%; color: #fff; line-height: 1.5; } .lifeCycle .cycles { width: 100%; font-size: 0; position: relative; } .lifeCycle .cycles:before { content: ' '; width: calc((320 / 1920) * 100%); height: 1px; background-color: #fff; left: 0; top: calc(0.3rem + 0.75em); font-size: 0.6rem; position: absolute; } .lifeCycle .cycles:after { content: ' '; position: absolute; width: calc((320 / 1920) * 100%); height: 1px; background-color: #fff; right: 0; top: calc(0.3rem + 0.75em); font-size: 0.6rem; } .lifeCycle .cycles .cycle { width: 100%; font-size: 0; } .lifeCycle .cycles .cycle .cyclm { width: calc((342 / 1380) * 100%); display: inline-block; vertical-align: top; margin: 0 calc((59 / 1380) * 100%); padding: 0.3rem 0; position: relative; } .lifeCycle .cycles .cycle .cyclm:after { content: ' '; position: absolute; width: calc((118 / 342) * 100%); top: calc(0.3rem + 0.75em); font-size: 0.6rem; left: 100%; height: 1px; width: 0; transition: all ease 0.6s; background-color: #fff; } .lifeCycle .cycles .cycle .cyclm .cum { width: 100%; font-size: 0; text-align: center; } .lifeCycle .cycles .cycle .cyclm .cum span { display: inline-block; vertical-align: middle; color: #fff; line-height: 1.5; } .lifeCycle .cycles .cycle .cyclm .xpm { width: 100%; text-align: center; color: #fff; line-height: 1.5; margin: 0.2rem 0 0.4rem; } .lifeCycle .cycles .cycle .cyclm .xpm p { color: #fff; line-height: 1.5; } .lifeCycle .cycles .cycle .cyclm .icon { width: 100%; font-size: 0; text-align: center; } .lifeCycle .cycles .cycle .cyclm .icon span { display: inline-block; vertical-align: middle; width: 0.7rem; height: 0.7rem; } .lifeCycle .cycles .cycle .cyclm .icon span img { width: 100%; display: block; } .lifeCycle .cycles .cycle .cyclm:nth-child(3n):after { display: none; } .lifeCycle .cycles .cycle .cyclm.show:after { width: calc((118 / 342) * 100%); } @media (max-width: 1400px) { .lifeCycle .cycles:before { width: calc(3% + (60 / 1920) * 100%); } .lifeCycle .cycles:after { width: calc(3% + (60 / 1920) * 100%); } } .brands { width: 100%; padding: 1.2rem 0; } .brands .mitop .fk { margin-top: 0.1rem; } .brands .branlis { width: 100%; font-size: 0; } .brands .branlis .braom { display: inline-block; vertical-align: top; width: calc((460 / 1380) * 100%); margin: 0.3rem 0; padding: 0 0.6rem; border-left: solid 1px rgba(102, 102, 102, 0.3); } .brands .branlis .braom .bix { width: 100%; color: #00a9ce; margin-bottom: 0.1rem; } .brands .branlis .braom .bix span { display: inline-block; vertical-align: middle; color: #00a9ce; } .brands .branlis .braom .bix .xm { color: #15a4c6; margin-left: 0.1rem; } .brands .branlis .braom:nth-child(3n+1) { border-left: none; } .promote { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; } .promote .prl { display: inline-block; vertical-align: middle; width: calc((1100 / 1920) * 100%); position: relative; } .promote .prl .mitop { position: absolute; left: calc((270 / 1920) * 100%); top: 1.4rem; width: auto; } .promote .prl .img { width: 100%; padding-top: 87.27%; } .promote .prr { display: inline-block; vertical-align: middle; width: calc((820 / 1920) * 100%); display: flex; flex-wrap: wrap; } .promote .prr .prem { width: 100%; transition: all ease 0.3s; position: relative; } .promote .prr .prem:after { content: ' '; position: absolute; left: 0; height: 100%; background-color: transparent; top: 0; width: 1px; transition: all ease 0.3s; } .promote .prr .prem .prtop { width: 100%; padding: 0.4rem; height: 100%; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .promote .prr .prem .prtop .px { display: inline-block; vertical-align: middle; color: #222; line-height: 1.5; } .promote .prr .prem .prtop .rtn { display: inline-block; vertical-align: middle; } .promote .prr .prem .prtop .rtn span { width: 0.6rem; height: 0.6rem; line-height: 0.6rem; color: #fff; font-size: 24px; text-align: center; background-color: #0ac4cf; border-radius: 50%; } .promote .prr .prem .prtop .rtn span:first-child { display: block; } .promote .prr .prem .prtop .rtn span:last-child { display: none; } .promote .prr .prem .pecom { width: 100%; padding: 0.4rem; display: none; overflow: hidden; } .promote .prr .prem .pecom .pinp { width: 100%; color: #333; line-height: 1.5; } .promote .prr .prem .pecom .pinp p { color: #333; line-height: 1.5; } .promote .prr .prem.on { background-color: #15a4c6; width: 100%; } .promote .prr .prem.on:after { width: 0.3rem; left: -0.3rem; background-color: #15a4c6; } .promote .prr .prem.on .prtop { height: 50%; } .promote .prr .prem.on .prtop .px { color: #fff; } .promote .prr .prem.on .prtop .rtn span { background-color: #fff; color: #0ac4cf; } .promote .prr .prem.on .prtop .rtn span:first-child { display: none; } .promote .prr .prem.on .prtop .rtn span:last-child { display: block; } .promote .prr .prem.on .pecom { height: 50%; } .promote .prr .prem.on .pecom .pinp { color: #fff; } .promote .prr .prem.on .pecom .pinp p { color: #fff; } @media (max-width: 800px) { .promote .prl { width: 100%; } .promote .prr { width: 100%; display: block; } } .platform { width: 100%; padding: 1.4rem 0; background-color: #cfe1ef; } .platform .platm { width: 100%; position: relative; } .platform .platm .panav { width: 100%; } .platform .platm .panav .swiper-slide { display: inline-block; vertical-align: middle; width: auto; cursor: pointer; margin-right: 0.5rem; } .platform .platm .panav .swiper-slide span { display: inline-block; vertical-align: middle; color: #222; line-height: 2; font-weight: bold; position: relative; } .platform .platm .panav .swiper-slide span:after { content: ' '; width: 100%; height: 2px; background-color: #15a4c6; width: 0; position: absolute; bottom: 0; left: 0; transition: all ease 0.5s; } .platform .platm .panav .swiper-slide.on span { color: #15a4c6; } .platform .platm .panav .swiper-slide.on span:after { width: 100%; } .platform .platm .conpont { width: 100%; } .platform .platm .conpont .compt { width: 100%; display: none; } .platform .platm .conpont .compt.on { display: block; } .platform .platm .cinps { width: 100%; margin: 0.6rem 0; color: #222; line-height: 1.5; } .platform .platm .cinps p { color: #222; line-height: 1.5; } .platform .platm .conlistr { width: 100%; font-size: 0; } .platform .platm .conlistr .comvs { display: inline-block; vertical-align: top; width: calc((213 / 1380) * 100%); margin-right: calc((20 / 1380) * 100%); background-color: #fff; padding: 0.3rem 0.3rem; } .platform .platm .conlistr .comvs a { width: 100%; display: block; } .platform .platm .conlistr .comvs .cin { width: 0.8rem; height: 0.8rem; display: block; margin: 0 auto 0.2rem; } .platform .platm .conlistr .comvs .cin img { width: 100%; display: block; } .platform .platm .conlistr .comvs .cin img:first-child { display: block; } .platform .platm .conlistr .comvs .cin img:last-child { display: none; } .platform .platm .conlistr .comvs .cot { width: 100%; text-align: center; line-height: 1.5; color: #222; } .platform .platm .conlistr .comvs:nth-child(6n) { margin-right: 0; } .platform .platm .conlistr .comvs:nth-child(6n+1) { transition-delay: 0.2s; } .platform .platm .conlistr .comvs:nth-child(6n+2) { transition-delay: 0.3s; } .platform .platm .conlistr .comvs:nth-child(6n+3) { transition-delay: 0.4s; } .platform .platm .conlistr .comvs:nth-child(6n+4) { transition-delay: 0.5s; } .platform .platm .conlistr .comvs:nth-child(6n+5) { transition-delay: 0.6s; } .platform .platm .conlistr .comvs:nth-child(6n+6) { transition-delay: 0.7s; } .platform .platm .conlistr .comvs:hover { background-color: #0ac4cf; } .platform .platm .conlistr .comvs:hover .cin img:first-child { display: none; } .platform .platm .conlistr .comvs:hover .cin img:last-child { display: block; } .platform .platm .conlistr .comvs:hover .cot { color: #fff; } .platform .platm .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .platform .platm .btn img { width: 100%; display: block; } .platform .platm .btn img:first-child { display: block; } .platform .platm .btn img:last-child { display: none; } .platform .platm .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .platform .platm .btn:hover img:first-child { display: none; } .platform .platm .btn:hover img:last-child { display: block; } .platform .platm .bl { left: -0.8rem; } .platform .platm .br { right: -0.8rem; } @media (max-width: 1500px) { .platform .platm .btn { background-color: #fff; border: solid 1px #999; } .platform .platm .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .platform .platm .bl { left: 0rem; } .platform .platm .br { right: 0rem; } } .Customers { width: 100%; background-color: #ddecf5; padding: 1.2rem 0; } .Customers .honorper { width: 100%; font-size: 0; position: relative; } .Customers .honorper .honor { display: inline-block; vertical-align: middle; width: 1.85rem; margin: 0 calc((45 / 1380) * 100%); } .Customers .honorper .honor .imgs { width: 100%; position: relative; } .Customers .honorper .honor .imgs .img { width: 100%; padding-top: 139.45%; } .Customers .honorper .honor .imgs .mg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; } .Customers .honorper .honor .imt { width: 100%; text-align: center; line-height: 2; height: 4em; margin-top: 0.04rem; color: #717273; } .Customers .honorper .btn { position: absolute; z-index: 3; top: 40%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .Customers .honorper .btn img { width: 100%; display: block; } .Customers .honorper .btn img:first-child { display: block; } .Customers .honorper .btn img:last-child { display: none; } .Customers .honorper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .Customers .honorper .btn:hover img:first-child { display: none; } .Customers .honorper .btn:hover img:last-child { display: block; } .Customers .honorper .bl { left: -0.8rem; } .Customers .honorper .br { right: -0.8rem; } @media (max-width: 1500px) { .Customers .honorper .btn { background-color: #fff; border: solid 1px #999; } .Customers .honorper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .Customers .honorper .bl { left: 0rem; } .Customers .honorper .br { right: 0rem; } } @media (max-width: 800px) { .Customers { padding: 0.5rem 0; } .Customers .honorper .swiper-slide { font-size: 0; } .Customers .honorper .honor { width: 40%; margin: 5%; display: inline-block; vertical-align: top; } } .partners { width: 100%; padding: 1.2rem 0; } .partners .mitop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .partners .mitop .ner { display: inline-block; vertical-align: middle; text-align: right; } .partners .mitop .ner .nernav { width: 100%; } .partners .mitop .ner .nernav .swiper-slide { width: auto; display: inline-block; vertical-align: middle; background-color: #ebf0f5; padding: 0 0.45rem; color: #222; line-height: 2.5; margin: 0 0.1rem; cursor: pointer; } .partners .mitop .ner .nernav .swiper-slide.on { background-color: #15a4c6; color: #fff; } .partners .partom { width: 100%; } .partners .partom .parm { width: 100%; display: none; } .partners .partom .parm.on { display: block; } .partners .partom .parmper { width: 100%; border-top: solid 1px #ddd; font-size: 0; } .partners .partom .parmper .apom { width: calc((230 / 1380) * 100%); display: inline-block; vertical-align: top; border-bottom: solid 1px #ddd; } .partners .partom .parmper .apom .img { width: 100%; padding-top: 52.17%; transition: all ease 0.3s; } .partners .partom .parmper .apom:nth-child(6n+1) { transition-delay: 0.2s; } .partners .partom .parmper .apom:nth-child(6n+2) { transition-delay: 0.3s; } .partners .partom .parmper .apom:nth-child(6n+3) { transition-delay: 0.4s; } .partners .partom .parmper .apom:nth-child(6n+4) { transition-delay: 0.5s; } .partners .partom .parmper .apom:nth-child(6n+5) { transition-delay: 0.6s; } .partners .partom .parmper .apom:nth-child(6n+6) { transition-delay: 0.7s; } @media (max-width: 800px) { .partners .mitop .nel { width: 100%; margin-bottom: 0.2rem; } .partners .mitop .ner { width: 100%; text-align: left; } .partners .partom { width: 100%; } .partners .partom .parmper .apom { width: 33.3%; } } .casep { width: 100%; padding: 1.4rem 0; } .casep .casp { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } .casep .casp .casl { display: inline-block; vertical-align: middle; width: calc((620 / 1380) * 100%); } .casep .casp .casl .aclper { width: 100%; } .casep .casp .casl .aclper .swiper-slide { width: 100%; } .casep .casp .casl .aclper .swiper-slide a { width: 100%; display: block; } .casep .casp .casl .aclper .imgs { width: 100%; overflow: hidden; } .casep .casp .casl .aclper .imgs .img { width: 100%; padding-top: 64.03%; transition: all ease 0.3s; } .casep .casp .casl .aclper .som { width: 100%; background-color: #fff; padding: 0.4rem; } .casep .casp .casl .aclper .som .sit { width: 100%; color: #131313; line-height: 1.5; } .casep .casp .casl .aclper .som .sinp { width: 100%; color: #666; line-height: 1.5; height: 4.5em; margin: 0.1rem 0 0.2rem; } .casep .casp .casl .aclper .som .sinp p { color: #666; line-height: 1.5; } .casep .casp .casl .aclper .som .more { width: 100%; font-size: 0; } .casep .casp .casl .aclper .som .more span { display: inline-block; vertical-align: middle; width: 20px; height: 20px; } .casep .casp .casl .aclper .som .more span img { width: 100%; display: inline-block; } .casep .casp .casl .aclper .som .more span img:first-child { display: block; } .casep .casp .casl .aclper .som .more span img:last-child { display: none; } .casep .casp .casl .aclper .swiper-slide:hover .imgs .img { transform: scale(1.1); } .casep .casp .casl .aclper .swiper-slide:hover .som { background-color: #0ac4cf; } .casep .casp .casl .aclper .swiper-slide:hover .som .sit { color: #fff; } .casep .casp .casl .aclper .swiper-slide:hover .som .sinp { color: #fff; } .casep .casp .casl .aclper .swiper-slide:hover .som .sinp p { color: #fff; } .casep .casp .casl .aclper .swiper-slide:hover .som .more span img:first-child { display: none; } .casep .casp .casl .aclper .swiper-slide:hover .som .more span img:last-child { display: block; } .casep .casp .casr { display: flex; flex-wrap: wrap; align-content: space-between; width: calc((700 / 1380) * 100%); } .casep .casp .casr .mitop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .casep .casp .casr .mitop .ner { display: inline-block; vertical-align: middle; } .casep .casp .casr .mitop .ner .btns { display: inline-block; vertical-align: middle; font-size: 0; } .casep .casp .casr .mitop .ner .btns .btn { position: relative; display: inline-block; vertical-align: middle; z-index: 3; width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: transparent; } .casep .casp .casr .mitop .ner .btns .btn img { width: 100%; display: block; } .casep .casp .casr .mitop .ner .btns .btn img:first-child { display: block; } .casep .casp .casr .mitop .ner .btns .btn img:last-child { display: none; } .casep .casp .casr .mitop .ner .btns .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .casep .casp .casr .mitop .ner .btns .btn:hover img:first-child { display: none; } .casep .casp .casr .mitop .ner .btns .btn:hover img:last-child { display: block; } .casep .casp .casr .mitop .ner .btns .btn + .btn { margin-left: 0.3rem; } .casep .casp .casr .caspers { width: 100%; } .casep .casp .casr .caspers .caspm { display: inline-block; vertical-align: top; width: 48%; margin-right: 4%; padding-left: 0.24rem; border-left: solid 1px #a0b9bf; } .casep .casp .casr .caspers .caspm a { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column-reverse; } .casep .casp .casr .caspers .caspm .imgs { width: 100%; overflow: hidden; } .casep .casp .casr .caspers .caspm .imgs .img { width: 100%; padding-top: 63.66%; transition: all ease 0.3s; } .casep .casp .casr .caspers .caspm .som { width: 100%; margin-bottom: 0.5rem; } .casep .casp .casr .caspers .caspm .som .sit { width: 100%; color: #131313; line-height: 1.5; } .casep .casp .casr .caspers .caspm .som .sinp { width: 100%; color: #666; line-height: 1.5; height: 6em; margin: 0.1rem 0 0.15rem; } .casep .casp .casr .caspers .caspm .som .sinp p { color: #666; line-height: 1.5; } .casep .casp .casr .caspers .caspm .som .more { width: 100%; font-size: 0; } .casep .casp .casr .caspers .caspm .som .more span { display: inline-block; vertical-align: middle; width: 20px; height: 20px; } .casep .casp .casr .caspers .caspm .som .more span img { width: 100%; display: inline-block; } .casep .casp .casr .caspers .caspm:nth-child(2n) { margin-right: 0; } .casep .casp .casr .caspers .caspm:nth-child(2n+1) { transition-delay: 0.2s; } .casep .casp .casr .caspers .caspm:nth-child(2n+2) { transition-delay: 0.3s; } .casep .casp .casr .caspers .caspm:hover .imgs .imt { transform: scale(1.1); } @media (max-width: 800px) { .casep { padding: 0.5rem 0; } .casep .casp .casl { width: 100%; margin-bottom: 0.5rem; } .casep .casp .casr { width: 100%; } } .fuses { width: 100%; font-size: 0; display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-items: center; } .fuses .fur { display: inline-block; vertical-align: middle; width: calc((686 / 1380) * 100%); } .fuses .fur .img { width: 100%; padding-top: 93.24%; } .fuses .ful { display: inline-block; vertical-align: middle; flex: 1; padding-left: calc((270 / 1920) * 100%); } .fuses .ful .fit { width: 100%; color: #15a4c6; line-height: 1.5; font-weight: bold; margin-bottom: 0.2rem; max-width: 6.8rem; padding-right: 0.4rem; } .fuses .ful .finp { width: 100%; color: #222; line-height: 1.6; max-width: 6.8rem; padding-right: 0.4rem; } .fuses .ful .finp p { color: #222; line-height: 1.6; } .fuses .ful .finp span { color: #222; line-height: 1.6; } @media (max-width: 1400px) { .fuses .ful { padding-left: 3%; } } .Mission { width: 100%; position: relative; } .Mission .img { width: 100%; padding-top: 44.79%; } .Mission .mitop { position: absolute; z-index: 3; left: calc((270 / 1920) * 100%); top: 1.4rem; width: auto; } .Mission .mitop .fk { width: 100%; color: #fff; line-height: 1.5; } .Mission .imglis { width: 100%; position: relative; } .Mission .imglis .swiper-slide { width: 100%; } .Mission .imglis .swiper-slide .xmg { width: 100%; padding-top: 44.79%; } .Mission .imglis .swiper-pagination { bottom: 0.5rem; text-align: left; left: calc((270 / 1920) * 100%); color: #fff; z-index: 4; height: 0.6rem; line-height: 0.6rem; } .Mission .imglis .swiper-pagination-current { font-size: 0.38rem; } .Mission .btns { display: inline-block; vertical-align: middle; font-size: 0; position: absolute; z-index: 6; left: calc((610 / 1920) * 100%); bottom: 0.5rem; } .Mission .btns:after { content: ' '; position: absolute; z-index: 5; display: block; width: 1.5rem; height: 1px; background-color: #fff; top: 50%; transform: translateY(-50%); right: 120%; } .Mission .btns .btn { position: relative; display: inline-block; vertical-align: middle; z-index: 3; width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #fff; border-radius: 50%; background-color: transparent; } .Mission .btns .btn img { width: 100%; display: block; } .Mission .btns .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .Mission .btns .btn + .btn { margin-left: 0.3rem; } .Mission .mibot { width: calc((687 / 1920) * 100%); position: absolute; z-index: 3; right: calc((270 / 1920) * 100%); bottom: 0; background-color: #f6f6f6; padding: 0.5rem; } .Mission .mibot .minps { width: 100%; color: #222; line-height: 1.6; border-bottom: solid 1px #ccc; padding-bottom: 0.3rem; text-align: justify; } .Mission .mibot .minps p { color: #222; line-height: 1.6; } @media (max-width: 1400px) { .Mission .mitop { left: 3%; } .Mission .imglis .swiper-pagination { left: 3%; } .Mission .btns { left: calc(3% + (300 / 1920) * 100%); } .Mission .mibot { right: 3%; } } @media (max-width: 800px) { .Mission .mitop { top: 0.5rem; } .Mission .mibot { position: relative; right: 0; width: 100%; } .Mission .btns { right: 3%; left: auto; } } .Benefits { width: 100%; padding: 1.2rem 0; } .Benefits .beneit { width: 100%; } .Benefits .beneit .emg { width: 100%; padding-top: 40.57%; position: relative; } .Benefits .beneit .emg .eamt { position: absolute; z-index: 2; width: 1.78rem; height: 1.78rem; padding: 0.23rem; transition: all ease 0.3s; } .Benefits .beneit .emg .eamt .bg { position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; background-image: url("../images/bg19.png"); background-size: 100% 100%; transition: all ease 0.3s; } .Benefits .beneit .emg .eamt a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 4; border-radius: 50%; } .Benefits .beneit .emg .eamt .egx { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; position: relative; z-index: 2; } .Benefits .beneit .emg .eamt .mt { width: 100%; text-align: center; color: #000; line-height: 1.5; } .Benefits .beneit .emg .eamt .line { width: 100%; font-size: 0; text-align: center; margin: 0.1rem 0 0; } .Benefits .beneit .emg .eamt .line span { display: inline-block; vertical-align: middle; width: 0.25rem; height: 4px; background-color: #15a4c6; } .Benefits .beneit .emg .eamt .vx { width: 100%; text-align: center; color: #666; line-height: 1.5; overflow: hidden; height: 0; transition: all ease 0.3s; } .Benefits .beneit .emg .eamt .morc { width: 100%; font-size: 0; text-align: center; margin-top: 0.1rem; display: none; } .Benefits .beneit .emg .eamt .morc span { display: inline-block; vertical-align: middle; color: #fabf13; line-height: 1.5; height: 0; transition: all ease 0.3s; overflow: hidden; } .Benefits .beneit .emg .eamt .morc i { display: inline-block; vertical-align: middle; width: 0.08rem; height: 0.14rem; margin-left: 0.1rem; height: 0; transition: all ease 0.3s; overflow: hidden; } .Benefits .beneit .emg .eamt .morc i img { width: 100%; display: block; } .Benefits .beneit .emg .eamt:hover { z-index: 5; } .Benefits .beneit .emg .eamt:hover .bg { transform: scale(1.38); background-image: url("../images/bg77.png"); background-size: 100% 100%; } .Benefits .beneit .emg .eamt:hover a { transform: scale(1.38); } .Benefits .beneit .emg .eamt:hover .egx { align-content: center; } .Benefits .beneit .emg .eamt:hover .line { margin: 0.1rem 0; } .Benefits .beneit .emg .eamt:hover .vx { height: 1.5em; margin: 0.2rem 0; } .Benefits .beneit .emg .eamt:hover .morc span { height: 1.5em; } .Benefits .beneit .emg .eamt:hover .morc i { height: 0.14rem; } .Benefits .beneit .emg .eamt:nth-child(1) { left: 0; top: 2.3rem; } .Benefits .beneit .emg .eamt:nth-child(2) { left: calc((243 / 1380) * 100%); top: 0.5rem; } .Benefits .beneit .emg .eamt:nth-child(3) { left: calc((300 / 1380) * 100%); top: 3.7rem; } .Benefits .beneit .emg .eamt:nth-child(4) { left: calc((466 / 1380) * 100%); top: 1.4rem; } .Benefits .beneit .emg .eamt:nth-child(5) { left: calc((610 / 1380) * 100%); top: 3.1rem; } .Benefits .beneit .emg .eamt:nth-child(6) { left: calc((724 / 1380) * 100%); top: 0.6rem; } .Benefits .beneit .emg .eamt:nth-child(7) { left: calc((840 / 1380) * 100%); top: 3.6rem; } .Benefits .beneit .emg .eamt:nth-child(8) { left: calc((1000 / 1380) * 100%); top: 2.2rem; } .Benefits .beneit .emg .eamt:nth-child(9) { left: calc((1111 / 1380) * 100%); top: 0.2rem; } .Benefits .beneit .emg .eamt:nth-child(10) { left: calc((1200 / 1380) * 100%); top: 3.2rem; } @media (max-width: 800px) { .Benefits { padding: 0.5rem 0; } .Benefits .beneit .emg { position: relative; padding-top: 0; text-align: center; } .Benefits .beneit .emg .eamt { width: 2.4rem; height: 2.4rem; position: relative; display: inline-block; vertical-align: middle; left: auto !important; top: auto !important; margin: 0 6% 0.3rem; } .Benefits .beneit .emg .eamt:nth-child(2n) { position: relative; top: -1rem !important; } } .lifes { width: 100%; padding: 1.2rem 0; } .lifes .lifepers { width: 100%; font-size: 0; position: relative; } .lifes .lifepers .lifem { display: inline-block; vertical-align: top; width: calc((437 / 1380) * 100%); margin-right: calc((22 / 1380) * 100%); margin-bottom: 0.24rem; position: relative; } .lifes .lifepers .lifem .img { width: 100%; padding-top: 64.07%; } .lifes .lifepers .lifem .fit { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: #fff; line-height: 2.5; padding: 0 0.4rem; } .lifes .lifepers .lifem:nth-child(6n+1) { transition-delay: 0.2s; } .lifes .lifepers .lifem:nth-child(6n+2) { transition-delay: 0.3s; } .lifes .lifepers .lifem:nth-child(6n+3) { transition-delay: 0.4s; } .lifes .lifepers .lifem:nth-child(6n+4) { transition-delay: 0.5s; margin-bottom: 0; } .lifes .lifepers .lifem:nth-child(6n+5) { transition-delay: 0.6s; margin-bottom: 0; } .lifes .lifepers .lifem:nth-child(6n+6) { transition-delay: 0.7s; margin-bottom: 0; } .lifes .lifepers .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .lifes .lifepers .btn img { width: 100%; display: block; } .lifes .lifepers .btn img:first-child { display: block; } .lifes .lifepers .btn img:last-child { display: none; } .lifes .lifepers .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .lifes .lifepers .btn:hover img:first-child { display: none; } .lifes .lifepers .btn:hover img:last-child { display: block; } .lifes .lifepers .bl { left: -0.8rem; } .lifes .lifepers .br { right: -0.8rem; } @media (max-width: 1500px) { .lifes .lifepers .btn { background-color: #fff; border: solid 1px #999; } .lifes .lifepers .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .lifes .lifepers .bl { left: 0rem; } .lifes .lifepers .br { right: 0rem; } } @media (max-width: 800px) { .lifes { padding: 0.5rem 0; } .lifes .lifepers .lifem { width: 48%; margin-right: 4%; } .lifes .lifepers .lifem:nth-child(2n) { margin-right: 0; } } .Notice { width: 100%; padding: 1.2rem 0 2rem; } .Notice .notlis { width: 100%; font-size: 0; } .Notice .notlis .notem { display: inline-block; vertical-align: top; width: calc((437 / 1380) * 100%); margin-right: calc((34 / 1380) * 100%); margin-bottom: 0.3rem; } .Notice .notlis .notem a { width: 100%; display: block; } .Notice .notlis .notem .imgs { width: 100%; overflow: hidden; } .Notice .notlis .notem .imgs .img { width: 100%; padding-top: 64.07%; transition: all ease 0.3s; } .Notice .notlis .notem .coms { width: 100%; background-color: #ebf0f5; padding: 0.3rem 0.4rem; transition: all ease 0.5s; } .Notice .notlis .notem .coms .cit { width: 100%; color: #222; line-height: 1.5; } .Notice .notlis .notem .coms .time { width: 100%; color: #222; line-height: 1.5; margin-top: 0.7rem; } .Notice .notlis .notem .coms .icon { width: 100%; margin-top: 0.1rem; font-size: 0; } .Notice .notlis .notem .coms .icon .dow { display: inline-block; vertical-align: middle; width: 0.53rem; height: 0.53rem; } .Notice .notlis .notem .coms .icon .dow img { width: 100%; display: block; } .Notice .notlis .notem .coms .icon .file { display: inline-block; vertical-align: middle; width: 0.53rem; height: 0.53rem; } .Notice .notlis .notem .coms .icon .file img { width: 100%; display: block; } .Notice .notlis .notem .coms .icon .dow { display: inline-block; } .Notice .notlis .notem .coms .icon .file { display: none; } .Notice .notlis .notem:hover .imgs .img { transform: scale(1.1); } .Notice .notlis .notem:hover .coms { box-shadow: 0px 6px 16px 1px rgba(112, 112, 112, 0.13); background-color: #fff; } .Notice .notlis .notem:hover .coms .cit { width: 100%; color: #00a9ce; line-height: 1.5; } .Notice .notlis .notem:hover .coms .icon .dow { display: none; } .Notice .notlis .notem:hover .coms .icon .file { display: inline-block; } .Notice .notlis .notem:nth-child(3n) { margin-right: 0; } .Notice .notlis .notem:nth-child(3n+1) { transition-delay: 0.2s; } .Notice .notlis .notem:nth-child(3n+2) { transition-delay: 0.3s; } .Notice .notlis .notem:nth-child(3n+3) { transition-delay: 0.4s; } .temporary { width: 100%; padding: 1rem 0; } .temporary .tempolis { width: 100%; font-size: 0; } .temporary .tempolis .tli { width: 100%; font-size: 0; padding: 0.16rem 0.4rem; border-bottom: solid 1px #ccc; } .temporary .tempolis .tli a { width: 100%; display: block; } .temporary .tempolis .tli .tlt { display: inline-block; vertical-align: middle; width: calc(100% - 120px); font-size: 0; padding-right: 0.12rem; } .temporary .tempolis .tli .tlt .tim { display: inline-block; vertical-align: middle; color: #222; line-height: 1.5; max-width: calc(100% - 54px); } .temporary .tempolis .tli .tlt .lab { display: inline-block; vertical-align: middle; border-radius: 3px; border: solid 1px #cccccc; font-size: 0; padding: 0.04rem; margin-left: 0.1rem; } .temporary .tempolis .tli .tlt .lab .si { display: inline-block; vertical-align: middle; width: 14px; height: 14px; } .temporary .tempolis .tli .tlt .lab .si img { width: 100%; display: block; } .temporary .tempolis .tli .tlt .lab .si img:first-child { display: block; } .temporary .tempolis .tli .tlt .lab .si img:last-child { display: none; } .temporary .tempolis .tli .tlt .lab .sn { display: inline-block; vertical-align: middle; color: #666; line-height: 1.5; margin-left: 0.08rem; } .temporary .tempolis .tli .time { display: inline-block; vertical-align: middle; text-align: right; color: #131313; width: 120px; } .temporary .tempolis .tli.head { border-bottom: none; background-color: #15a4c6; } .temporary .tempolis .tli.head .tlt .tim { color: #fff; } .temporary .tempolis .tli.head .time { color: #fff; } .temporary .tempolis .tli a:hover .tlt .tim { color: #15a4c6; } .temporary .tempolis .tli a:hover .tlt .lab { border: solid 1px #15a4c6; } .temporary .tempolis .tli a:hover .tlt .lab .si img:first-child { display: none; } .temporary .tempolis .tli a:hover .tlt .lab .si img:last-child { display: block; } .temporary .tempolis .tli a:hover .tlt .lab .sn { color: #15a4c6; } .temporary .tempolis .tli a:hover .time { color: #15a4c6; } .temporary .more { width: 100%; font-size: 0; text-align: center; margin-top: 0.6rem; } .temporary .more a { display: inline-block; vertical-align: middle; padding: 0 0.4rem; background-color: #fff; line-height: 3; border-radius: 1.5em; color: #222; } .temporary .more a span { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; animation: floating 2s ease-in-out infinite; position: relative; } .temporary .more a span img { width: 100%; display: block; } .temporary .more a span img:first-child { display: block; } .temporary .more a span img:last-child { display: none; } @keyframes floating { from { transform: translate(0, 0rem); } 33% { transform: translate(0, -0.08rem); } 66% { transform: translate(0, 0.03rem); } to { transform: translate(0, 0); } } .temporary .more a:hover { display: inline-block; vertical-align: middle; background-color: #15a4c6; color: #fff; } .temporary .more a:hover span img:first-child { display: none; } .temporary .more a:hover span img:last-child { display: block; } .scheme { width: 100%; padding: 1rem 0; } .scheme .schelis { width: 100%; font-size: 0; margin-top: 0.5rem; } .scheme .schelis .schem { display: inline-block; vertical-align: top; width: calc((670 / 1380) * 100%); margin-right: calc((39 / 1380) * 100%); margin-bottom: 0.3rem; } .scheme .schelis .schem:nth-child(2n){margin-right: 0} .scheme .schelis .schem a { width: 100%; display: block; padding: 0.4rem 0.4rem 0; background-color: #ebf0f5; transition: all ease 0.3s; } .scheme .schelis .schem .sit { width: 100%; color: #222; line-height: 1.5; height: 3em; } .scheme .schelis .schem .sot { width: 100%; padding: 0.2rem 0; border-top: solid 1px #ddd; font-size: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 0.2rem; } .scheme .schelis .schem .sot .sol { display: inline-block; vertical-align: middle; } .scheme .schelis .schem .sot .sol .time { display: inline-block; vertical-align: middle; color: #131313; line-height: 1.5; } .scheme .schelis .schem .sot .sol .lab { display: inline-block; vertical-align: middle; border-radius: 3px; border: solid 1px #cccccc; font-size: 0; padding: 0.04rem; margin-left: 0.1rem; } .scheme .schelis .schem .sot .sol .lab .si { display: inline-block; vertical-align: middle; width: 14px; height: 14px; } .scheme .schelis .schem .sot .sol .lab .si img { width: 100%; display: block; } .scheme .schelis .schem .sot .sol .lab .si img:first-child { display: block; } .scheme .schelis .schem .sot .sol .lab .si img:last-child { display: none; } .scheme .schelis .schem .sot .sol .lab .sn { display: inline-block; vertical-align: middle; color: #666; line-height: 1.5; margin-left: 0.08rem; } .scheme .schelis .schem .sot .sor { display: inline-block; vertical-align: middle; font-size: 0; } .scheme .schelis .schem:hover .sot .sor .dow { display: none; } .scheme .schelis .schem:hover .sot .sor .file { display: inline-block; } .scheme .more { width: 100%; margin-top: 0.4rem; font-size: 0; text-align: center; } .scheme .more a { display: inline-block; vertical-align: middle; background-color: transparent; border: solid 1px #222; line-height: 3; color: #222; width: 1.6rem; text-align: center; border-radius: 1.5em; } .scheme .more a i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; width: 0; margin-left: 0.12rem; margin-left: 0; transition: all ease 0.4s; } .scheme .more a i img { width: 100%; display: block; } .scheme .more a:hover { border: solid 1px #15a4c6; background-color: #15a4c6; box-shadow: 5px 8px 30px 0px rgba(0, 169, 206, 0.3); color: #fff; } .scheme .more a:hover i { width: 0.2rem; margin-left: 0.12rem; } @media (max-width: 800px) { .scheme .more a { width: 2rem; } } .coretech { overflow: hidden; } .director { width: 100%; padding: 1rem 0; background-color: #ebf0f5; } .director .direper { width: 100%; margin-top: 0.5rem; font-size: 0; position: relative; } .director .direper .swiper-container { padding-bottom: 0.5rem; } .director .direper .repem { display: inline-block; vertical-align: top; width: calc((321 / 1380) * 100%); margin-right: calc((31 / 1380) * 100%); } .director .direper .repem .imgs { width: 100%; overflow: hidden; } .director .direper .repem .imgs .img { width: 100%; padding-top: 87.5%; transition: all ease 0.3s; } .director .direper .repem .spm { width: 100%; padding: 0.4rem; background-color: #fff; position: relative; } .director .direper .repem .spm:after { content: ' '; position: absolute; top: 0; height: 0.3rem; width: 0.08rem; border-radius: 0.04rem; background-color: #00a9ce; left: 0.4rem; transform: translateY(-50%); } .director .direper .repem .spm .stm { width: 100%; color: #222; line-height: 1.5; margin-bottom: 0.1rem; } .director .direper .repem .spm .sinp { width: 100%; color: #222; line-height: 1.5; height: 6em; } .director .direper .repem .spm .sinp p { color: #222; line-height: 1.5; } .director .direper .repem:nth-child(4n) { margin-right: 0; } .director .direper .repem:nth-child(4n+1) { transition-delay: 0.2s; } .director .direper .repem:nth-child(4n+2) { transition-delay: 0.3s; } .director .direper .repem:nth-child(4n+3) { transition-delay: 0.4s; } .director .direper .repem:nth-child(4n+4) { transition-delay: 0.5s; } .director .direper .btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 0.6rem; height: 0.6rem; cursor: pointer; border: solid 1px #a0b9bf; border-radius: 50%; background-color: #fff; } .director .direper .btn img { width: 100%; display: block; } .director .direper .btn img:first-child { display: block; } .director .direper .btn img:last-child { display: none; } .director .direper .btn:hover { background-color: #0ac4cf; border: solid 1px #0ac4cf; } .director .direper .btn:hover img:first-child { display: none; } .director .direper .btn:hover img:last-child { display: block; } .director .direper .bl { left: -0.8rem; } .director .direper .br { right: -0.8rem; } .director .direper .swiper-pagination { bottom: 0; } .director .direper .swiper-pagination-bullet { background-color: #ccc; opacity: 1; transition: all ease 0.3s; } .director .direper .swiper-pagination-bullet-active { width: 26px; height: 8px; border-radius: 4px; background-color: #149fc2; } @media (max-width: 1500px) { .director .direper .btn { background-color: #fff; border: solid 1px #999; } .director .direper .btn:hover { background-color: #15a4c6; border: solid 1px #15a4c6; } .director .direper .bl { left: 0rem; } .director .direper .br { right: 0rem; } } .edits { width: 100%; /*padding: 0.6rem 0;*/ } .edits .edomp { width: 100%; /*padding: 0.5rem;*/ color: #666; line-height: 1.8; box-shadow: 0px 6px 16px 1px rgba(112, 112, 112, 0.13); } .edits .edomp p { color: #666; line-height: 1.8; } .edits .edomp img { max-width: 100%; } .ricon { position: fixed; z-index: 10; right: 0.3rem; top: 90%; transform: translateY(-50%); display: none; } .ricon .rcom { width: 0.6rem; height: 0.6rem; cursor: pointer; display: block; border-radius: 50%; background-color: #149fc2; } .ricon .rcom img { width: 100%; display: block; } @media (max-width: 800px) { html.fp-enabled, .fp-enabled body{ height: auto !important; overflow: visible !important; } #dowebok{ touch-action: auto !important; } } .section { height: 100vh !important; } @media (max-width: 800px) { .section{ height: auto; } }