body{overflow: hidden;}
.box{border-radius:50%;transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);position: absolute;left: 55%;top: 23%;}
#swiper-container1{float: left;}
.swiper-slide{transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(45deg) rotateZ(0deg)}
.swiper-pagination-bullet{ width: 20px;height: 6px;border-radius:0;background-color: white;opacity: 1;z-index: 15;}
.swiper-pagination-bullet-active{ background-color: orangered;}
.swiper-slide img{background-size: 100% 100%;height:100%;width:100%;}
.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:0%;height:0%;pointer-events:none;z-index:10}
.swiper-container-cube{ overflow: hidden;}
#mian{height:100%;background: url("../images/cwh/ciwen-bg-01.jpg") no-repeat center;background-size: 100% 100%;overflow: hidden;}


.title{width:100%;height: 100%;}
.title .nianCycle{width: 45%;float: left;margin-top: 7%;margin-left: 12%;}
.title .juxing{width: 17%;float: left;margin-top: 11%;margin-left: -33%;}
.title .word{width: 31%;margin-left: 11%;  }
.title .nianCycle img{width: 20%;}
.title .juxing img{width:100%;}
.title .word img{width: 100%;margin-top:3%;}
/*#mian .songWord{overflow: hidden;width: 100%;}
#mian .songWord img {width: 100%;position: absolute;left: -4%;top: 0%;}*/

/*#mian img{width:100%;height:100%;}*/
#HisBg{position: absolute;height:57px; width: 100%;min-width: 1366px;bottom:0px;z-index:100;padding-top:83px;}
#HisBg .bgBai{height:16px;width:100%;}
#HisBg .bgOrg{height:16px;width:0%;overflow: hidden;margin-top:-16px;}
#HisBg .bgBai img{width:100%;height:100%;border:0;}
#HisBg .bgOrg img{width:100%;height:100%;border:0;}
#HisYears{position:absolute;height:140px; width:100%;min-width: 1366px;bottom:0px;z-index:102;}
#HisYears ul{width:100%;height:100%;padding:0;margin:0;}
#HisYears ul li{margin-left:6%; float:left;height:100%;width:100px;margin-right:0;padding:0;}
#HisYears ul li:first-child{margin-left:11%;}
#HisYears ul li img{width:100%;height:100%;display: block;}

#back{position:fixed;bottom: 8%;right:1%;border-radius: 50%;overflow: hidden;width: 65px;z-index:1000}
#back img{width: 100%}

.detailpicWord-1{width: 35%;height: 36%;position: absolute;top:100%;left: 11% ;}
.detailpicWord-1 .dpw_w{width: 100%;height: 100%;overflow: hidden;}
.detailpicWord-1 .dpw_w img{width: 100%;}

.detailpicWord-2{width: 35%;height: 36%;position: absolute;top:100%;left: 11% ;}
.detailpicWord-2 .dpw_w{width: 100%;height: 100%;overflow: hidden;}
.detailpicWord-2 .dpw_w img{width: 100%;}

.detailpicWord-3{width: 35%;height: 36%;position: absolute;top:100%;left: 11% ;}
.detailpicWord-3 .dpw_w{width: 100%;height: 100%;overflow: hidden;}
.detailpicWord-3 .dpw_w img{width: 100%;}

.detailpicWord-4{width: 35%;height: 36%;position: absolute;top:100%;left: 11% ;}
.detailpicWord-4 .dpw_w{width: 100%;height: 100%;overflow: hidden;}
.detailpicWord-4 .dpw_w img{width: 100%;}


