@charset "utf-8";
/* 通用部分 */
body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option{margin: 0; padding: 0;}
html,body{font-family: "Microsoft YaHei","SimSun","Arial","Tabhoma",sans-serif; font-size: 20px; text-align: left; box-sizing: border-box;}
ul,ol,li{list-style: none;}
img{border: 0; vertical-align: top;}
input,select,textarea{outline: 0;}
textarea{resize: none;}
table{border-collapse: collapse; border-spacing: 0;}
th,strong,var,em{font-weight: normal; font-style: normal;}
a{text-decoration: none;}
a:link,a:visited,a:hover,a:active{text-decoration: none !important;}
.hide, .videoUrl{display: none; visibility: hidden; opacity: 0;}
.clear{display: block;}
.clear:after,ul:after{content: ''; overflow: hidden; width: 100%; height: 0px; font-size: 0px; display: block; clear: both;}
.g-1200{max-width: 1200px;}.g-1280{max-width: 1280px;}.g-1360{max-width: 1360px;}.g-1440{max-width: 1440px;}.g-1520{max-width: 1520px;}.g-1600{max-width: 1600px;}.g-1680{max-width: 1680px;}.g-1760{max-width: 1760px;}.g-1840{max-width: 1840px;}.g-1920{max-width: 1920px;}
.g-1200,.g-1280,.g-1360,.g-1440,.g-1520,.g-1600,.g-1680,.g-1760,.g-1840,.g-1920{width: 100%; margin-left: auto; margin-right: auto; position: relative;}
.g-1200:after,.g-1280:after,.g-1360:after,.g-1440:after,.g-1520:after,.g-1600:after,.g-1680:after,.g-1760:after,.g-1840:after,.g-1920:after{content: ''; overflow: hidden; width: 100%; height: 0px; font-size: 0px; display: block; clear: both;}
.m-lmt{text-align: center; background-position: center center; background-repeat: no-repeat;}
.m-lmt a{display: inline-block;}
.m-main{position: relative;}
.prev,.next{position: absolute; transition: all 0.3s; user-select: none; cursor: pointer;}
/*多行超出省略效果*/
.tem2,.tem3,.tem4{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;}
.tem2{-webkit-line-clamp: 2;}.tem3{-webkit-line-clamp: 3;}.tem4{-webkit-line-clamp: 4;}
/*单行超出省略效果*/
.tes{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis;}
.g_pub_header{width: 100%; height: 48px; position: fixed !important; top: 0; z-index: 2;}
.g_pub_footer{width: 100%; height: 48px; position: fixed !important; bottom: 0; z-index: 2;}

/***********************************************************************************************/
body{width: 100%; height: 100vh; overflow: hidden;}
.swiper-container0{width: 100%; height: 100%; }
.swiper-container0 .swiper-slide{width: 100%; height: 100%; display: flex; overflow: hidden;}

.s1{background: url(../images/page1-bg.jpg) center top no-repeat; background-size: 100% 100%; }
.s1 .m-main{width: 947px; height: 628px; margin: auto auto;}
.s1 .m-view{width: 947px; height: 340px; opacity: 0;}

