.newindexslide { width: 100%; overflow: hidden; position: relative; background: #f4f9fd; } .newindexslide svg { display: block; height: 183px; width: 100%; position: absolute; left: 0; bottom: -2px; z-index: 10; } .newindexslide .bd ul li img { width: 100%; } .newindexslide .bd ul li { position: relative; } .newindexslidebox { position: relative; width: 100vw; height: 100%; overflow: hidden; } .newindexslidebox .hd { position: absolute; width: 100%; text-align: center; z-index: 11; bottom: 50px !important; left: 0; } .newindexslidebox .hd li { display: inline-block; margin: 3px 20px; opacity: .5; background: #fff; height: 24px; width: 24px; border-radius: 12px; } .newindexslidebox .hd li.on { opacity: 1; background: #fc0; height: 30px; width: 30px; border-radius: 15px; margin: 0 20px; } .newindexslidebox .hd span { width: 16px; height: 16px; background: #fff; opacity: .5; display: inline-block; margin: 0px 10px !important; } .newindexslidebox .hd span.swiper-pagination-bullet-active { width: 16px; height: 16px; background: #fc0; opacity: 1; } .newindexslidebox img { display: block; width: 100%; height: 100% } .newindexslideboximage { display: block; width: 100%; height: 100%; background-repeat: no-repeat !important; background-position: center bottom !important; /*background-size: auto 100%;*/ background-size: cover; } .companyprofileinfo { width: 550px; } .companyprofileinfo h2 { color: #2facf0; font-size: 30px; line-height: 60px; text-align: center } .companyprofileinfo p { text-indent: 2em; font-size: 16px; line-height: 34px; } .companyprofileicons { text-align: center } .companyprofileicons li { display: inline-block; float: left; margin: 30px 50px 0 50px; } .companyprofileicons li .iconbg { height: 80px; width: 80px; line-height: 100px; } .companyprofileicons li .iconbg img { width: 100% } .companyprofileicons li span, .companyprofileicons li h3 { display: block; line-height: 30px; font-size: 16px; color: #444444; } .animatedvideoinfo { width: 100%; text-align: center; } .animatedvideoinfo h2 { color: #2facf0; font-size: 30px; line-height: 60px; } .animatedvideoinfo p { font-size: 16px; color: #444 } #animatedvideobox .swiper-slide { text-align: center; font-size: 18px; /* center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; transition: 300ms; transform: scale(0.3); } #animatedvideobox .swiper-slide-active, #animatedvideobox .swiper-slide-duplicate-active { transform: scale(.5); z-index: 1; } #animatedvideobox { width: 1000px; overflow: hidden; margin: 0 auto; position: relative; padding: 20px 0; } #animatedvideobox .swiper-slide img { border: 40px solid #fff; border-radius: 100px; box-shadow: 0 0 20px rgba(47, 172, 240, .5) } #animatedvideobox .swiper-wrapper { height: 360px; } #animatedvideoboxpagination, .appslidepagination { width: 100%; height: 12px; text-align: center; position: absolute; left: 0; bottom: 0; z-index: 20 } #animatedvideoboxpagination span, .appslidepagination span { width: 10px; height: 10px; margin: 1px 3px; background: #c0e6f9; opacity: 1 } #animatedvideoboxprevbutton.newprevbutton { left: 0 !important; background-size: 30px 54px } #animatedvideoboxnextbutton.newnextbutton { right: 0 !important; background-size: 30px 54px } #animatedvideoboxpagination span.swiper-pagination-bullet-active, .appslidepagination span.swiper-pagination-bullet-active { width: 12px; height: 12px; margin: 0 5px; background: #95d9fe; } #appslidebox { width: 1000px } #appslidebox .swiper-slide { width: 80% } #appslideprevbutton.newprevbutton { left: 0 !important; background-size: 30px 54px } #appslidenextbutton.newnextbutton { right: 0 !important; background-size: 30px 54px } #appslidebox .swiper-slide { font-size: 18px; display: flex; justify-content: center; align-items: center; border-radius: 40px; overflow: hidden; } #appslidebox .swiper-slide img { display: block; width: 800px; height: 100%; object-fit: cover; } #appslidebox { padding: 40px 0 40px 0; } .appslidepagination { } #appslidebox .appslideboxinfo { border-radius: 40px; overflow: hidden; position: relative; } #appslidebox .appslideboxinfo .appslideboxbottombg { background: rgba(0, 0, 0, .3); position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1 } #appslidebox .appslideboxinfo .appslideboxbottombg .appslidelogo { width: 80px; height: 80px; margin-right: 20px; border-radius: 20px; } .appslideappinfo { padding: 20px 40px; color: #fff; } .appslideappinfo .appname { line-height: 40px; font-size: 26px; } .appslideappinfo .apptips { line-height: 1.2; font-size: 18px; } .appslideappinfo .appinstallbutton { display: block; width: 130px; height: 60px; border-radius: 40px; background: rgba(255, 255, 255, .3); color: #fff; font-size: 26px; text-align: center; line-height: 60px; } #deriveslide .swiper { width: 100%; height: 100%; } #deriveslide .swiper-slide { text-align: center; font-size: 16px; background: #fff; display: flex; justify-content: center; align-items: center; } #deriveslide .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } #deriveslide { width: 1000px; margin: 0 auto; padding: 40px 0; } #deriveslide .deriveslideimagebox { position: relative; width: 100%; height: 100%; border-radius: 25px; overflow: hidden; display: block; } #deriveslide .deriveslideimagetitle { position: absolute; height: 30px; padding: 0 20px 0 20px; background: no-repeat right top; background-size: auto 30px; font-size: 14px; font-weight: bold; line-height: 30px; color: #fff; } #deriveslidenextbutton.newnextbutton { right: 0 !important; background-size: 30px 54px } #deriveslideprevbutton.newprevbutton { left: 0 !important; background-size: 30px 54px } #deriveslidepagination { display: none } .slidebottombg { background: ' d='m0.000,0.000 c0.000,0.000 479.1000,157.1000 960.000,157.1000 c1440.000,157.1000 1919.1000,0.000 1919.1000,0.000 l1919.1000,182.1000 l0.000,182.1000 l0.000,0.000 z'/>") no-repeat; background-size: 100% auto; background-position: center bottom; height: 10vw; width: 100%; position: absolute; z-index: 1; left: 0; bottom: -3px; } .slidebottomellipse { width: 100% !important; position: absolute; left: 0; bottom: -3px; height: auto !important; z-index: 1; }