a:hover{text-decoration: none;}
.container{width:1200px;margin:0 auto;padding:0;}
.current{margin-top:60px;width:100%;height:500px;background-image:linear-gradient(225deg,#C6AC97 0,#45638C 100%);overflow:hidden;position: relative;}
.svg-container{width:500px;height:500px;margin:0 auto;position: relative;}
.svg-container .yuandian{width:30px;height:30px;border-radius:50%;background: #ffb120;position: absolute;left:235px;top:235px;box-shadow: 0 0 30px #ffce74;}
.svg-container .circle i{width:100%;height:100%;position: absolute;animation:circleRoate 30s infinite linear;}
.svg-container .circle .i2{animation:circleRoate2 30s infinite linear;}
.svg-container .circle i span{border-radius: 50%; background:#fff; position: absolute;}
@keyframes circleRoate{  
    from{transform: rotate(0deg);}  
    to{transform: rotate(360deg);}  
}  
@keyframes circleRoate2{  
    from{transform: rotate(0deg);}  
    to{transform: rotate(-360deg);}  
}  
.svg-container .circle{border:1px solid #fff;border-radius:50%;position: absolute;}
.svg-container .circle1{width:100px;height:100px;left:200px;top:200px;opacity: 0.8;}
.svg-container .circle1 i span{width: 4px;height: 4px; right:-2px;top: 48px;}
.svg-container .circle2{width:160px;height:160px;left:170px;top:170px;opacity: 0.7;}
.svg-container .circle2 i span{width: 8px;height: 8px;left: 76px;bottom:-4px;}
.svg-container .circle3{width:220px;height:220px;left:140px;top:140px;opacity: 0.6;}
.svg-container .circle3 i span{width: 8px;height: 8px;left: 186px;top:30px;}
.svg-container .circle4{width:280px;height:280px;left:110px;top:110px;opacity: 0.5;}
.svg-container .circle4 i .yd1{width: 4px;height: 4px;left: 266px;top:80px;}
.svg-container .circle4 i .yd2{width: 12px;height: 12px;left: 4px;top:80px;}
.svg-container .circle4 i .yd3{width: 8px;height: 8px;left: 140px;bottom:-4px;}
.svg-container .circle5{width:340px;height:340px;left:80px;top:80px;opacity: 0.4;}
.svg-container .circle5 i .yd1{width: 8px;height: 8px;left: -4px;top:166px;}
.svg-container .circle5 i .yd2{width: 12px;height: 12px;right: -6px;top:164px;}
.svg-container .circle6{width:400px;height:400px;left:50px;top:50px;opacity: 0.3;}
.svg-container .circle7{width:460px;height:460px;left:20px;top:20px;opacity: 0.2;}
.svg-container .circle8{width:520px;height:520px;left:-10px;top:-10px;opacity: 0.1;}


.current .bTitle{width:100%;text-align: center;font-size: 42px;color:#fff;position: absolute;top: 100px;}
.current .sTitle{width:100%;text-align: center;font-size: 32px;color:#fff;position: absolute;top: 180px;}
.current ul{width:100%;height:120px;display:flex;justify-content: center;position: absolute;bottom: 20px;}
.current ul li{width:250px;height:120px;text-align: center;float: left;}
.current ul li .icon{width:50px;height:50px;}
.current ul li p{line-height: 60px;font-size:14px;color:#ddd;}
.current ul li:hover .icon{transform: translateY(-10px);}
.current ul li:hover p{color:#fff;}
.trans03s{transition: 0.3s all linear;}


.nav{width: 100%;height:60px;border-top:1px solid #f4f4f4;background:#fff;text-align: center;z-index: 999;}
.nav li,.nav li a{width:70px;height:60px;margin:0 20px;text-align: center;line-height: 60px;font-size: 16px;color:#444;display: inline-block;cursor:pointer;}
.nav li a{margin:0;text-decoration: none;}
.nav li:hover{border-bottom: 2px solid #444;}
.nav .select{border-bottom: 2px solid #444;}
.main{width: 1200px;margin:30px auto;overflow: hidden;}
.main .video{width: 1230px;overflow: hidden;}
.video li{width: 280px;height:528px;margin:20px 10px;background: url(../images/videoBg.jpg);float: left;}
.video li .img{width: 254px;height:414px;margin:50px 0 0 14px;position: relative;overflow: hidden;}
.video li .img img{width: 254px;height:414px;display: block;}

.video li .info{width: 224px;height:50px;margin-left:14px;padding:0 15px;line-height: 55px;}
.video li .info span{font-size: 14px;color:#666;}
.video li .info .ww{width:20px;height:20px;margin-top:18px;background:url("http://amos.alicdn.com/realonline.aw?v=2&uid=%E6%B2%83%E5%A7%86%E8%AE%BE%E8%AE%A1&site=cntaobao&s=2&charset=utf-8") center center no-repeat;float: right;display: block;}

.index-title{font-size:16px;text-align:center;padding:50px 0;}
.index-title h2{font-size:36px;font-weight:400;}
.index-title a{width:100px;height:36px;line-height:36px;border:1px solid #DBDCE0;text-align:center;font-size:14px;display:block;margin:25px auto 0;transition:all .2s;}
.index-title a:hover{background:#F96A69;color:inherit;border-color:#F96A69;color:#fff;}

.weexList{padding:10px 0 50px;overflow: hidden;}
.weexList .title{width:200px;height:60px;margin:0 auto 20px;font-size: 24px;font-weight: 700;color: #000;text-align: center;line-height:60px;position: relative;}
.weexList .title span{width: 130px;height: 4px;position: absolute;left: 35px;bottom: 0;background: -webkit-linear-gradient(left,#710cd6,#0685ec) no-repeat;display: block;}
.video .inner{display:block;cursor:pointer;}
.video .inner img{transition:all .4s;}
.video .inner:hover img{transform:scale(1.05);}
.video .vr-big{float:left;width:766px;height:484px;margin-bottom:20px;position:relative;overflow:hidden;}
.video .vr-big .text{position:absolute;left:0;right:0;bottom:0;color:#fff;padding:0 30px 20px 30px;font-size:16px;}
.video .vr-big .text h3{font-size:24px;margin-bottom:4px;}
.video .vr-big .link{width:130px;height:48px;font-size:16px;line-height:48px;text-align:center;position:absolute;z-index:2;right:30px;bottom:20px;border:1px solid #eee;color:#fff;transition:all .2s;}
.video .vr-big .link:hover{background:#F96A69;border-color:#F96A69;color:#fff;}
.video .vr-big .play{width:83px;height:83px;background:rgba(0,0,0,.4) url(../images/3f_play_left.png) no-repeat center center;position:absolute;left:50%;top:50%;margin:-21px 0 0 -21px;border-radius:50%;cursor:pointer;transition:all .2s;}
.video .vr-big .play:hover{background-color:rgba(0,0,0,.6);}
.video .vr-right{float:left;width:412px;margin-left:22px;}
.video .vr-small{margin-bottom:20px;width:412px;height:232px;position:relative;overflow:hidden;}
.video .vr-small .text{position:absolute;left:0;right:0;bottom:0;padding:0 20px 20px 20px;font-size:16px;color:#fff;}
.video .vr-small .link{width:30px;height:30px;position:absolute;background:url(../images/3f_icon.png) no-repeat center center;right:20px;bottom:14px;z-index:2;transition:all .2s;}
.video .vr-small .link:hover{background-image:url(../images/3f_icon_02.png);}
.video .vr-small .play{width:51px;height:51px;background:rgba(0,0,0,.4) url(../images/3f_play_right.png) no-repeat center center;position:absolute;left:50%;top:50%;margin:-25px 0 0 -25px;border-radius:50%;cursor:pointer;transition:all .2s;}
.video .vr-small .play:hover{background-color:rgba(0,0,0,.6);}

/**************weex教程*******************/
.weex_bd{width:1240px;margin:0 auto;overflow: hidden;}
.weex_nav{width:190px;padding-left:10px;position: fixed;top:80px;background: none;}
.weex_nav .title{height:60px; font-size:20px; color:#888;line-height: 70px;font-weight: 700;}
.weex_nav .lbox_ul li{width:190px; height:40px; line-height:40px; color:#666;font-size:14px;position:relative;cursor: pointer;}
.weex_nav .lbox_ul li span{height:4px;width:4px;background:#444;display:block;margin:18px 10px 0 0;float: left;}
.weex_nav .lbox_ul .select{color:#ea3838;}
.weex_nav .lbox_ul .select span{background:#ea3838;}
.weex_nav .lbox_ul .select a{color:#ea3838;font-weight: 700;text-decoration: none;}
.weex_nav .lbox_ul li:hover span{background:#ea3838;}
.weex_nav .lbox_ul li:hover a{color:#ea3838;font-weight: 700;text-decoration: none;}

.weex_cont{padding-top:100px;width:1020px;position: relative;float: right;}
.weex_cont .dppro{width:940px;margin:0 0 100px;padding:0 40px 40px;background: #ffffff;border-radius: 16px;overflow: hidden;position: relative;}
.weex_cont .dppro h3{font-size: 22px;color: #444;padding:50px 0 15px;border-bottom: 1px solid #ddd;}
.weex_cont .dppro p{font-size: 16px;color: #444;line-height:24px;margin: 55px 0 15px;}
.weex_cont .dppro .focus{color:#f00;margin: 30px 0 -20px;}
.weex_cont .dppro img{max-width: 940px;}
.weex_cont .dppro .mddw{position: absolute;left: 0;top:-100px;}
.weex_cont .dppro .md{position: absolute;top:-100px;}
/*************新版weex定制页面****************************/
.weex-header{width:100%;height:145px;background: #2a2a2a;position: fixed;top:0;left: 0;z-index: 999;}
.weex-header a:hover{text-decoration: none;}
.weex-header .hd2{width:100%;height:65px;background:#ffffff;display:flex;justify-content: center;align-items:center;}
.weex-header .hd2 .weex-logo{width:400px;height:65px;display:flex;justify-content: center;align-items:center}
.weex-header .hd2 .weex-logo img{width:380px;height:50px;position:relative;top:-5px;}
.weex-header .hd2 .top_nav{width:690px;height:65px;line-height:65px;display: flex;justify-content: flex-end;padding-right: 12px;box-sizing: border-box;}
.weex-header .hd2 .top_nav li{color:#333;text-align:center;padding-left:44px;}
.weex-header .hd{width:1200px;height:80px;margin:0 auto;}

.weex-header .hd ul{overflow: hidden;display: flex;justify-content: center;}
.weex-header .hd li{padding:0 20px;line-height: 90px;cursor: pointer;}
.weex-header .hd li a{width: 100%;height: 80px; color:#999;text-decoration: none;display: block;}
.weex-header .hd li span{margin-top: -13px; width: 0;height: 3px;background: #999;opacity: 0;transition: 0.3s;display: block;}
.weex-header .hd li.select a,.weex-header .hd li:hover a{color:#ea3838}
.weex-header .hd li.select span,.weex-header .hd li:hover span{width: 100%;opacity:1;background:#ea3838;}
.weex-banner{margin-top:145px;width:100%;height:510px;background-image: linear-gradient(225deg,#C6AC97 0,#45638C 100%);display: block;overflow: hidden;}
.weex-banner .banBox{width:1100px;height:430px;position: relative;margin:20px auto 0;overflow: hidden;}
.weex-banner .banBox .icon{transform: scale(0);opacity: 0;}
.weex-banner .banBox .tip{font-size: 16px;color: #fff;}
.weex-banner .banBox .tits{width: 480px;right: 0;top:90px;text-align: center;}

.weex-notice{width:100%;height:60px;line-height:60px;background:#e93340;}
.weex-notice .notice-text{width:1440px;margin:0 auto;font-size:30px;color:#fff3b9;display: flex;flex-direction: row; align-items: center;justify-content: center;}
.weex-notice .notice-text h3{font-size: 16px;font-weight: 400;}
.weex-notice .notice-text .more-btn{width:90px;height:30px;line-height:30px;margin-left:20px;transition:0.3s;text-align:center;font-size:16px;background:#fff;color:#e93340;border-radius:3px;box-shadow: 0 5px 0px #b91e2a;}
.weex-notice .notice-text .more-btn:hover{transform: translateY(1px);text-decoration: none;}
.buy-btn{width:150px;height:36px;line-height:36px;text-align:center;border-radius: 18px;    position: absolute;bottom: -20px;color: #fff;}
.btn-darkGrey{background:#686868;}
.btn-grayish{background:#aaaaaa;}
.btn-red{background:#e93340;}
.btn-green{background:#5ab37a;}

.weex-show{width:100%;background: #fff;overflow: hidden;position: relative;}
.weex-show-gray{background: #f7f8fa;}
.weex-show h2{margin-top:50px;font-size: 32px;font-weight: 700;color: #000;text-align: center;line-height:60px;}
.weex-show h3{font-size: 14px;color: #555;text-align: center;line-height:30px;font-weight: 400;}
.weex-show ul{width:1466px;margin:10px auto 50px;padding-bottom:20px;overflow: hidden;}
.weex-show ul li{width:320px;margin:20px 23px;float: left;background: #fff;box-shadow: 0 5px 20px #ccc;position: relative;display:flex;flex-direction: column;align-items: center;}
.weex-show ul li .video{width:100%;height: 630px;overflow: hidden;}
.weex-show ul li video{width:100%;height: 671px;}
.weex-show ul li .tit{height:60px;text-align: center;line-height: 50px;font-size: 14px;color:#333;overflow:hidden;}
.weex-show ul li .hot{color:#f00;}
.weex-show .xz{width:780px;margin:0 auto 100px; overflow: hidden;}
.weex-show .xz p{font-size: 14px;color: #333;line-height: 36px;}
.weex-show .md{position: absolute;top:-145px;}
.weex-show .mask a.set_edit{margin-top: 300px;}

@media screen and (max-width: 1440px) {
    .weex-show ul{width:1226px;}
    .weex-show ul li{width:280px;}
    .weex-show ul li video{width:280px;height:445px;}
    .weex-show ul li .tit{height:60px;line-height:60px;font-size:12px;}
   }


.footer{margin-top: 0;}
.footer .top{padding-top: 0;}
.sidebar{display:none;}
.abs{position: absolute;}


/*************weex模块秀****************************/
.show-header{width:100%;height:80px;background: #000000;position: fixed;top:0;left: 0;z-index: 999;}
.show-header .logo{float: left;display: block;margin: 20px 50px;}
.show-header ul{margin-left:25px;float: left;overflow: hidden;}
.show-header li{float: left;padding:0 18px;line-height: 80px;font-size: 14px;color:#fff;cursor: pointer;}
.show-header li a{width: 100%;height: 80px; color:#fff;text-decoration: none;display: block;}
.show-header li:hover a{color:#ff5000;}

.show-left{width:15%;height:1000px;position: fixed;top:80px;left: 0;z-index: 998;box-shadow: 10px 0 10px #f5f5f5;background: #fff;}
.show-left .nav1{width:100%;padding-top:50px;overflow: hidden;}
.show-left .nav1 a{width: 100%;height: 60px;line-height: 60px;text-indent: 50px;font-size: 16px;color:#333;text-decoration: none;display: block;}
.show-left .nav1 a:hover{background: #f6f6f6; color:#ff5000;}
.show-left .nav2{width:100%;margin-top:50px;padding-top:50px;border-top:1px solid #e8e8e8; overflow: hidden;}
.show-left .nav2 a{width: 100%;height: 40px;line-height: 40px;text-indent: 50px;font-size: 14px;color:#333;text-decoration: none;display: block;}
.show-left .nav2 a:hover{background: #f6f6f6; color:#ff5000;}

.show-right{padding:80px 0 100px 15%;background: #fff;}
.show-right h2{font-size: 42px;font-weight: 400;color: #000;text-align: center;height:150px;line-height:170px;}
.show-right .nave{height:60px;text-align: center; overflow: hidden;background: #fff;}
.show-right .nave-fixed{width: 85%;position: fixed;top:80px;z-index: 997;}

.show-right .nave li{width:125px;height:40px;margin:10px;display: inline-block;font-size: 15px;color:#101010;line-height: 40px;border-radius: 8px;cursor: pointer;}
.show-right .nave a{color: #101010; text-decoration: none;}
.show-right .nave li.select{background:#ff5000;}
.show-right .nave li.select a{color: #fff; }

.show-right .showBox{margin-top:50px;padding:50px 0 0;overflow: hidden;border-top:1px solid #eee;position: relative;}
.show-right .mddw{position: absolute;top:-100px;}
.show-right .showBox h3{font-size: 18px;color: #000;text-align: center;height:100px;line-height:100px;}
.show-right .showBox ul{padding:0 100px;overflow: hidden;}
.show-right .showBox li{width: 240px;height: 280px;margin:20px;float: left;position: relative;}
.mask{width: 100%;height: 100%;background: rgba(0,0,0,0.7);opacity: 0;position: absolute;top:0;transition: 0.3s all linear;}
li:hover .mask{opacity: 1;}
.mask a{width: 160px;height: 36px;background: #00c66c;margin:0 auto;display: block;border-radius: 36px;line-height: 36px;text-align: center;font-size: 14px;color:#fff;text-decoration: none;cursor: pointer;}
.mask a.set_edit{margin-top: 100px;}
.mask a.set_copy{margin-top: 20px;background: #3c8cff;}
.mask a.go_preview{margin-top: 20px;background: #ff7943;display: none;}