h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dd, textarea, form, input, select, body { margin: 0; padding: 0; font-size: 12px; font-family: "Microsoft Yahei"; font-weight: 400 } body, html { font-size: 10px } em, i { font-style: normal } li { list-style: none } a { text-decoration: none; outline: medium none } img { vertical-align: top; border: 0 } textarea { overflow: auto; resize: none } body { font-family: "Microsoft Yahei" } table { border-collapse: collapse } h1 { font-size: 14px } h2 { font-size: 12px } input { vertical-align: middle; outline: 0 } .clear:after { clear: both; content: ''; display: block } .clear { zoom: 1 } input { vertical-align: 0 } body, html { width: 100%; height: 100%; font-size: 10px; overflow: hidden } body { background: #000; } body, ul, li, a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } .over { overflow: hidden } #menu{position: absolute;left: 0%;top: 0%;z-index: 10;} @media screen and (orientation:portrait) { #menu{display:block ;} .lock-wrap { display: none!important } } @media screen and (orientation:landscape) { #menu{display: none;} .wrapper { display: none!important } } .wrapper { position: relative; width: 100%; height: 100%; backface-visibility: hidden; -webkit-transform-style: preserve-3d } .keep { -webkit-transition: .4s linear } .scene { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; backface-visibility: hidden; display: none } .view1 { z-index: 2 } .view1 .scene-item2 .btn_tobuy{ position: absolute;left: 6%;top: 82%;width: 10%;background: #39c766;padding: 4.5% 2%;border-radius: 5px; } .view1 .scene-item3 .btn_tobuy{ position: absolute;left: 8%;top: 77%;width: 10%;background: #39c766;padding: 4.5% 2%;border-radius: 5px; } .view2 .btn_tomore{ position: absolute;left: 14%;top: 75%;width: 10%;background: #39c766;padding: 3.5% 2%;border-radius: 5px; } .view3 .btn_tomore{ position: absolute;right: 8%;top: 24%;width: 10%;background: #39c766;padding: 3.5% 2%;border-radius: 5px; } .view4 .btn_tomore{ position: absolute;right: 8%;top: 80%;width: 10%;background: #39c766;padding: 3.5% 2%;border-radius: 5px; } .view4 .btn_join_us{ position: absolute;right: 8%;top: 68%;width: 14%;border-radius: 5px; } .view6 .btn_tomore{ position: absolute;left: 8%;top: 82%;width: 10%;background: #39c766;padding: 3.5% 2%;border-radius: 5px;-webkit-transform: translateY(-50%);transform: translateY(-50%); } .view6 .btn_join_tel{ position: absolute;left: 25%;top: 82%;width: 60%;border-radius: 5px;-webkit-transform: translateY(-50%);transform: translateY(-50%); } .footer1{position: absolute;bottom:2%;left: 0;width: 100%;text-align: center;} .footer1 h3{color: #e6004a;font-size: 1.7em;} .footer1 .left{display: inline-block;width: 33%;} .footer1 .right{display: inline-block;width: 33%;} .footer1 .left img,.footer1 .right img{padding: 5% 0;} .news_ul_big{padding:0;color: #fff;width: 88%;position: absolute;left: 6%;top: 50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);} .news_ul_big li{padding: 3px 0;} .news_ul_big li:first-child{font-size: 1.3em;font-weight: bold;padding: 3px 0;} .news_sw{margin: 2% 4%;height: 12%;max-height:12%;position: relative;overflow: hidden;text-align: center;} .news_sw .left{height: 100%;background: #f8d7d7;display: inline-block;width: 48%;max-width: 48%;overflow:hidden;margin-right:1%;position: relative;} .news_sw .left img,.news_sw .right img{width: 40%;height: 90%;position: absolute;left:4px;top: 5%;} .news_sw .right{height: 100%;background: #f8d7d7;display: inline-block;width: 48%;max-width: 48%;overflow:hidden;margin-left: 1%;position: relative;} .news_sw .tit{position: absolute;width: 56%;position: absolute;right: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #d50058;} .news_sw_2{margin: 1.5% 4%;height: 23%;background: #f8d7d7;overflow: hidden;max-height: 23%;overflow: hidden;position: relative;} .theme_news{background: #ea094b;height: 20px;font-size: 1.2em;padding-left: 3%;color: #fff;line-height: 20px;} .news_banner{position: relative;line-height: 0;} .news_content{background: #0059aa;height: 30%;position: relative;} .news_sw_2 ul{width: 65%;position: absolute;left: 5%;top: 50%;-webkit-transform: translateY(-40%);transform: translateY(-40%);} .news_sw_2 ul li{width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 3px 0;position: relative;height: 20px;} .news_sw_2 ul li span{width: 60%;position: absolute;left: 0;top: 0; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .news_sw_2 ul li em{width: 35%;position: absolute;left: 65%;top: 0;} .news_sw_2 .btn_more_ct{width: 16%;position: absolute;right:8%;top: 50%;-webkit-transform: translateY(-40%);transform: translateY(-40%);background: #38c766;border-radius: 5px;} .news_sw_2 .btn_more_ct img{width: 85%;padding: 7.5%;} .jianjie_content{padding: 10px 15px;line-height: 1.8;} .jianjie_content h3{font-size: 1.8em;} .jianjie_content p{padding: 10px 0;} .jianjie_content .img{text-align: center;padding: 15px 0;} .jianjie_content .img img{width: 80%;} .news_wap_content{padding: 10px 15px;line-height: 1.8;} .news_wap_content h3{font-size: 1.8em;} .news_wap_content .date{padding: 5px 0;font-size: 12px;} .news_wap_content p{font-size: 14px;} .c-item-title { margin: 50px 0 0 30px; width: 93px; height: 53px; color: #fff; font-style: italic } .c-item-title h1 { font-size: 2.4rem; font-weight: 400; padding-left: 3px; line-height: 22px } .c-item-title b { font-size: 2.5rem; font-style: italic } .card-view { position: relative; width: 100%; height: 100%; left: 0; top: 0; overflow-x: hidden } .footer { position: absolute; bottom: 0; left: 0; width: 100%; -webkit-transition: opacity .6s linear } .footer ul { display: -webkit-box } .footer li { padding: 14px 0; position: relative; -webkit-box-flex: 1; width: 100%; font-size: 1.5rem; color: rgba(255, 255, 255, .8); text-align: center; background: rgba(0, 0, 0, .2); margin-right: 1px } .foot3{width: auto;left: 50%;bottom: 5%;transform: translateX(-55%);} .foot3 li{width: 8px;height: 8px;background: #ea094b;padding: 0;opacity: .3;border-radius: 50%;} .footer li span { display: block } .footer li a { display: block; color: rgba(255, 255, 255, .8) } .footer li{ margin-right: 10px } .footer li.active { background: #fff } .footer li.active:after { content: ''; position: absolute; left: 50%; border: 4px solid transparent; border-bottom-color: #fff; margin-left: -2px; top: -8px } .footer_iam{color: #fff;text-align: center;background: #603f45;padding: 20px 0 15px 0;} .footer_iam nav{padding-bottom: 10px;} .footer_iam a{color: #fff;} .foot1 li.active { color: #82291a } .carousel-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden } .carousel { position: absolute; left: 0; top: 0; margin: 0; padding: 0; list-style: none; display: block; width: 100%; height: 100% } .c-item { position: absolute; width: 100%; height: 100% } .display { -webkit-animation: display .6s ease-in } .loading-wrap { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #ea094b; z-index: 100 } #load { width: 120px; position: fixed; left: 50%; top: 50%; margin: -70px 0 0 -60px; z-index: 200 } .loading { width: 120px; height: 100px; background: url(../images/loading3.png) no-repeat; position: relative; -webkit-animation: move .6s infinite alternate linear } .loading div { width: 100%; height: 100%; position: absolute; left: 0; top: 0 } .img1 { background: url(../images/loading4.png) no-repeat; -webkit-animation: rotate 1s infinite linear } .img2 { background: url(../images/loading5.png) no-repeat; -webkit-animation: rotate2 1s infinite linear } .text { text-align: center; font: 18px/100px Arial; color: #F63 } .shadow { margin: 0 auto; width: 100px; height: 40px; background: -webkit-radial-gradient(contain, #999, rgba(0, 0, 0, 0)); opacity: .5; -webkit-transform: scale(1); -webkit-animation: scale .6s infinite alternate linear } .lock-wrap { position: absolute; left: 0; width: 100%; height: 100%; background: #008c23; z-index: 10; display: none } .lock-wrap .lock { position: absolute; left: 50%; top: 50%; width: 350px; height: 30px; margin: -15px 0 0 -175px; text-align: center; color: #fff; font-size: 2rem; } .lock-wrap .lock i { position: relative; display: block; width: 74px; height: 110px; background: url(../images/iphone.png) 0 0 no-repeat; background-size: 100%; margin: 0 auto; -webkit-transform: rotate(-90deg); -webkit-animation: iphone 1.6s ease-in infinite } .semi-detail { width: 100%; height: 100%; border-top: 1px solid rgba(0,0,0,0) } .semi-detail h2 { font-size: 1.8rem; color: #595959; text-align: center; line-height: 35px } .semi-detail p { font-size: 1.5rem; color: #595959; text-align: center } .logo { display: block; width: 28%; height: 13%; margin: 20px auto 0; text-align: center } .logo img { width: 100% } .rocket { position: absolute; left: 42%; bottom: -7px; width: 15% } .rocket img { width: 100% } .scene-1 { display: block; } .scene-2-item1 { } .view { position: relative; width: 100%; height: 100%; overflow: hidden } .arrow { display: block; width: 12px; height: 12px; position: absolute; bottom: 8px; left: 50%; margin-left: -11px; border: 3px solid transparent; border-top: 3px solid #fff; border-left: 3px solid #fff; z-index: 99; opacity: .8; -webkit-transform: rotate(45deg); -webkit-animation: arrow 1s ease; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .5s; -webkit-animation: arrow 1.5s infinite ease-in-out } .arrow2 { bottom: 50px } .banner { position: relative; width: 100%; height: 89%; z-index: 2 } .theme { display: block; width: 75%; margin: 0 auto } .theme img { width: 100% } .avatar { position: absolute; width: 100%; height: 12%; bottom: 0; background: #0046ad } .view2 { background: url(../images/wap_banner_4.jpg) top center no-repeat; background-size:100%; } .scene-2 h1 { font-size: 1.6rem; color: #fff; text-align: center; line-height: 55px } .scene-2 .auto-man { position: relative; margin: 24px; padding-top: 20px; display: -webkit-box } .scene-2 .auto-man li { -webkit-box-flex: 1; border-right: 6px solid #26282c; opacity: 0; visibility: hidden } .scene-2 .auto-man li img { width: 100% } .scene-2 .auto-man li.heartbeat { visibility: visible; opacity: 1; -webkit-animation: heartbeat .6s ease-in } .scene-2 .auto-man li:nth-last-child(1) { border-right: 0 } .scene-2 .auto-focus { margin: 24px; display: -webkit-box } .scene-2 .auto-focus li { -webkit-box-flex: 1; position: relative; padding-top: 10px; text-align: center; color: #fff; font-size: 1.6rem; border-right: 6px solid #26282c } .scene-2 .auto-focus li:before { content: ''; position: absolute; left: 0; top: -2px; width: 100%; height: 3px } .scene-2 .auto-focus li:nth-child(1):before { background: #e71a0f } .scene-2 .auto-focus li:nth-child(2):before { background: #7a43bd } .scene-2 .auto-focus li:nth-child(3):before { background: #b5e900 } .scene-2 .auto-focus li:nth-child(4):before { background: #0076e4 } .scene-2 .auto-focus li:nth-last-child(1) { border-right: 0 } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } .auto-man { margin: 24px auto } .view3 { background: #fff; } .leader { position: absolute; left: 50%; top: 50% } .rotation { -webkit-animation: rotation .4s linear } .leader1 { width: 232px; height: 240px; margin: -116px 0 0 -107px; display: none; opacity: 0 } .leader1 .leader-ch { width: 232px } .leader1 .leader-ch img { width: 100% } .leader1 .leader-ch { position: absolute; left: 0; top: 19px; z-index: 2 } .leader1 .leader-bg img { width: 100%; height: 100% } .leader1 .leader-bg { position: absolute; left: 0; top: 0 } .leader1 .leader1-icon { position: absolute; top: 53px; left: 2px; width: 88px; height: 28px; background: url(../images/icon.png) -1px -1px no-repeat; background-size: 160px auto } .leader1.show { display: block; opacity: 1; -webkit-animation: heartbeat .4s ease-in } .c-item-main { padding: 0 20px } .scene-item1 { left: 0 } .scene-item2 { left: 100% } .scene-item3 { left: 200% } .scene-item4 { left: 300% } .scene-item5 { left: 400% } .scene-3-item1 { background: #fff } .scene-3-item2 { background: #f1d8d2 } .c-item h2 { margin: 8px 0; font-size: 1.6rem } .c-item p { position: relative; font-size: 1.4rem; line-height: 18px; padding-left: 20px; text-align: justify } .c-item p:before { content: ''; display: block; position: absolute; width: 4px; height: 4px; overflow: hidden; border-radius: 2px; left: 8px; top: 7px; background: #302b2a } .pop { display: inline-block; padding: 0 15px; height: 30px; line-height: 30px; background: #302967; font-size: 1.8rem; color: #fff; font-style: italic; text-align: center; background-size: 200px auto; margin-top: 12px } .pop1 { background: #cf553f } .view4 { background:url(../images/wap_banner_5.jpg) top center no-repeat; background-size:100%; } .leader2 { width: 218px; height: 256px; margin: -128px 0 0 -109px; display: none; opacity: 0 } .leader2 img { width: 100%; height: 100% } .leader2.show { display: block; opacity: 1; -webkit-animation: heartbeat .4s ease-in } .scene-4-item1 .c-item-title { background-position: -3px -93px } .leader2-icon1 { position: absolute; width: 22px; height: 24px; left: 19px; top: 95px; background: url(../images/icon.png) -69px -38px no-repeat; background-size: 160px auto; -webkit-transition: all .3s ease-in } .leader2-icon2 { position: absolute; width: 24px; height: 24px; top: 58px; right: 25px; background: url(../images/icon.png) -33px -37px no-repeat; background-size: 160px auto; -webkit-transition: all .3s ease-in } .leader2-icon3 { position: absolute; width: 24px; height: 24px; top: 40px; right: 4px; background: url(../images/icon.png) -5px -36px no-repeat; background-size: 160px auto; -webkit-transition: all .3s ease-in } .foot2 li { } .foot2 li:nth-last-child(1) { border-right: 0 } .foot2 li.active { color: #231e4a } .scene-4-item2 { background: #c5c1e7 } .pop2 { background: #302967 } .view5 { background:url(../images/wap_banner_6.jpg) top center no-repeat; background-size: 100%; } .scene-5 .c-item-title { background-position: -1px -148px } .scene-5-item1 { background: url(../images/wap_banner_0.jpg) top center no-repeat; background-size: 100%; } .scene-5-item4 { background: url(../images/wap_banner_3.jpg) top center no-repeat; background-size: 100%; } .leader3 { width: 247px; height: 262px; margin: -131px 0 0 -123px; display: none; opacity: 0 } .leader3 img { width: 100% } .leader3 .leader-ch { position: relative; z-index: 2; top: -5px } .leader3.show { display: block; opacity: 1; -webkit-animation: heartbeat .4s ease-in } .leader3-icon1, .leader3-icon2, .leader3-icon3, .leader3-icon4, .leader3-icon5 { position: absolute; background: url(../images/Edit-bg.png) no-repeat; background-size: 247px auto; -webkit-transition: all .3s ease-in } .leader3-icon1 { width: 141px; height: 95px; left: 0; top: 0 } .leader3-icon2 { width: 106px; height: 95px; right: 0; top: 0; background-position: right 0 } .leader3-icon3 { width: 106px; height: 109px; right: 0; top: 95px; background-position: right -95px } .leader3-icon4 { width: 247px; height: 58px; left: 0; bottom: 0; background-position: left -204px } .leader3-icon5 { width: 79px; height: 262px; left: 0; bottom: 0; background-position: left 0 } .leader3-arrow { position: absolute; width: 52px; height: 68px; top: 0; left: 53px; background: url(../images/Edit-arrow.png) no-repeat; background-size: 52px auto; -webkit-transition: all .3s ease-in } .scene-5-item2 { background:url(../images/wap_banner_1.jpg) top center no-repeat; background-size:100%; } .scene-5-item3 { background:url(../images/wap_banner_2.jpg) top center no-repeat; background-size:100%; } .pop3 { background: #598300 } .foot3 li { } .foot3 li.active { background: #ea094b; opacity: 1; } .foot3 li.active:after{ border: 0; } .view6 { background: url(../images/wap_banner_7.jpg) top center no-repeat; background-size:100%; } .view7 { background: url(../images/wap_banner_8.jpg) top center no-repeat; background-size:100%; } .leader4 { width: 268px; height: 237px; margin: -118px 0 0 -134px; display: none; opacity: 0 } .leader4 .leader-ch { position: relative; z-index: 2; top: 0px } .leader4 img { width: 100% } .leader4.show { opacity: 1; display: block; -webkit-animation: heartbeat .4s ease-in } .leader4-bg { position: absolute; width: 238px; height: 237px; left: 50%; top: 50%; margin: -118px 0 0 -119px; background: url(../images/technology-bg.png) no-repeat; background-size: 238px auto } .leader4-bg.show { display: block; opacity: 1; -webkit-animation: heartbeat .4s ease-in } .scene-6-item1 .c-item-title { background-position: -101px -146px } .scene-6-item2 { background: #8bd2f3 } .pop4 { background: #005882 } .foot4 li { } .foot4 li.active { color: #3385ac } .scene-7 { background: #ffbe00 } .scene-7 .end-page { width: 100%; height: 100%; background: url(../images/end-bg.png) center 30% no-repeat; background-size: 300px auto } .scene-7 .end-page-content { position: absolute; bottom: 18%; padding: 0; width: 100%; text-align: center } .scene-7 .end-page-content p { font-size: 1.6rem; line-height: 20px } .scene-7 .end-page-content .ct { padding-bottom: 5px } .home_breathe { position: absolute; width: 44px; height: 44px; border-radius: 22px; left: 50%; bottom: 25px; margin-left: -22px; background-color: #fff; opacity: 1; -webkit-animation: home_breathe 1s linear infinite } .dlg_box{ width:100%;height:100px;background:url(../images/wap_logo.png) 4% 14% no-repeat;position:relative;background-size:7em 2.2em; } .dlg_box ul{padding: 15% 3% 3% 3%;} .dlg_box ul li{ display: inline-block;width: 24.5%;padding: 5px 0; } .dlg_box ul li img{width: 100%;} @-webkit-keyframes move { 0% { top: 0 } 100% { top: 10px } } @-webkit-keyframes scale { 0% { opacity: .5; -webkit-transform: scale(1) } 100% { opacity: 1; -webkit-transform: scale(0.7) } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } } @-webkit-keyframes rotate2 { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(-360deg) } } @-webkit-keyframes arrow { 0% { opacity: 0; -webkit-transform: translate(0, 5px) rotate(45deg) } 50% { opacity: 1; -webkit-transform: translate(0, -5px) rotate(45deg) } 100% { opacity: 0; -webkit-transform: translate(0, -10px) rotate(45deg) } } @-webkit-keyframes iphone { 0% { -webkit-transform: rotate(-90deg) } 25% { -webkit-transform: rotate(0deg) } 50% { -webkit-transform: rotate(0deg) } 75% { -webkit-transform: rotate(-90deg) } 100% { -webkit-transform: rotate(-90deg) } } @-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(0, 0); opacity: 0 } 25% { -webkit-transform: scale(1.3, 1.3); opacity: 1 } 50% { -webkit-transform: scale(0.9, .9) } 75% { -webkit-transform: scale(1.2, 1.2) } 100% { -webkit-transform: scale(1, 1) } } @-webkit-keyframes display { 0% { -webkit-transform: scale(0, 0); opacity: 0 } 25% { opacity: .3 } 50% { opacity: .6 } 75% { opacity: .8 } 100% { -webkit-transform: scale(1, 1); opacity: 1 } } @-webkit-keyframes home_breathe { 0% { -webkit-transform: scale(1, 1); opacity: .3 } 80% { -webkit-transform: scale(1.8, 1.8); opacity: 0 } 100% { -webkit-transform: scale(1.8, 1.8); opacity: 0 } } @-webkit-keyframes rotation { 0% { -webkit-transform: rotateZ(0deg) } 25% { -webkit-transform: rotateZ(180deg) } 50% { -webkit-transform: rotateZ(360deg) } 75% { -webkit-transform: rotateZ(540deg) } 100% { -webkit-transform: rotateZ(720deg) } }