body{margin: 0; padding: 0;background:#f8f8f8 url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/bg.png) top repeat; font-size: 12px;font-weight: 400; font-family:arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', Tahoma, Arial, Helvetica;}
a{ text-decoration: none; color: #333;}
dl dd{padding: 0;margin:0;}
ul{margin: 0;padding: 0;}
li{list-style: none;}

#pc{display: inherit;}
#mobile{display: none;}
.log-body{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/p1_bg10.png) top no-repeat;}

.layout{position: relative;}
.top{margin:40px auto;}
.top .header{width:100%; max-width:1580px;min-width:1200px; height: 50px; margin:0 auto; position: relative;}
.top .header .logo{position: absolute;left:0px; top:0px; z-index: 500;opacity:"0.2";}
.top .header .menu{position: absolute;right:0px; text-indent: 305px; top:0px;height:50px; width: 0px; display: none; line-height:40px;background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/line_top.png) no-repeat bottom; z-index: 500;}
.top .header .menu a{font-size:16px;margin: 0 30px; opacity:0; color: #555;}
.top .header .menu a:hover{color: #000;}
.top .header .weibo{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/weibo@2x_nor.png) top no-repeat; background-size: 100%; width: 40px; height: 38px; display: block; position: absolute; right:90px; z-index: 501; cursor: pointer;}
.top .header .weibo:hover{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/weibo@2x_hit.png) top no-repeat;background-size: 100%;}
.top .header .twitter{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/twitter@2x_nor.png) top no-repeat; background-size: 100%; width: 40px; height: 38px; display: block; position: absolute; right:30px; z-index: 501; cursor: pointer;}
.top .header .twitter:hover{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/twitter@2x_hit.png) top no-repeat;background-size: 100%;}
.top .header .arrow-down{padding-right: 25px; background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/arrow.png) right center no-repeat;}
.top .header .more_version{position: absolute; right: 128px; bottom: -30px; z-index: 1000;display: none;}
.top .header .more_version a{ margin: 0 25px; font-size: 16px; color: #555;}
.top .header .more_version a:hover{color:#000;}

.step_nav{position: fixed; z-index: 1000; right:50px; top:165px;}
.step_nav li {display: none;}
.step_nav li div{margin-top: 10px;width: 44px; height: 44px; cursor: pointer;}
.step_nav .nav_step1{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/1_nor.png) top no-repeat;}
.step_nav .nav_step1:hover{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/1_hit.png) top no-repeat;}
.step_nav .active .nav_step1{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/1_down.png) top no-repeat;}
.step_nav .nav_step2{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/2_nor.png) top no-repeat;}
.step_nav .nav_step2:hover{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/2_hit.png) top no-repeat;}
.step_nav .active .nav_step2{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/2_down.png) top no-repeat;}
.step_nav .nav_step3{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/3_nor.png) top no-repeat;}
.step_nav .nav_step3:hover{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/3_hit.png) top no-repeat;}
.step_nav .active .nav_step3{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/3_down.png) top no-repeat;}
.step_nav .nav_step4{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/4_nor.png) top no-repeat;}
.step_nav .nav_step4:hover{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/4_hit.png) top no-repeat;}
.step_nav .active .nav_step4{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/4_down.png) top no-repeat;}
.click_tip{position: fixed; z-index: 1000; top: 225px; right: 110px;opacity:0;}

.tab-line{text-align: right;position: absolute;top:-5px; right: 0px; z-index: 1000;}