@media screen  and (max-width:1023px){
    body{overflow-y: hidden;}/**消除火狐滚动条*!*/
    #HisBg .bgBai img{width:100%;height:50%;border:0;}
    #HisBg .bgOrg img{width:100%;height:50%;border:0;}
    #HisBg{position: absolute;height:57px; width: 100%;min-width: 1024px;bottom:0px;z-index:100;padding-top:83px;}
    #HisYears{position:absolute;height:140px; width:100%;min-width: 1024px;bottom:-41px;z-index:102;}
    #HisYears ul li{margin-left:1%; float:left;height:100%;width:100px;margin-right:0;padding:0;}
    #HisYears ul li:first-child{margin-left:11%;}
    #HisYears ul li img{width:50%;height:50%;display: block;}
    #back{position:fixed;bottom: 10%;right:1%;border-radius: 50%;overflow: hidden;width: 45px;z-index:1000}
    .title{width:100%;height: 100%;}
    .title .nianCycle{width: 45%;float: left;margin-top: 8%;margin-left: 12%;}
    .title .juxing{width: 17%;float: left;margin-top: 13%;margin-left: -33%;}
    .title .word{width: 31%;margin-left: 11%;  }
    .title .nianCycle img{width: 20%;}
    .title .juxing img{width:100%;}
    .title .word img{width: 100%;margin-top:3%;}
}
@media screen and (min-width:1024px) and (max-width:1330px){
    body{overflow-y: hidden;}/**消除火狐滚动条*!*/
    #HisBg .bgBai img{width:100%;height:50%;border:0;}
    #HisBg .bgOrg img{width:100%;height:50%;border:0;}
    #HisBg{position: absolute;height:57px; width: 100%;min-width: 1024px;bottom:0px;z-index:100;padding-top:83px;}
    #HisYears{position:absolute;height:140px; width:100%;min-width: 1024px;bottom:-41px;z-index:102;}
    #HisYears ul li{margin-left:1%; float:left;height:100%;width:100px;margin-right:0;padding:0;}
    #HisYears ul li:first-child{margin-left:11%;}
    #HisYears ul li img{width:50%;height:50%;display: block;}
    #back{position:fixed;bottom: 10%;right:1%;border-radius: 50%;overflow: hidden;width: 45px;z-index:1000}
    .title{width:100%;height: 100%;}
    .title .nianCycle{width: 45%;float: left;margin-top: 9%;margin-left: 12%;}
    .title .juxing{width: 17%;float: left;margin-top: 13%;margin-left: -33%;}
    .title .word{width: 31%;margin-left: 11%;  }
    .title .nianCycle img{width: 20%;}
    .title .juxing img{width:100%;}
    .title .word img{width: 100%;margin-top:12%;}
}
@media screen and (min-width:1331px) and (max-width:1399px){
    body{overflow-y: hidden;}/**消除火狐滚动条*!*/
    .box{border-radius:50%;transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);position: absolute;left: 55%;top: 20%;}
    #HisBg .bgBai img{width:100%;height:80%;border:0;}
    #HisBg .bgOrg img{width:100%;height:80%;border:0;}
    #HisBg{position: absolute;height:57px; width: 100%;min-width: 1331px;bottom:0px;z-index:100;padding-top:83px;}
    #HisYears{position:absolute;height:140px; width:100%;min-width: 1331px;bottom:-17px;z-index:102;}
    #HisYears ul li{margin-left:3%; float:left;height:100%;width:100px;margin-right:0;padding:0;}
    #HisYears ul li:first-child{margin-left:11%;}
    #HisYears ul li img{width:80%;height:80%;display: block;}
    #back{position:fixed;bottom: 12%;right:1%;border-radius: 50%;overflow: hidden;width: 55px;z-index:1000}
    .title{width:100%;height: 100%;}
    .title .nianCycle{width: 45%;float: left;margin-top: 7%;margin-left: 12%;}
    .title .juxing{width: 17%;float: left;margin-top: 11%;margin-left: -33%;}
    .title .word{width: 31%;margin-left: 11%;  }
    .title .nianCycle img{width: 20%;}
    .title .juxing img{width:100%;}
    .title .word img{width: 100%;margin-top:3%;}
}
@media screen and (min-width:1400px) and (max-width:1580px){
    #HisYears ul li{margin-left:4.6%;}
    .title .word img {margin-top: 8%;}
    .title .nianCycle {margin-top: 9%;}
    .title .juxing {margin-top: 13%;}
}
@media screen and (min-width:1581px) and (max-width:1800px){

    #HisYears ul li{margin-left:5.2%;}
}

/*@media screen  and (max-width:1025px){
    body{overflow: hidden;}
    #HisBg .bgBai img{width:100%;height:50%;border:0;}
    #HisBg .bgOrg img{width:100%;height:50%;border:0;}
    #HisYears{position:absolute;height:140px; width:100%;min-width: 1366px;bottom:-41px;z-index:102;}
    #HisYears ul li{margin-left:1%; float:left;height:100%;width:100px;margin-right:0;padding:0;}
    #HisYears ul li:first-child{margin-left:11%;}
    #HisYears ul li img{width:50%;height:50%;display: block;}
    #back{position:fixed;bottom: 15%;right:1%;border-radius: 50%;overflow: hidden;width: 45px;z-index:1000}
        .title{width:100%;height: 100%;}
        .title .nianCycle{width: 45%;float: left;margin-top: 13%;margin-left: 12%;}
        .title .juxing{width: 17%;float: left;margin-top: 17%;margin-left: -33%;}
        .title .word{width: 31%;margin-left: 11%;  }
        .title .nianCycle img{width: 20%;}
        .title .juxing img{width:100%;}
        .title .word img{width: 100%;margin-top:3%;}
}

@media screen and (max-width:1399px){
    #HisYears ul li{margin-left:2%;}

    body{overflow: hidden;}
    #HisBg .bgBai img{width:100%;height:90%;border:0;}
    #HisBg .bgOrg img{width:100%;height:90%;border:0;}
    #HisYears{position:absolute;height:140px; width:100%;min-width: 1366px;bottom:-8px;z-index:102;}
    #HisYears ul li{margin-left:3%; float:left;height:100%;width:100px;margin-right:0;padding:0;}
    #HisYears ul li:first-child{margin-left:11%;}
    #HisYears ul li img{width:90%;height:90%;display: block;}
    #back{position:fixed;bottom: 15%;right:1%;border-radius: 50%;overflow: hidden;width: 55px;z-index:1000}
    .title{width:100%;height: 100%;}
    .title .nianCycle{width: 45%;float: left;margin-top: 7%;margin-left: 12%;}
    .title .juxing{width: 17%;float: left;margin-top: 11%;margin-left: -33%;}
    .title .word{width: 31%;margin-left: 11%;  }
    .title .nianCycle img{width: 20%;}
    .title .juxing img{width:100%;}
    .title .word img{width: 100%;margin-top:3%;}
}
@media screen and (min-width:1400px) and (max-width:1580px){
    #HisYears ul li{margin-left:4.6%;}
}
@media screen and (min-width:1581px) and (max-width:1800px){
    #HisYears ul li{margin-left:5.2%;}
}*/