.s2{background: url(../images/page2-bg.jpg) center top no-repeat; background-size: 100% 100%; }
.s2 .m-main{width: 1252px; height: 823px; margin: auto auto; position: relative; box-sizing: border-box;  zoom:0.8;}
.s2 .m-main .m-brow{position: absolute; top: 68px;}
.s2 .m-main .tips{position: absolute; width: 318px; height: 570px; top: 200px; left: 2px; color: #ffffff; background: url(../images/page2-left-txt-bg.png) no-repeat; background-size: 100% 100%; box-sizing: border-box; padding: 30px; font-size: 16px; line-height: 30px; overflow: hidden;}
.s2 .m-main .tips .inbox{text-align: justify; overflow: hidden;}
.s2 .m-main .track-box{position: absolute; width: 908px; height: 823px; top: 34px; right: 0px;}
.s2 .m-main .track-box .t0,.s2 .m-main .track-box .t1,.s2 .m-main .track-box .t2,.s2 .m-main .track-box .t3,.s2 .m-main .track-box .t4,.s2 .m-main .track-box .t5,.s2 .m-main .track-box .t6,.s2 .m-main .track-box .t7{position: absolute;}
.s2 .m-main .track-box .t0{background: url(../images/page2-track0.png) no-repeat; width: 135px; height: 115px; top: 360px; left: 357px;}
.s2 .m-main .track-box .t1{background: url(../images/page2-track1.png) no-repeat; width: 190px; height: 199px; top: 317px; left: 327px; animation:  rot-left 186s linear infinite; transform-origin: 95px 104px; }
.s2 .m-main .track-box .t2{background: url(../images/page2-track2.png) no-repeat; width: 233px; height: 240px; top: 305px; left: 305px; animation:  rot-right 121s linear infinite; transform-origin: 116.5px 116px; }
.s2 .m-main .track-box .t3{background: url(../images/page2-track3.png) no-repeat; width: 295px; height: 295px; top: 274px; left: 275px; animation:  rot-left 78s linear infinite;}
.s2 .m-main .track-box .t4{background: url(../images/page2-track4.png) no-repeat; width: 334px; height: 343px; top: 254px; left: 255px; animation:  rot-left 60s linear infinite; transform-origin: 167px 167px; }
.s2 .m-main .track-box .t5{background: url(../images/page2-track5.png) no-repeat; width: 640px; height: 640px; top: 101px; left: 102px; animation:  rot-right 63s linear infinite;}
.s2 .m-main .track-box .t6{background: url(../images/page2-track6.png) no-repeat; width: 696px; height: 696px; top: 73px; left: 74px; animation: rot-right 298s linear infinite;}
.s2 .m-main .track-box .t7{background: url(../images/page2-track7.png) no-repeat; width: 801px; height: 801px; top: 18px; left: 22px; animation: rot-left 235s linear infinite;}
.s2 .m-main .keys-box .keys{position: absolute; background-image: url(../images/page2-key-bg-1.png); background-position: center center; background-repeat: no-repeat; color: #ffffff; text-align: center; font-size: 18px; display: flex; align-content: center; flex-wrap: wrap; justify-content: center; cursor: pointer; box-sizing: border-box; padding-bottom: 10px;}
.s2 .m-main .keys-box .keys:nth-child(1){width: 169px; height: 169px; top: 34px; left: 682px; }/*人工智能+*/
.s2 .m-main .keys-box .keys:nth-child(2){width: 168px; height: 168px; background-size: 141px 141px; top: 148px; left: 925px;}/*杭州六小龙*/
.s2 .m-main .keys-box .keys:nth-child(3){width: 141px; height: 141px; background-size: 118px 118px; top: 198px; left: 630px;}/*AI疲劳*/
.s2 .m-main .keys-box .keys:nth-child(4){width: 142px; height: 142px; background-size: 118px 119px; top: 241px; left: 406px;}/*人形机器人*/
.s2 .m-main .keys-box .keys:nth-child(5){width: 141px; height: 141px; background-size: 118px 118px; top: 349px; left: 880px;}/*脑机接口*/
.s2 .m-main .keys-box .keys:nth-child(6){width: 141px; height: 141px; background-size: 118px 118px; top: 359px; left: 1111px;}/*数字游民*/
.s2 .m-main .keys-box .keys:nth-child(7){width: 141px; height: 141px; background-size: 118px 118px; top: 389px; left: 539px;}/*6G*/
.s2 .m-main .keys-box .keys:nth-child(8){width: 169px; height: 169px; top: 541px; left: 826px;}/*构建 网络空间 命运共同体*/
.s2 .m-main .keys-box .keys:nth-child(9){width: 141px; height: 141px; background-size: 118px 118px; top: 557px; left: 579px;}/*算力普惠*/
.s2 .m-main .keys-box .keys:nth-child(10){width: 141px; height: 141px; background-size: 118px 118px; top: 636px; left: 344px;}/*谷子经济*/
.s2 .m-main .keys-box .keys:nth-child(11){width: 142px; height: 142px; background-size: 118px 119px; top: 653px; left: 993px;}/*银发网民*/
.s2 .m-main .keys-box .keys:nth-child(12){width: 141px; height: 141px; background-size: 118px 118px; top: 717px; left: 593px;}/*网络生态治理*/
.s2 .m-main .keys-box .keys:before{content: ""; display: block; background: url(../images/page2-key-bg-2.png) center center no-repeat; position: absolute; width: 100%; height: 100%;}
.s2 .m-main .keys-box .keys:nth-child(1):before{animation:  rot-left 16s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(2):before{animation:  rot-right 86s linear infinite; background-size: 130px 130px; }
.s2 .m-main .keys-box .keys:nth-child(3):before{animation:  rot-left 86s linear infinite; background-size: 108px 109px; }
.s2 .m-main .keys-box .keys:nth-child(4):before{animation:  rot-right 16s linear infinite; background-size: 108px 108px; }
.s2 .m-main .keys-box .keys:nth-child(5):before{animation:  rot-left 86s linear infinite; background-size: 108px 109px; }
.s2 .m-main .keys-box .keys:nth-child(6):before{animation:  rot-right 86s linear infinite; background-size: 108px 109px; }
.s2 .m-main .keys-box .keys:nth-child(7):before{animation:  rot-left 16s linear infinite ;background-size: 108px 109px; }
.s2 .m-main .keys-box .keys:nth-child(8):before{animation:  rot-right 86s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(9):before{animation:  rot-left 86s linear infinite; background-size: 108px 109px; }
.s2 .m-main .keys-box .keys:nth-child(10):before{animation:  rot-right 16s linear infinite; background-size: 108px 109px; }
.s2 .m-main .keys-box .keys:nth-child(11):before{animation:  rot-left 66s linear infinite; background-size: 108px 108px; }
.s2 .m-main .keys-box .keys:nth-child(12):before{animation:  rot-right 86s linear infinite; background-size: 108px 109px; }
.s2 .m-main .keys-box .keys:after{content: ""; display: block; background: url(../images/page2-key-bg-3.png) center center no-repeat; position: absolute; width: 100%; height: 100%; top: 0; background-size: 100% 100%;}
.s2 .m-main .keys-box .keys:nth-child(1):after{animation:  rot-left 80s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(2):after{animation:  rot-right 20s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(3):after{animation:  rot-left 16s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(4):after{animation:  rot-right 80s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(5):after{animation:  rot-left 10s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(6):after{animation:  rot-right 16s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(7):after{animation:  rot-left 70s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(8):after{animation:  rot-right 11s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(9):after{animation:  rot-left 22s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(10):after{animation:  rot-right 76s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(11):after{animation:  rot-left 10s linear infinite;}
.s2 .m-main .keys-box .keys:nth-child(12):after{animation:  rot-right 20s linear infinite;}


.s3{background: url(../images/page34-bg.jpg) center top no-repeat; background-size: 100% 100%; }
.s3 .m-main{width: 1280px; margin: auto auto; position: relative; box-sizing: border-box; zoom:0.8;}
.s3 .m-main .swiper-container3 {margin-top: 66px; overflow: hidden;}
.s3 .m-main .swiper-container3 .swiper-slide{width: 325px; height: 580px; overflow: hidden; border-radius: 10px; text-align: center;}
.s3 .m-main .swiper-container3 .swiper-slide>img{width: 240px; height: 580px; border-radius: 10px; transition: all 0.4s; display: block; margin: 0 auto;}
.s3 .m-main .swiper-container3 .swiper-slide .img-hover{width: 0px; background: url(../images/page3-item-bg.jpg) no-repeat; box-sizing: border-box; padding-top: 26px; text-align: center; transition: all 0.35s; overflow: hidden;}
.s3 .m-main .swiper-container3 .swiper-slide .img-hover img{width: 300px; height: 454px; border-radius: 10px;}
.s3 .m-main .swiper-container3 .swiper-slide .img-hover a.u-btn{display: inline-block; margin-top: 20px; background: url(../images/page3-more.png) no-repeat; width: 140px; height: 36px;}
.s3 .m-main .swiper-container3 .swiper-slide:hover>img{width: 0px;}
.s3 .m-main .swiper-container3 .swiper-slide:hover .img-hover{width: 100%;}
.s3 .m-main .swiper-container3 .swiper3-button-prev,.s3 .m-main .swiper-container3 .swiper3-button-next{position: absolute; top: 400px; width: 53px; height: 48px; transition: all 0.3s; cursor: pointer;}
.s3 .m-main .swiper-container3 .swiper3-button-prev{background: url(../images/prev.png); left: -60px;}
.s3 .m-main .swiper-container3 .swiper3-button-next{background: url(../images/next.png); right: -60px;}
.s3 .m-main .swiper-container3 .swiper3-button-prev:hover{background: url(../images/prev-hover.png);}
.s3 .m-main .swiper-container3 .swiper3-button-next:hover{background: url(../images/next-hover.png);}


.s4{background: url(../images/page34-bg.jpg) center top no-repeat; background-size: 100% 100%; }
.s4 .m-main{width: 1200px; margin: auto auto; position: relative; box-sizing: border-box; zoom:0.8;}
.s4 .m-main .swiper-container4 {margin: 32px auto 0; overflow: hidden; width: 1140px;}
.s4 .m-main .swiper-container4 .swiper-slide{width: 380px; height: 710px; background: url(../images/page4-item-bg.png) no-repeat; box-sizing: border-box; padding: 10px;}
.s4 .m-main .swiper-container4 .swiper-slide a img{width: 360px; height: 640px;}
.s4 .m-main .swiper-container4 .swiper-slide a .tit{font-size: 18px; color: #000000; text-align: center; margin-top: 14px;}
.s4 .m-main .swiper4-button-prev,.s4 .m-main .swiper4-button-next{position: absolute; top: 400px; width: 53px; height: 48px; transition: all 0.3s; cursor: pointer;}
.s4 .m-main .swiper4-button-prev{background: url(../images/prev.png); left: -60px;}
.s4 .m-main .swiper4-button-next{background: url(../images/next.png); right: -60px;}
.s4 .m-main .swiper4-button-prev:hover{background: url(../images/prev-hover.png);}
.s4 .m-main .swiper4-button-next:hover{background: url(../images/next-hover.png);}



@keyframes rot-left{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@keyframes rot-right{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(-360deg);}
}

@media only screen and (min-width: 600px) {/*PC端*/}
@media only screen and (max-width: 600px) {/*移动端*/}