.main{height: 950px;}
.main .main-base{ min-height: 700px; position: relative;}
.main1 .cloud_block,.main2 .cloud_block,.main3 .cloud_block,.main4 .cloud_block{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block; z-index: 499;}
.mian1 .cloud1,.mian2 .cloud1,.mian3 .cloud1,.mian4 .cloud1{background:transparent url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/cloud1.png) repeat top center;z-index:1;-moz-animation:move-twink-back 100s linear infinite;-ms-animation:move-twink-back 100s linear infinite;-o-animation:move-twink-back 100s linear infinite;-webkit-animation:move-twink-back 100s linear infinite;animation:move-twink-back 100s linear infinite;}
.main1 .cloud2,.main2 .cloud2,.main3 .cloud2,.main4 .cloud2{background:transparent url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/cloud2.png) repeat top center;z-index:1;-moz-animation:move-twink-back 250s linear infinite;-ms-animation:move-twink-back 250s linear infinite;-o-animation:move-twink-back 250s linear infinite;-webkit-animation:move-twink-back 250s linear infinite;animation:move-twink-back 250s linear infinite;}
.main1 .ban1,.main2 .ban2,.main3 .ban3,.main4 .ban4{margin:100px auto 0; text-align: center; z-index: 500; position: relative;text-align: center;}
.main2 .ban2,.main3 .ban3,.main4 .ban4{margin:0px auto 0;}
.main2,.main3,.main4{margin:0px auto; padding-top: 200px;}
.main1{height: 1000px;}
.main1 .p1_1{position: absolute;left:-70px;top:-190px; z-index: 10;}
.main1 .p1_2{position: absolute; top:-190px;left:50%;margin-left:-272px; z-index: 1;}
.main1 .p1_3{position: absolute;top:-190px;left: 50%;margin-left: -485px; z-index: 3;}
.main1 .p1_4{position: absolute;top:-190px;left: 50%;margin-left: -600px;opacity:0; z-index: 2;}
.main1 .p1_5{position: absolute;top: -80px; left: 50%;margin-left: -230px;opacity:0;}
.main1 .p1_6{position: absolute;top: 20px; left: 50%;margin-left: -470px;opacity:0;}
.main1 .p1_7{position: absolute;bottom: -3px; left: 0px;  width: 100%; max-width:1570px;opacity:0.2;}
.main1 .p1_7 img{ width: 100%; max-width: 1570px; min-width:1200px;}
.main1 .p1_8{position: absolute;left: 50%; margin-left:-360px;top:400px;opacity:0.2;}
.main1 .p1_9{position: absolute;right: 0px;top:500px;opacity:0.2;}
.main1 .main1-txt{z-index: 900;position: relative;}
.main1 .btn{text-align: center;}
.main1 .download{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/download_nor.png) top no-repeat;display:inline-block; margin-left:-45px; width: 241px; height: 80px; cursor: pointer;}
.main1 .download:hover{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/download_hit.png) top no-repeat;}
.main1 .download_en{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/en/download_nor.png) top no-repeat;display:inline-block; margin-left:-45px; width: 279px; height: 80px; cursor: pointer;}
.main1 .download_en:hover{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/en/download_hit.png) top no-repeat;}
.main1 .tip-list{width: 860px;position: relative; z-index: 800; margin: 100px auto 0;height: 54px; opacity:0;color:#555;}
.main1 .tip-list div{position: absolute;padding-left: 70px;height: 54px; line-height: 25px; font-size: 16px;}
.main1 .tip-list .tip1{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/tip1.png) left center no-repeat;left: 0px;}
.main1 .tip-list .tip2{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/tip2.png) left center no-repeat;left: 300px;}
.main1 .tip-list .tip3{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/tip3.png) left center no-repeat;right: 0px; }
.main1 .main-download{margin-top: 50px;}
.main1 .version{font-size: 28px;color:#555;}
.main1 .version span{font-size:18px; color:#666;}
.main1 .pp_logo{margin-top: 40px;}

.main2{height: 1000px;}
.main2 .p2_1{position: absolute;left: -200px; top:0px;}
.main2 .p2_2{position: absolute;right: 0px; top:0px;opacity:0.7;}
.main2 .p2_3{position: absolute; left: 350px; z-index: 4; bottom:0px; width: 100%; max-width:1033px; min-width: 411px; }
.main2 .p2_3 img{width: 100%; max-width:1033px; min-width: 511px;}
.main2 .p2_4{position: absolute;right: 0px; bottom:-3px; z-index: 3;}
.main2 .p2_5{position: absolute;left: 0px; bottom:0px; z-index: 5;}
.main2 .p2_6{position: absolute; top:70px; left: 50%;margin-left: 160px;}
.main2 .main2-txt{z-index: 900; position: relative;}
.main2 .to-rotate{animation:rotate 3s linear;-moz-animation:rotate 3s linear;-ms-animation:rotate 3s linear;-o-animation:rotate 3s linear;-webkit-animation:rotate 3s linear;}
.main2 .device{margin-top: 200px;}

.main3{height: 1000px;}
.main3 .p3_1{position: absolute;top: 0px; left: 0px;width: 100%;max-width: 1407px; min-width:1200px;}
.main3 .p3_1 img{width: 100%;max-width: 1407px; min-width:1200px;}
.main3 .p3_2{position: absolute;top: 0px; right: 0px;}
.main3 .p3_3{position: absolute;top: 300px; right: 0px;opacity:0.7;}
.main3 .p3_4{position: absolute;bottom: 0px; right: 0px; z-index: 5; opacity: 0.7;}
.main3 .p3_5{position: absolute;bottom: 0px; left: -50px; width: 100%;max-width: 1334px; min-width:1200px; z-index: 4;}
.main3 .p3_5 img{width: 100%;max-width: 1334px; min-width:650px;opacity: 0.7;}
.main3 .main3-desc{color:#333;margin: 0 auto; width: 1050px; font-size: 14px; position: relative; z-index: 1000; padding-bottom: 50px;}
.main3 .main3-desc .title{font-size: 16px; margin-top: 20px; text-indent: 0px;color:#333; padding-left: 0px;}
.main3 .main3-desc p{line-height: 16px; padding-left: 19px;}

.main4{height:1000px;}
.main4 .p4_1{position: absolute;top: 0px; left: 0px;}
.main4 .p4_2{position: absolute;top: 0px; left:50%;margin-left: -700px;}
.main4 .p4_3{position: absolute; top:70px; left: 0px; opacity: 0.1;}
.main4 .p4_4{position: absolute; top: 200px; right: 0px; opacity: 0.3;}
.main4 .p4_4 img{ width: 100%;max-width: 1511px; min-width: 730px;}
.main4 .p4_5{position: absolute; left: 0px; bottom:0px; max-width: 1200px; min-width:800px; width: 100%; }
.main4 .p4_5 img{max-width: 1200px; min-width:800px; width: 100%; }
.main4 .main4-desc{width: 880px; margin: 80px auto 0; font-size: 14px; position: relative; z-index: 1000;color:#555;}
.main4 .main4-desc p{margin-top: 25px; font-size: 16px; line-height: 24px;}

.log{width: 98%; max-width: 980px; margin:40px auto 0;}
.log .log-title{font-size: 28px; padding-top:80px; padding-bottom: 30px; text-align: center;}
.log .log-list{width: 90%; margin: 0 auto;}
.log .log-list dl{margin-top: 30px;}
.log .log-list dt{font-size:22px;line-height: 60px; color:#333; }
.log .log-list dt span{font-size: 16px;color: #666;margin-left: 10px;}
.log .log-list dd{font-size: 16px;color:#555;}

.footer{text-align: center; color:#333; position: absolute; bottom: 50px; z-index: 1000; display: block; width: 100%; padding: 50px 0;}

.mar-t-15{margin-top: 15px;}
.mar-t-40{margin-top: 40px;}
.mar-t-50{margin-top: 50px;}
.mar-t-100{margin-top: 100px;}
.mar-t-200{margin-top: 200px;}

.p-t-20{padding-top: 20px;}
.p-t-50{padding-top: 50px;}
.p-t-100{padding-top: 100px;}
.p-t-140{padding-top: 140px;}
.p-b-20{padding-bottom: 20px;}

.text-c{text-align: center;}
.c-f:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.c-f{_overflow:auto;zoom:1;}

.fs-16{font-size: 16px;}
.fs-24{font-size: 24px;}
.fs-32{font-size: 32px;}

.cor-3{color:#333;}
.cor-4{color:#444;}
.cor-6{color:#666;}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:5000px -5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:5000px -5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:5000px -5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:5000px -5000px;}
}

@keyframes rotate{
    0%{ transform:rotate(0deg);}
    100%{transform:rotate(-360deg);}
}
@-webkit-keyframes rotate{
    0%{ -webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes rotate{
    0%{ -moz-transform:rotate(0deg);}
    100%{-moz-transform:rotate(-360deg);}
}
@-ms-keyframes rotate{
    0%{ -ms-transform:rotate(0deg);}
    100%{-ms-transform:rotate(-360deg);}
}


@media (max-width:1440px){
    .ban1,.ban2,.ban3,.ban4{margin: 50px auto 0 !important;}
    .ban1 img,.ban2 img,.ban3 img,.ban4 img{width: 400px;}
    .main1, .main2, .main3, .main4{height: 800px;}
    .main2, .main3, .main4{padding-top: 100px;}
    .main2 .device{margin-top: 100px;}
    .main1 .main-download{margin-top: 20px;}
    .main1 .version{font-size: 16px;color:#555;}
    .main1 .version span{font-size: 14px; color:#666;}
    .main1 .pp_logo{margin-top: 10px;}
    .main1 .pp_logo img{width: 180px;}
    .main1 .tip-list{margin-top: 30px;}
    .main1 .download{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/download_nor.png) top no-repeat;margin: 0 auto;background-size: 100%; display: block; width:150px;  cursor: pointer;}
    .main1 .download:hover{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/download_hit.png) top no-repeat; width:150px;background-size: 100%;}

    .main1 .p1_2{width:735px; }
    .main1 .p1_8{top:280px;}
    .main1 .p1_9{top:320px;}
    .main2 .p2_1{left: -500px;}
    .main2 .p2_3,.main2 .p2_4,.main2 .p2_5,.main3 .p3_4,.main3 .p3_5,.main4 .p4_5{position: absolute;}
    .main2 .p2_3{width: 775px;}
    .main3 .p3_4{width: 430px;position: absolute;}
    .main3 .p3_5 img{width:650px;}
    .main4 .p4_2{width: 900px;left:50%;margin-left: -450px;}
    .main4 .p4_3{width: 650px;}
    .main4 .p4_4{top:205px;}
    .main4 .p4_5 img{width:900px;}
    .top .header{width: 1200px;}
    .footer{position: absolute;}
}
@media (max-width:1330px){
    .ban1,.ban2,.ban3,.ban4{margin: 50px auto 0 !important;}
    .ban1 img,.ban2 img,.ban3 img,.ban4 img{width: 400px;}
    .main1, .main2, .main3, .main4{height: 800px;}
    .main2, .main3, .main4{padding-top: 100px;}
    .main2 .device{margin-top: 100px;}
    .main1 .main-download{margin-top: 20px;}
    .main1 .version{font-size: 16px;color:#555;}
    .main1 .version span{font-size: 14px; color:#666;}
    .main1 .pp_logo{margin-top: 10px;}
    .main1 .pp_logo img{width: 180px;}
    .main1 .tip-list{margin-top: 30px;}

    .main1 .p1_2{width:735px; }
    .main1 .p1_8{top:280px;}
    .main1 .p1_9{top:320px;}
    .main2 .p2_1{left: -500px;}
    .main2 .p2_3,.main2 .p2_4,.main2 .p2_5,.main3 .p3_4,.main3 .p3_5,.main4 .p4_5{position: absolute;}
    .main2 .p2_3{width: 775px;}
    .main3 .p3_4{width: 430px;position: absolute;}
    .main3 .p3_5 img{width:650px;}
    .main4 .p4_2{width: 900px;left:50%;margin-left: -450px;}
    .main4 .p4_3{width: 650px;}
    .main4 .p4_4{top:205px;}
    .main4 .p4_5 img{width:900px;}
    .top .header{width: 1200px;}
    .footer{position: absolute;}
}
@media (max-width:1024px){
    #pc{display: none;}
    #mobile{display: inherit;}
    body{background:#f2f2f2;color:#555;}
    .m-top{position:fixed; left: 0px; right: 0px; height: 40px; background:#fff; top: 0px; z-index: 1001;opacity: 0.85;}
    .m-top .m-logo{position: fixed; left: 10px; top:5px; z-index: 1002;}
    .m-top .navbar-toggle{ background:none;margin-right: 10px; border: 1px solid transparent;border-radius: 4px; height: 36px; cursor: pointer; }
    .m-top .navbar-toggle .icon-bar {background: #666;margin-top: 4px;display: block;width: 22px;height: 2px;border-radius: 1px;}
    .m-top .px-nav-list{width: 100%; display: none;opacity:1; border-bottom: 1px solid #dedede;position: fixed; top:40px; background: #fff; }
    .m-top .px-nav-list li{line-height:36px; border-top: 1px solid #dedede; text-indent: 10px; font-size: 14px; }
    .m-top .px-nav-list li a{width: 100%; display: block;}
    .m-main{padding-top: 40px;}
    .m-main1{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/m/p1.png) top no-repeat;width: 100%;background-size: 100%;max-width: 1040px; padding-bottom: 50px;}
    .m-main2{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/m/p2.png) right center no-repeat; width: 100%;background-size:100%;max-width: 1040px;padding-bottom: 140px;}
    .m-main3{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/m/p3.png) bottom no-repeat;width: 100%;background-size: 100%;max-width: 1040px; padding-bottom: 50px;}
    .m-main4{background: url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/m/p4.png) bottom no-repeat;width: 100%;background-size: 100%;max-width: 1040px; padding-bottom: 50px;}
    .m-main1 .m-download-btn{display: block; cursor: pointer; margin:70px auto 0;text-align: center;}
    .m-main1 .m-download-btn img{width: 100%; max-width: 170px;max-height:75px; }
    .m-main3-desc{width: 90%; margin: 0 auto;}
    .m-main4-desc{width: 90%; margin: 0 auto;}
    .m-tip-list{margin: 35px auto 0; width: 230px;}
    .m-tip-list div{height: 52px; margin: 50px auto 0; padding-left: 65px; font-size:16px; line-height: 26px; }
    .m-tip-list .m-tip1{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/m/icon1.png) left center no-repeat; background-size: 50px 50px;}
    .m-tip-list .m-tip2{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/m/icon2.png) left center no-repeat;background-size: 50px 50px;}
    .m-tip-list .m-tip3{background:url(https://raw.githubusercontent.com/panguweb/pangu_picture/master/9_3_3/m/icon3.png) left center no-repeat;background-size: 50px 50px;}
    .font-pic{text-align: center;}
    .font-pic img{ width: 80%; max-width:760px; }
    .line{text-align: center;}
    .line img{width:100%; max-width:978px;}
}