@charset "utf-8"; * { scrollbar-width: thin; scrollbar-track-color: transparent; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { min-width: 50px; min-height: 50px; background-color: #c1c1c1; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.46); } html, body { width: 100%; height: 100%; } body { padding: 0; margin: 0; font-weight: normal; font-style: normal; font-size: 12px; font-family: "微软雅黑", "Tahoma"; vertical-align: baseline; text-align: justify; word-wrap: break-word; text-justify: inter-ideograph; color: #000000cc; } .navBody { background: rgba(33, 33, 41, 1); height: 36px; color: #fff; } .globalNav a { float: left; height: 36px; line-height: 36px; padding: 0 10px; color: #eee; position: relative; cursor: pointer; } .globalNav a:hover { background: #666e70; color: #fff; text-decoration: none; } .globalNav a.now { background: #008fff; color: #fff; font-weight: 600; } .globalNav .zhzd { float: left; height: 36px; position: relative; z-index: 999; } .globalNav .zhzd a b { border-color: #ffddc9 transparent transparent; border-right: 3px dashed transparent; border-style: solid dashed dashed; border-width: 3px 3px 0; display: inline-block; font-size: 0; height: 0; line-height: 0; width: 0; position: relative; top: -1px; left: 4px; } .globalNav .zhzd .zhzdMenu { position: absolute; left: 0; top: 29px; background: #fff; border: 1px solid #ccc; border-top: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 0; display: none; } .globalNav .zhzd .zhzdMenu a { width: 100%; padding: 0; text-align: center; color: #3366cc; } .globalNav .zhzd .zhzdMenu a:hover { background: #f2f2f2; } .globalNav .zhzd a.now { background: #fff; border: 1px solid #ccc; border-bottom: none; border-top: none; color: #3366cc; z-index: 10; } .width1200 { max-width: 1200px; margin: 0 auto; } .logoCon { width: 100%; height: 60px; background: #fff; box-shadow: 0px -1px #0000001a inset; } .logo, .buttonCon { height: 60px; display: table; text-align: center; } .btn-login { background: rgba(47, 84, 235, 1); } .logoText { padding-left: 10px; font-weight: 500; font-size: 24px; } .table-cell { display: table-cell; vertical-align: middle; } .btnText { padding-right: 10px; font-size: 16px; font-weight: 500; } .bannerBox { /* height: 900px; */ height: calc(100% - 96px); background: rgba(245, 247, 253, 1); } .banner { position: relative; width: 100%; height: 100%; /* max-height: 950px; */ /*background: url(img/image_banner_01.png) no-repeat right -110px;*/ } .banner .lottie { position: relative; z-index: 50; width: 100%; height: calc(100% - 83px); } .bannerTitleBox { position: absolute; top: 30%; z-index: 60; } .bannerTitle { font-size: 64px; font-weight: 600; } .bannerTitle1 { color: rgba(47, 84, 235, 1); /*transition: all 0.4s ease-in 0s; transform: translateX(-400px);*/ } .bannerTitle2 { color: rgba(0, 0, 0, 0.8); /*transition: all 0.8s ease-in 0s; transform: translateX(-600px);*/ } .bannerTitle3 { color: rgba(0, 0, 0, 0.5); font-size: 24px; /*transition: all 1.2s ease-in 0s; transform: translateX(-600px);*/ } .btnHand { font-size: 24px; font-weight: 500; padding: 16px 32px; background: rgba(47, 84, 235, 1); /*transition: all 1.6s ease-in 0s; transform: translateX(-400px);*/ } .moreBox { /*height: 83px;*/ } .moreBox h4 { font-size: 14px; color: rgba(47, 84, 235, 1); } .moreBox .iconMore { width: 32px; height: 54px; background: url(img/css_sprites.png) no-repeat -80px -1078px; } #moreBox{ margin: 1rem auto 0 auto; width: 2.4rem; height: 4rem; } .slogan { height: 320px; text-align: center; background: #00000099 url(img/image_banner_02.png) no-repeat; color: #fff; } .sloganSmall { padding-top: 100px; font-size: 18px; color: #ffffffcc; } .sloganBig { padding-top: 30px; font-size: 48px; } .sloganBig .blueBg { background: #2f54eb; border-radius: 8px; margin: 0 8px; padding: 3px 12px; } .videoListCon { padding: 120px 0; background: #f5f7fd; } .videoLeft { max-width: 843px; height: 474px; /*background: #000 url(img/image_video_cover_07.png) no-repeat;*/ } .videoRight { max-width: 357px; height: 474px; } .videoRight .vjs-playlist { height: 474px; overflow-y: auto; } .videoRight ul li { width: 280px; list-style-type: none; padding: 0; margin: 0 0 20px 0; } .videoList img { width: 130px; height: 72px; } .videoList .videoImg { } .videoList .videoTitle { font-size: 14px; font-weight: 500px; line-height: 20px; } .videoList .textRrey { color: #00000099; } .productCon { margin: 120px 0 0 0; } .bigtTitle h4 { font-size: 48px; font-weight: 500; } .bigtTitle span { font-size: 18px; } .productList { padding: 48px 48px 0 48px; } .productLine { /*border-left: 2px solid rgba(0, 0, 0, 0.1);*/ } .product { position: relative; } .productOne { height: 800px !important; } .productOne, .productTwo { height: 730px; border-left: 2px solid rgba(0, 0, 0, 0.1); } .productThree { height: 700px; } .productIco { position: absolute; top: -5px; left: -24px; width: 48px; height: 48px; } .productOneIco { background: url(img/css_sprites.png) no-repeat -113px -1068px; } .productTwoIco { background: url(img/css_sprites.png) no-repeat -160px -1068px; } .productThreeIco { background: url(img/css_sprites.png) no-repeat 0px -1148px; } .prodectLeftTitle { margin: 0 0 0 35px; } .prodectLeftTitle h3 { font-size: 36px; line-height: 48px; } .prodectLeftTitle .productText { font-size: 18px; line-height: 35px; } .productImg { width: 224px; height: 224px; } .showCartoon { transform: translateY(0px) !important; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 1 !important; } .hiddenTranX1 { opacity: 0; transition: all 0.8s ease-in 0s; transform: translateX(-200px); } .hiddenTranX2 { opacity: 0; transition: all 0.8s ease-in 0s; transform: translateX(200px); } .hiddenTranY1 { opacity: 0; transition: all 0.8s ease-in 0s; transform: translateY(-200px); } .hiddenTranY2 { opacity: 0; transition: all 0.8s ease-in 0s; transform: translateX(200px); } .productOneImg { /*background: url(img/css_sprites.png) no-repeat 0 0;*/ /*transition-delay: 0.2s;*/ } .productOneFree{ position: absolute; top: -45px; right: -30px; } #productOneFree{ width: 260px; height: 260px; } #productOneImg, #productTwoImg, #productThreeImg { position: relative; z-index: 50; width: 100%; height: 100%; } .productTwoImg { /*background: url(img/css_sprites.png) no-repeat 0 -224px; transition-delay: 0.2s;*/ } .productThreeImg { /*background: url(img/css_sprites.png) no-repeat 0 -448px; transition-delay: 0.8s;*/ } .productRImg { position: absolute; top: 0; left: 0; } .productOneRImg { width: 843px; height: 600px; background: url(img/image_cpgn_0103_bg.png) no-repeat; transition-delay: 0.2s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .productTwoRImg1 { width: 790px; height: 560px; background: url(img/image_cpgn_02_01.png) no-repeat; /*box-shadow: -20px -20px 40px -15px rgba(0, 0, 0, 0.24);*/ transition-delay: 0.2s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; transform: translateX(200px); } .productTwoRImg2 { top: 64px; left: 95px; width: 695px; height: 496px; background: url(img/image_cpgn_02_02.png) no-repeat; box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24); transition-delay: 0.4s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; transform: translateX(600px); } .productTwoRImg3 { top: 180px; left: 190px; width: 600px; height: 380px; background: url(img/image_cpgn_02_03.png) no-repeat; box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24); transition-delay: 0.6s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; transform: translateX(600px); /*box-shadow: 0px 13.3px 53.3px rgba(0, 0, 0, 0.24);*/ } .productThreeRImg1 { width: 843px; height: 600px; background: url(img/image_cpgn_0103_bg.png) no-repeat; transition-delay: 0.2s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .productThreeRImg2 { top: 107px; left: 171px; width: 502px; height: 386px; background: url(img/iamge_cpgn_03.png) no-repeat; box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.24); transition-delay: 0.4s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .productRT { transition-delay: 0.4s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } /*.productOneR1{ transition-delay: 0.4s; } .productOneR2{ transition-delay: 0.6s; } .productOneR3{ transition-delay: 0.8s; } .productOneR4{ transition-delay:1s; } .productOneR5{ transition-delay: 1.2s; } .productOneR6{ transition-delay: 1.4s; }*/ .productRT { position: absolute; top: 120px; left: 180px; width: 480px; height: 360px; background: rgba(255, 255, 255, 1); border-radius: 8px; } .productRT h4 { text-align: center; font-size: 18px; } .productRT ul { padding-top: 2.5rem; padding-left: 1.8rem; } .productRT ul li { float: left; list-style-type: none; width: 140px; height: 120px; text-align: center; padding: 20px 0; } .productRLImg { margin: 0 auto; } .productOneRLImg1 { width: 48px; height: 48px; background: url(img/css_sprites.png) no-repeat -48px -1152px; } .productOneRLImg2 { width: 48px; height: 48px; background: url(img/css_sprites.png) no-repeat -193px -1152px; } .productOneRLImg3 { width: 48px; height: 48px; background: url(img/css_sprites.png) no-repeat -144px -1152px; } .productOneRLImg4 { width: 48px; height: 48px; background: url(img/css_sprites.png) no-repeat -96px -1152px; } .productOneRLImg5 { width: 48px; height: 48px; background: url(img/css_sprites.png) no-repeat 0px -1194px; } .productOneRLImg6 { width: 140px; height: 48px; background: url(img/css_sprites.png) no-repeat -48px -1200px; } .productRight { width: 100%; height: 730px; overflow: hidden; } .classify { padding: 120px 0 120px 0; background: rgba(245, 247, 253, 1); } .classifyList ul li { float: left; list-style-type: none; width: 275px; height: 275px; border-radius: 24px; text-align: center; background: #fff; } .classifyImg { margin: 80px 0 0 0; width: 80px; height: 80px; } .classifyImg1 { background: url(img/css_sprites.png) no-repeat -80px -835px; } .classifyImg2 { background: url(img/css_sprites.png) no-repeat -80px -672px; } .classifyImg3 { background: url(img/css_sprites.png) no-repeat 0px -752px; } .classifyImg4 { background: url(img/css_sprites.png) no-repeat -80px -990px; } .classifyImg5 { background: url(img/css_sprites.png) no-repeat -160px -915px; } .classifyImg6 { background: url(img/css_sprites.png) no-repeat 0px -1073px; } .classifyImg7 { background: url(img/css_sprites.png) no-repeat 0px -915px; } .classifyImg8 { background: url(img/css_sprites.png) no-repeat -160px -752px; } .classifyList ul li:hover h4 { color: rgba(47, 84, 235, 1); } .classifyList ul li:hover .classifyImg1 { background: url(img/css_sprites.png) no-repeat 0px -835px; } .classifyList ul li:hover .classifyImg2 { background: url(img/css_sprites.png) no-repeat 0px -672px; } .classifyList ul li:hover .classifyImg3 { background: url(img/css_sprites.png) no-repeat -160px -672px; } .classifyList ul li:hover .classifyImg4 { background: url(img/css_sprites.png) no-repeat 0px -990px; } .classifyList ul li:hover .classifyImg5 { background: url(img/css_sprites.png) no-repeat -80px -915px; } .classifyList ul li:hover .classifyImg6 { background: url(img/css_sprites.png) no-repeat -160px -993px; } .classifyList ul li:hover .classifyImg7 { background: url(img/css_sprites.png) no-repeat -160px -835px; } .classifyList ul li:hover .classifyImg8 { background: url(img/css_sprites.png) no-repeat -80px -752px; } .classifyList h4 { font-size: 24px; color: rgba(155, 162, 204, 1); } .version { margin: 120px 0 120px 0; } .versionTable { margin-top: 65px; } .versionTableItem { height: 75px; color: #fff; border-radius: 24px 24px 0 0; } .versionBgYellow { background: rgba(250, 173, 20, 1); } .versionBgBlue { background: rgba(47, 84, 235, 1); } .versionBigtitle { padding-top: 7px; font-size: 24px; font-weight: 600; } .versionMeta { font-size: 16px; } .versionTableTd { display: flex; justify-content: center; align-items: center; height: 75px; font-size: 16px; } /*.versionTableItemW, .versionTableBodyW{ width: 280px; }*/ .versionTableTdBig { font-size: 18px; font-weight: 600; } .versionTableBodyBox { border-radius: 0 0 24px 24px; padding: 0 0 30px 0; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); } .iconWidth { display: inline-block; width: 24px; height: 24px; } .iconVersion { background: url(img/css_sprites.png) no-repeat -200px -1126px; } .iconCorrect { background: url(img/css_sprites.png) no-repeat -210px -1090px; } .iconWrong { background: url(img/css_sprites.png) no-repeat -83px -1125px; } .iconPhone { background: url(img/css_sprites.png) no-repeat -106px -1124px; } .iconQQ { background: url(img/css_sprites.png) no-repeat -153px -1124px; } .bottomBox { width: 100%; text-align: center; padding: 80px 0 20px 0; background: rgba(5, 13, 22, 1); color: #fff; } .bottomItem { text-align: left; } .bottomItem h4 { font-size: 18px; } .bottomList { padding: 0; } .bottomList .phone { font-size: 16px; color: rgba(255, 255, 255, 1); } .bottomList img { width: 160px; height: 160px; } .bottomList li { font-size: 16px; list-style-type: none; display: flex; /*justify-content: center;*/ align-items: center; line-height: 24px; padding: 10px 0; color: rgba(255, 255, 255, 0.6); } .bottomList li a { color: rgba(255, 255, 255, 0.6); } .bottomList li a:hover { color: rgba(255, 255, 255, 1); } .backTop { display: none; position: fixed; bottom: 150px; right: 20px; z-index: 99; background: rgba(47, 84, 235, 1); color: #fff; width: 76px; height: 76px; cursor: pointer; } .backTopBox { width: 76px; height: 76px; display: flex; justify-content: center; align-items: center; } .backTop:hover { background: rgba(30, 67, 222, 1); } .iconImgBox { text-align: center; } .iconTop { background: url(img/css_sprites.png) no-repeat -208px -1072px; } @media (min-width: 576px){ .modal-dialog.modal-midell-dialog{ width: 595px !important; max-width: 595px !important; } } /*.modal.show .modal-midell-dialog{ width: 595px !important; max-width: 595px !important; }*/