*{margin:0;padding:0}.clearfix:after{content:"";display:block;height:0;visibility:hidden;clear:both}.clearfix{zoom:1}.hide{display:none}body,html{height:100%;font-family:"Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;background:#ccc}body{overflow-x:hidden}a,button,input,optgroup,select,textarea,span,div{-webkit-tap-highlight-color:transparent}ul{list-style:none}.fix-right-nav{position:fixed;z-index:2;top:50%;margin-top:-205px;right:10px;width:50px;height:411px;background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/fix_bg.png?v1");text-align:center}.fix-right-nav li{height:20px;width:20px;cursor:pointer;margin:0 15px 17px;border-radius:50%;display:inline-block;background:#ddac5d}.fix-right-nav .tomain{width:50px;height:50px;margin-top:36px;background:none}.fix-right-nav li.active{background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/fix_active.png")}.fix-right-nav .tomain.active{background:none}input,textarea{-webkit-appearance:none}.mask{width:100%;height:100%;background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;z-index:10;overflow-y:auto}.mask .pre-btn,.mask .next-btn{width:96px;height:194px;background-image:url("https://static.web.sdo.com/moon/pic/20180420_Toy/arrow.png");position:absolute;top:50%;margin-top:-97px;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:scale(0.7);transform:scale(0.7);cursor:pointer}.mask .pre-btn{right:1%;background-position-x:-96px}.mask .next-btn{left:1%}.mask .card,.mask .bz{padding:0 10%;position:relative}.mask .card .pagination,.mask .bz .pagination{position:absolute;z-index:20;bottom:10px;width:100%;text-align:center}.mask .card img,.mask .bz img{max-height:100vh}.mask .card .close,.mask .bz .close{width:55px;height:57px;cursor:pointer;background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/close_pop.png");position:absolute;right:10px;top:10px}.mask .card-swiper{top:50%}.wrap .pagewrap{position:relative}.wrap .pagewrap .page-bg{width:100%;display:block}.wrap .content{width:1000px;position:absolute;top:0;left:50%;margin-left:-500px;height:100%;max-width:100%}.wrap .main-page{width:100%}.wrap .main-page .tohome,.wrap .main-page .todownload{width:63px;height:63px;position:absolute;top:14px;background-image:url("https://static.web.sdo.com/moon/pic/20180420_Toy/top_nav.png");cursor:pointer;z-index:2}.wrap .main-page .tohome{right:91px}.wrap .main-page .todownload{right:22px;background-position-x:-62px}.wrap .main-page .todownload img{opacity:0;position:absolute;right:0;top:45px;transition:.5s all;-webkit-transition:.5s all;margin-top:20px;height:0}.wrap .main-page .todownload:hover img{opacity:1;height:auto}.wrap .main-page .qudaobox{-webkit-animation-delay:1s;animation-delay:1s;position:absolute;z-index:2;right:37%;top:18%;width:5%}.wrap .main-page .qudao{position:absolute;width:100%;display:block;z-index:2;cursor:pointer;-webkit-transform-origin:40% bottom;transform-origin:40% bottom;-webkit-animation:qdAni 2s alternate infinite ease-in-out;animation:qdAni 2s alternate infinite ease-in-out}.wrap .main-page .slogen{width:37%;position:absolute;left:50%;margin-left:-20%;top:24%}.wrap .main-page .page-nav{position:absolute;left:-2%;bottom:42px;width:1054px;height:238px;background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/page_nav_2.png");-webkit-animation-delay:.7s;animation-delay:.7s}.wrap .main-page .page-nav li{width:100px;height:100px;display:inline-block;vertical-align:top;margin-right:20px;cursor:pointer}.wrap .main-page .page-nav li:nth-child(1){width:155px;height:155px}.wrap .main-page .page-nav li:nth-child(2){width:200px;height:200px}.wrap .main-page .page-nav li:nth-child(3){width:240px;height:240px}.wrap .main-page .page-nav li:nth-child(4){width:200px;height:200px}.wrap .main-page .page-nav li:nth-child(5){width:155px;height:155px;margin:-3px}.wrap .page1 .role-nav{position:absolute;left:96px;top:20%;z-index:2}.wrap .page1 .role-nav li{width:26px;height:26px;background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/role_icon.png") no-repeat;margin:14px 0;cursor:pointer}.wrap .page1 .role-nav li.active{margin-left:-100px;background:none}.wrap .page1 .role-nav li:nth-child(1).active{width:190px;height:186px;background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/role_icon1.png") no-repeat}.wrap .page1 .role-nav li:nth-child(2).active{width:190px;height:186px;background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/role_icon2.png?v1") no-repeat}.wrap .page1 .role-nav li:nth-child(3).active{width:190px;height:186px;background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/role_icon3.png?v1") no-repeat}.wrap .page1 .role-nav li:nth-child(4).active{width:190px;height:186px;background:url("https://static.web.sdo.com/moon/pic/20180420_Toy/role_icon4.png") no-repeat}.wrap .page1 .role-swiper{width:100%;height:100%;position:absolute;right:-20%;bottom:-1px;overflow:visible}.wrap .page1 .role-swiper .word{width:31%;position:absolute;left:0;top:8%}.wrap .page1 .role-swiper .role{height:100%;position:absolute;right:15%;top:0}.wrap .page1 .role-swiper .swiper-slide{opacity:0}.wrap .page1 .role-swiper .swiper-slide-active{opacity:1}.wrap .page1 .role-swiper .swiper-slide{position:relative}.wrap .page1 .role-swiper .bz{position:absolute;left:2%;bottom:8%;width:27%}.wrap .page1 .role-swiper .bz a{display:block;width:55%;height:19%;position:absolute;right:0;top:16%}.wrap .page1 .role-swiper .bz .exchange{width:10%;position:absolute;left:14px;bottom:4px;cursor:pointer;-webkit-transition:transform .5s;transition:transform .5s}.wrap .page1 .role-swiper .bz .exchange:hover{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.wrap .page2 a{display:block;height:18%;width:25%;position:absolute;right:19%;top:17%;z-index:2}.wrap .page2 .see-big-btn{width:72px;height:70px;background:url(https://static.web.sdo.com/moon/pic/20180420_Toy/see_big_btn.png) no-repeat;position:absolute;left:51%;top:63%;cursor:pointer;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:scale(0.8);transform:scale(0.8)}.wrap .page3 .zht-swiper{width:24%;height:45%;position:absolute;left:38%;top:36.5%;border-radius:50%}.wrap .page3 .zht-swiper .swiper-wrapper{width:100%;height:100%;background:#fff}.wrap .page3 .prev-btn{width:6%;height:20%;position:absolute;left:22%;top:48%;cursor:pointer;z-index:2}.wrap .page3 .next-btn{width:6%;height:20%;position:absolute;right:22%;top:48%;cursor:pointer;z-index:2}.wrap .page3 .see-big-btn{width:71px;height:70px;background:url(https://static.web.sdo.com/moon/pic/20180420_Toy/see_big_btn.png) 1px no-repeat;position:absolute;left:48.3%;top:73%;cursor:pointer;z-index:2;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transform-origin:center center;transform-origin:center center}.wrap .page4 .tomanhua{display:block;position:absolute;left:61%;top:34%;width:11%;height:6%;z-index:2;cursor:pointer}.wrap .page4 .light1{width:24%;position:absolute;bottom:16%;left:21.5%;-webkit-animation:lightAni alternate linear 3s infinite;animation:lightAni alternate linear 3s infinite}.wrap .page4 .light2{width:24%;position:absolute;bottom:16%;right:22%;-webkit-animation:lightAni alternate linear 3s infinite;animation:lightAni alternate linear 3s infinite}.wrap .page4 .icon1{position:absolute;left:22.5%;top:36%;width:22%;-webkit-animation:page4IconAni alternate ease-in-out 2s infinite;animation:page4IconAni alternate ease-in-out 2s infinite}.wrap .page4 .icon2{position:absolute;right:22.5%;top:45%;width:22%;-webkit-animation:page4IconAni alternate ease-in-out 2s infinite;animation:page4IconAni alternate ease-in-out 2s infinite}@-webkit-keyframes page4IconAni{0%{-webkit-transform:translate3d(0, -6%, 0);transform:translate3d(0, -6%, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes page4IconAni{0%{-webkit-transform:translate3d(0, -6%, 0);transform:translate3d(0, -6%, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes lightAni{0%{opacity:1}50%{opacity:1}100%{opacity:.4}}@keyframes lightAni{0%{opacity:1}50%{opacity:1}100%{opacity:.4}}@media only screen and (max-width: 1500px){.wrap .page2 .see-big-btn{left:50%;top:61%}.wrap .page3 .see-big-btn{-webkit-transform:scale(0.6);transform:scale(0.6);left:50%;margin-left:-35px;margin-top:-.5%}.wrap .main-page .page-nav{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:scale(0.7);transform:scale(0.7);bottom:0px}.wrap .main-page .tohome,.wrap .main-page .todownload{-webkit-transform:scale(0.7);transform:scale(0.7)}.wrap .main-page .tohome{right:71px}}@media only screen and (max-width: 1200px){.wrap .page2 .see-big-btn{left:49%;top:60%;-webkit-transform:scale(0.5);transform:scale(0.5)}}.pagination{position:absolute;z-index:20;bottom:10px;width:100%;text-align:center}.swiper-pagination-switch{display:inline-block;width:8px;height:8px;border-radius:8px;background:#555;margin:0 5px;opacity:0.8;border:1px solid #fff;cursor:pointer}.swiper-active-switch{background:#fff}@-webkit-keyframes qdAni{0%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}100%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}@keyframes qdAni{0%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}100%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}