@import url("http://www.jiaodong.net/inc/millia/millia.css");
@import url("Swiper7.0.8.css");
html,body{position:relative;height:100%;font-family:"SimSun";}
#vod{width:100%;overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;z-index:9;/* animation:fadeOut 0.5s linear;animation-delay:11s;animation-fill-mode:forwards; */}
#vod video{width:100%;}
#vod .vodClose{background:url(../images/start.png) no-repeat left top;background-size:100% 100%;color:#fff;border-radius:10px;width:200px;height:57px;left:50%;bottom:3%;margin-left:-100px;font-family:"Microsoft Yahei";z-index:999;position:absolute;}
.loading{position:absolute;z-index:12;display:flex;justify-content:center;align-items:center;width:100%;height:100%;left:0;top:0;}
.loading svg{animation:nowLoading 2s linear infinite;}
/*音乐*/
.audioBg{position:fixed;top:2%;left:2%;z-index:8;animation:nowLoading 2s linear infinite;}
.audioBg audio{display:none;}
.audioBg svg{width:40px;height:40px;}
/*长卷内容*/
.mySwiper .swiper-wrapper{transition-timing-function:linear;}
.myScroll{width:100%;height:100%;}
.myScroll .swiper-slide{width:auto;position:relative;background:#f1ece9;}
.myScroll .swiper-slide:after{content:"";display:block;background:url(../images/cloud.png) left top;position:absolute;width:100%;height:255px;left:0;top:15%;animation: scrollCloud 40s linear infinite;}

.myScroll .swiper-slide img.pageBg{width:100%;height:100%;}
/*ht左侧标题 info 场馆介绍  build 灰色建筑  color 彩色建筑  special 遮挡装饰 checkBt 点击提示文字  event 场馆对应事件  sort 介绍视频vr分类*/
.text,.ht,.info,.build,.color,.special,.specialRight,.checkBt,.event,.sort,.peopleKey,.keyBt{position:absolute;z-index:1}
.sort{z-index:3;}
.text{height:32%;width:auto;left:32%;top:30%;/* animation:zoomIn 1.5s linear; */opacity:0;animation-fill-mode:forwards;}
canvas{display:block;width:100%;height:100%;top:0;left:0;position:absolute;z-index:2;}
.build img,.event img,.color img,.peopleKey img{width:100%;height:auto;}
/*标题*/
.ht{top:-1000px;transition:all 0.5s;transition-delay:0.5s;height:38%;}
.ht img{width:auto;height:100%;}
/*引言文字*/


/*按钮*/
.checkBt{color:#c13936;bottom:5%;cursor:pointer;z-index:8;opacity:0;transition:all 1s;font-weight:bold;width:220px;}
.checkBt:after{content:"\70b9\51fb\56fe\7247\8fdb\884c\70b9\4eae";font-size:26px;text-shadow:1px 1px 1px #fff;font-family:Arial, Helvetica, sans-serif}
/* .checkBt:after{content:"";display:block;right:-30px;border:10px solid transparent;border-bottom-color:#fff;width:0;height:0;position:absolute;top:-2px;} */
.checkBt01{left:20%;}
.checkBt02{left:20%;}
.checkBt03{left:22%;}
.checkBt04{left:22%;}
.checkBt05{left:27%;}
.checkBt06{left:24%;}
.checkBt08{left:25%;}
.checkBt09{left:32%;}
.checkBt10{left:26%;}
.checkBt11{left:32%;}
.checkBt12{left:32%;}
.checkBt13{left:25%;}
.checkBt14{left:25%;}
.endBt{background:url(../images/end.png) no-repeat left top;background-size:100% 100%;position:absolute;right:2%;top:47%;width:150px;height:100px;animation:sizeChange 0.8s linear infinite;}
.endBt a{display:block;height:100%;}

/*介绍信息*/
.info{transform:scale(0,0);transition:all 0.5s;transition-delay:1s;font-size:22px;line-height:48px;width:56%;font-family:"SimSun";font-weight:bold;left:150px;top:9%;}
.info02{top:13%;}
.info03{top:14%;}
.info04{top:20%;}
.info07{font-size:20px;line-height:38px;width:26%;top:29%;left:43%;z-index:9;}
.info07 h6{color:#c13936;font-weight:bold;font-size:22px;}
.info07 h6 span{display:block;}
.info09,.info10,.info11,.info12{width:82%;}
.info13{width:74%;}
/*建筑*/
.build{bottom:0;left:0;z-index:1;transition:all 0.8s;opacity:0;z-index:6;}

/*彩色建筑*/
.color{bottom:0;left:0;opacity:0;transition:all 0.8s;z-index:5;}

/*事件*/
.event{top:0;right:0;opacity:0;transition:all 0.5s;transition-delay:0.5s;z-index:4;}

/*建筑/彩色建筑/事件图片比例__按宽度*/
.build01,.color01{width:70%;left:5%;}
.event01{width:62%;}
.build02,.color02{width:39%;left:8%;}
.event02{width:62%;}
.build03,.color03{width:52%;}
.event03{width:52%;right:2%;}
.build04,.color04{width:48%;left:5%;}
.event04{width:62%;}
.build05,.color05{width:54%;left:5%;}
.event05{width:78%;}
.build06,.color06{width:72%;}
.event06{width:66%;right:5%;}
.build08,.color08{width:56%;}
.event08_01{width:52%;right:12%;}
.event08_02{width:48%;top:auto;bottom:0;right:0;transition-delay:1s;}
.build09,.color09{width:86%;}
.event09{width:63%;right:0;top:15%;}
.build10,.color10{width:50%;left:10%;}
.event10{width:66%;right:5%;}
.build11,.color11{width:86%;}
.event11{width:42%;right:5%;top:12%;}
.build12,.color12{width:82%;}
.event12{width:32%;right:8%;top:3%;}
.build13,.color13{width:86%;}
.event13{width:64%;right:0;top:8%}
.build14,.color14{width:58%;left:5%;}
.event14{width:41%;left:45%;top:5%;right:auto;}

/*介绍视频vr分类*/
.sort{opacity:0;transition:all 1s;transition-delay:2.5s;padding:0 180px 50px 270px;height:240px;font-family:"Microsoft Yahei";z-index:9;font-weight:bold;}
.sort:before,.sort:after{content:"";display:block;position:absolute;}
.sort:before{left:269px;bottom:0;width:2px;height:249px;background:#000;margin-left:-1px;}
.sort:after{background:url(../images/icon01.png) no-repeat center bottom;width:37px;height:37px;left:272px;bottom:0;z-index:1;margin-left:-22px;}
.sort li{display:flex;align-items:center;position:absolute;text-shadow:-1px -1px 0 #fff;}
.sort li a{display:flex;align-items:center;z-index:9;}
.sort li a:hover{text-decoration:none;}
.sort li:before{content:"";display:block;position:absolute;top:50%;width:50px;height:2px;background:#000;left:0;}
.sort li:nth-child(1){animation-delay:0.5s;top:0;left:270px;top:0;padding-left:60px;}
.sort li:nth-child(2){animation-delay:1s;top:65px;left:0;}
.sort li:nth-child(2):before{left:220px;}
.sort li:nth-child(2):after{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(../images/play.png) no-repeat 55px center;}
.sort li:nth-child(3){animation-delay:1.5s;background:url(../images/icon02.png) no-repeat right center;left:270px;top:110px;height:50px;padding:0 90px 0 60px;}
.sort li:nth-child(3) a{display:block;position:absolute;left:60px;top:0;width:100%;height:100%;padding-top:10px;box-sizing:border-box;}
.sort li img{box-shadow:0 0 5px #000;border:1px solid #fff;}
.sort li:nth-child(1) img{width:110px;height:80px;}
.sort li:nth-child(2) img{width:150px;height:95px;margin-right:20px;}
.sort li i{font-style:normal;margin-right:20px;font-size:18px;line-height:26px;}

.sort01{top:25%;left:16%;}
.sort02{top:7%;left:13%;}
.sort03{top:6%;left:16%;}
.sort04{top:12%;left:11%;}
.sort05{top:11%;left:19%;}
.sort06{top:5%;left:17%;}
.sort08{top:6%;left:18%;}
.sort09{top:5%;left:21%;}
.sort10{top:5%;left:18%;}
.sort11{top:8%;left:22%;}
.sort12{top:11%;left:17%;}
.sort13{top:4%;left:7%;}
.sort14{top:11%;left:18%;}


/*特殊遮挡独有效果*/
.special,.peopleKey{left:0;bottom:0;z-index:7;}
.special img{width:100%;height:100%;}
.specialRight{right:0;bottom:0;}
.peopleKey{left:8%;transform:scale(0,0);transition:all 0.5s;transition-delay:0.5s;width:26%;z-index:4;}
.special01{left:auto;right:0;height:40%;}
.keyBt{animation:sizeChange 0.8s linear infinite;bottom:10%;left:18%;z-index:9;opacity:0;transition:all 0.5s;transition-delay:3s;}

.infoContent{position:fixed;z-index:9;background:rgba(0,0,0,0.8);left:0;top:0;width:100%;height:100%;padding:50px 50px 80px 50px;box-sizing:border-box;color:#fff;overflow-y:auto;transform:scale(0,0);transition:all 0.5s;} 
.infoContent h2{font-size:32px;text-align:center;font-weight:bold;}
.infoContent_text{font-size:18px;line-height:36px;width:96%;margin:40px auto;}
.infoContent_text p{padding-bottom:20px;text-indent:40px;}
.infoContent_text a{color:#fff;}
.infoContent_img{padding-bottom:50px;}
.infoContent_img img{max-width:100%;height:auto;display:block;margin:0 auto;}
.infoContent_close{background:url(../images/close.png) no-repeat left top;position:absolute;right:2%;top:2%;background-size:100% 100%;width:50px;height:50px;cursor:pointer;}
.vodContent{width:960px;height:auto;margin:40px auto;overflow:hidden;}
.vodContent video {width:100% !important;height:auto !important;}

/*山东革命根据地*/
.sdContent{position:absolute;z-index:2;top:2%;right:0;bottom:3%;width:86%;}
.sd_build,.sd_color{z-index:5;}
.sdLine,.sd_build,.sd_color{position:absolute;opacity:0;transition:all 0.5s;}
.sd_build{transform:scale(0,0);}
.sd_color:after{content:"\70b9\51fb\67e5\770b\8be6\60c5";color:#ba3e3d;text-shadow:0 1px 2px #fff;font-size:18px;font-weight:bold;position:absolute;left:0;bottom:0;width:100%;text-align:center;transition:all 0.5s;transition-delay:0.5s;font-family:"Microsoft Yahei";}
.sdLine img,.sd_build img,.sd_color img{width:auto;height:100%;}
.line01{height:39%;left:11%;bottom:28%;}
.sd_build01,.sd_color01{left:0;height:24%;top:9%;}
.sd_build01{transition-delay:1.5s;}

.line02{left:18%;top:5%;height:23%;}
.sd_build02,.sd_color02{top:0%;left:32%;height:25%;}
.sd_build02{transition-delay:1.8s;}

.line03{top:5%;left:54%;height:16%;}
.sd_build03,.sd_color03{right:0;top:11%;height:29%;}
.sd_build03{transition-delay:2.1s;}

.line04{right:12%;top:35%;height:15%;}
.sd_build04,.sd_color04{right:7%;top:44%;height:23%;}
.sd_build04{transition-delay:2.4s;}

.line05{bottom:25%;left:55%;height:15%;}
.sd_build05,.sd_color05{bottom:0;left:35%;height:28%;}
.sd_build05{transition-delay:2.7s;}


/*当前激活swiper-slide-active*/
/*page01激活对话*/
/* .swiper-slide-active .text{opacity:1;transition-delay:0.5s;} */
.swiper-slide-active .info,.swiper-slide-active .peopleKey,.swiper-slide-active .sd_build{transform:scale(1,1);}
.swiper-slide-active .ht{top:8%;}
.swiper-slide-active .build,.swiper-slide-active .checkBt,.swiper-slide-active .keyBt,.swiper-slide-active .sd_build{opacity:1;}




/*动画效果*/
.animated{animation-duration:0.5s;animation-fill-mode:both;}
.fadeIn{animation-name:fadeIn}
.fadeOut{animation-name:fadeOut}
.zoomInUp{animation-name:zoomInUp}
.zoomOut{animation-name:zoomOut}
.zoomIn{animation-name:zoomIn}
.slideInDown{animation-name:slideInDown}
@keyframes zoomInUp {
0%{opacity:0;transform:scale(.1) translateY(2000px);animation-timing-function:ease-in-out}
60%{opacity:1;transform:scale(.475) translateY(-60px);animation-timing-function:ease-out}
}
@keyframes fadeIn {
0%{opacity:0}
100% {opacity:1}
}
@keyframes fadeOut {
0%{opacity:1;}
100%{opacity:0;}
}
@keyframes zoomOut {
0%{opacity:1;transform:scale(1)}
50%{opacity:0;transform:scale(0)}
100%{opacity:0}
}
@keyframes zoomIn {
0%{opacity:0;transform:scale(0)}
100%{opacity:1}
}
@keyframes slideInDown {
0%{opacity:0;transform:translateY(-2000px)}
100%{opacity:1;transform:translateY(0)}
}
@keyframes scrollCloud {
0%{background-position: left center;}
100%{background-position:-100% center;}
}
@keyframes sizeChange{
0%{transform:scale(0.8,0.8);opacity:0;}
100%{transform:scale(1,1);opacity:1;}
}
@keyframes nowLoading{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}









@media screen and (max-width:640px){




}