.page,body,html{height:100%;width:100%}.page1 .header,.page2,.page3 .comTip,.page4{text-align:center}*{box-sizing:border-box;font-family:"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif}body,html{background:#fff}.page{overflow:hidden;color:#fff}.page1 .header{position:absolute;width:99.9%;height:74px;line-height:74px;background:rgba(0,0,0,.5);z-index:3}.page1 .header img{width:109px; left: -33%; position: relative;height:50px;margin-top:-17px}.page1 .header ul{text-decoration:none;display:inline-block}.page1 .header ul li{display:inline-block;height:74px;font-size:18px;color:#fff;margin-left:25px;cursor:pointer}.page1 .header ul li:hover{text-decoration:none;color:#02c0eb}.page1 .header .head_reg{display:inline-block}.page1 .head_reg{ left: 67%;  position: absolute; float: right;color:#fff;font-size:16px;margin-left:200px}.page1 .slideTxtBox{width:100%;height:100%}.page1 .slideTxtBox .bd,.page1 .slideTxtBox .bd .tempWrap,.page1 .slideTxtBox .bd ul{height:100%}.page1 .slideTxtBox .bd ul li{height:100%;position:relative}.page1 .slideTxtBox .bd ul li img{height:100%;width:100%}.page1 .slideTxtBox .bd ul li .subInfo{position:absolute;width:100%;height:100%;top:0;left:0;text-align:center;padding:11% 0;z-index:2}.page1 .slideTxtBox .bd ul li .subInfo p{font-size:52px}.page1 .slideTxtBox .bd ul li .subInfo .btnGro{position:absolute;bottom:16%;left:50%;margin-left:-142px}.page1 .slideTxtBox .bd ul li .subInfo .btnGro a{display:inline-block;background:0 0;width:120px;line-height:40px;font-size:20px;border:1px solid #fff;margin-left:20px;cursor:pointer}.page1 .slideTxtBox .bd ul li .subInfo .btnGro a:hover{color:#fff}.page1 .slideTxtBox .bd ul li .dataInfo{padding:8% 0;font-size:45px}.page1 .slideTxtBox .bd ul li .dataInfo .data{font-size:36px}.page1 .slideTxtBox .bd ul li .dataInfo .data .dataTitle{font-size:30px}.page1 .slideTxtBox .bd ul li .dataInfo .data .dataCon{font-size:40px;font-style:italic;font-weight:700}.page1 .slideTxtBox .bd ul li .dataInfo .btnGro{bottom:12%}.page2{color:#020202}.page2 .topT{font-size:52px;line-height:278px}.page2 .content1{width:100%;height:100%}.page2 .content1 .tpo{display:inline-block;height:45%;width:18%;vertical-align:top;border-radius:10px;-webkit-box-shadow:1px 1px 3px rgba(100,100,100,.5);-moz-box-shadow:1px 1px 3px rgba(100,100,100,.5);box-shadow:1px 1px 3px rgba(100,100,100,.5)}.page2 .content1 .tpo:first-child{margin-right:11%}.page2 .content1 .tpo .tpoCir{width:100px;height:100px;border-radius:50%;margin:10% auto}.page2 .content1 .tpo .tpoCir.lisCircle{background:url(../img/tingli.png) center center no-repeat #eb2a02;background-size:68% 68%}.page2 .content1 .tpo .tpoCir.reaCircle{background:url(../img/yuedu.png) center center no-repeat #02a155;background-size:55% 59%}.page2 .content1 .tpoTitle{height:60%;border-top-left-radius:10px;border-top-right-radius:10px;overflow:hidden;color:#fff;font-size:20px}.page2 .content1 .tpoTitle.listenTit{background:#ff684b}.page2 .content1 .tpoTitle.readTit{background:#02bd8c}.page2 .content1 .tpoCon{height:40%;padding:20% 30px 0;font-size:16px}.page3{background:url(../img/big2.jpg);background-size:cover;position:relative}.page3 img{width:45%;margin:15% 0 0 15%}.page3 .comTip{position:absolute;border-radius:5px;padding:25px;width:30%;background:#02c0eb;color:#fff;top:25%;left:42%;-webkit-animation:fadeInRight 1s .2s ease both;-moz-animation:fadeInRight 1s .2s ease both}.page3 .comTip:before{content:'';position:absolute;display:inline-block;width:0;height:0;border:15px solid transparent;border-top:40px solid #02c0eb;transform:rotate(52deg);bottom:-31px;left:-21px}.page4{position:relative}.page4 .planCon{margin-top:10%;position:relative}.page4 .planCon .wrapCon{width:49%}.page4 .planCon .wrapHt{display:inline-block;position:relative}.page4 .planCon .wrapHt .planTitle{color:#000;width:500px;margin-top:-5%;position:absolute;top:-120px;text-align:left;margin-left:-35%}.page4 .planCon .wrapHt .wrapHead{display:inline-block;height:150px;width:150px;border-radius:50%;background:url(../img/people.png) center center no-repeat #464a7f;background-size:75% 75%;vertical-align:middle}.page4 .footer{color:#fff;font-size:14px;height:65px;line-height:65px;position:absolute;bottom:0;background:#434244;text-align:center;width:100%}#login{position:absolute;background:#fff;top:20%;left:50%;margin-left:-201px;z-index:2}@media all and (max-width:1024px){.slideTxtBox{z-index:3;margin:0 auto}}@media all and (max-width:768px){.slideTxtBox{z-index:4;margin:0 auto}}.page2 .content1 .tpo{-webkit-animation:fadeInRightBig 1s .2s ease both;-moz-animation:fadeInRightBig 1s .2s ease both}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(2000px)}100%{opacity:1;-moz-transform:translateX(0)}}.planCon_span{position:relative;margin:0 auto;left:-28%}.planCon_spans{-webkit-animation:fadeInRight 1s .2s ease both;-moz-animation:fadeInRight 1s .2s ease both}.btnGro,.planTitle p{-webkit-animation:rotateInDownLeft 1s .2s ease both;-moz-animation:rotateInDownLeft 1s .2s ease both}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px)}100%{opacity:1;-moz-transform:translateX(0)}}@media all and (max-width:1200px){.slideTxtBox{z-index:2;margin:0 auto}}.head_reg a:hover{color:#02c0eb}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}