.indexbanner{ height: auto; position: relative;}
.indexbanner img{ max-width: 100%; display: block; margin:0 auto;}





.indexTitle{ height: auto;  text-align: center;position: relative; }
.indexTitle .titlehtp{ font-size: 35px; color: #313131; font-weight: bold;    margin-bottom: 5px;}
.indexTitle .titlehtp .left{ position: relative; top:-16px; margin-right: 10px;}
.indexTitle .titlehtp .right{ position: relative; top:16px; margin-left: 10px;}
.indexTitle p{ font-size: 14px; color: #959595; text-align: center;}




.whyTg{ height: auto; overflow: hidden; background: url(../images/whyBg.jpg) no-repeat top center;  padding:82px 0px; background-size: 100% 100%; }
.maindate .containerr,.whyTg .containerr{ max-width: 1500px;}



.whyUl{ margin-top: 3%;margin-left: -8%;
    margin-right: 3%;}

.whyUl li{ float: left; width: 12%;  position: relative;height: 585px;transition: all .5s; }

.whyUl li .img{
     width: 140%;height: 100vh;
    position: absolute;
    top: 0;
overflow: hidden;
    
 -webkit-transform: skewX(-18deg);
    -ms-transform: skewX(-18deg);
    transform: skewX(-18deg);
    transition: all .5s;
}


.skw-page__content1{
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
  
    width: 100%;
    height: 492px;
   
    
    -webkit-transition: -webkit-transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s;
    /*background: url(../images/whyimg1.jpg) no-repeat;*/ position: relative;
 
}


.skw-page__content1 .gray{ height: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    background: rgba(0,0,0,0.75);}

.skw-page__content1 .gray p{     position: absolute;
    top: 20px;
    left:10px;
    width: 100%;
    font-size: 20px;
    color: #ffffff;
-webkit-transform: skewX(18deg);
    -ms-transform: skewX(18deg);
    transform: skewX(18deg);


}




.whyUl li .img img{
    height: auto; display: block; max-width: 100%;
}


.whyUl li:first-child .skw-page__content1{-webkit-transform: skewX(18deg);
    -ms-transform: skewX(18deg);
    transform: skewX(18deg);}




.whyUl li.cur{ width: 50%;}
/*ul li.cur .skw-page__content1{-webkit-transform: skewX(18deg);
    -ms-transform: skewX(18deg);
    transform: skewX(18deg);}*/
.whyUl li:last-child .img{-webkit-transform: skewX(-17deg);
 -ms-transform: skewX(-17deg);
 transform: skewX(-17deg);}
.whyUl li:last-child .skw-page__content1{-webkit-transform: skewX(6deg);
 -ms-transform: skewX(6deg);
   transform: skewX(6deg);transform-origin: 0 100%;}


.whyUl li.cur .skw-page__content1 .gray{background: rgba(0,0,0,0); }


.whyUl li:first-child .skw-page__content1 .gray p{-webkit-transform: skewX(-1deg);
    -ms-transform: skewX(-1deg);
    transform: skewX(-1deg);}

 .whyUl li:last-child .skw-page__content1 .gray p{-webkit-transform: skewX(-1deg);
     -ms-transform: skewX(-1deg);
     transform: skewX(-1deg);}


.whyUls{ height: auto; overflow: hidden;    margin-top: 55px;}
.whyUls li{ float: left; width: 16%;}
.whyUls li:first-child{ width: 32%;}
.whyUls li a{ display: block; height: auto; overflow: hidden; position: relative;}
.whyUls li a img{ display: block; max-width: 100%; height: 520px; overflow: hidden;    transition: all 5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s; }

.whyUls li .gray{
      height: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    background: rgba(0,0,0,0.75);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    
}
.whyUls li .gray p{
  position: absolute;
    bottom:10px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #ffffff; font-weight: bold;
}


.whyUls li:first-child .gray p{ font-size: 44px;top: 63%;
    bottom: 0px;}


.whyUls li:first-child .gray{ background: rgba(0,0,0,0);}
.whyUls li:first-child .gray p{ color: #ff9f00;}
.whyUls li:hover .gray{background: rgba(0,0,0,0);}
.whyUls li:hover .gray p{color: #ff9f00; }

.whyUls li:hover a img{     transform: scale(1.2);
    -webkit-transform: scale(1.2);
    overflow: hidden;}

.whyUls li:hover:first-child a img{transform: inherit;
    -webkit-transform: inherit;}





.whyMoble{display: none;}



.maindate{ height: auto; overflow: hidden; background: url(../images/maindateBg.jpg) no-repeat top center;  padding:2% 30px;}
.maindate .containerr{ max-width: 1500px;}
.maindate .indexTitle .titlehtp,.maindate .indexTitle p{ color: #ffffff;}
.maindate .dataUl{ height: auto; overflow: hidden; margin:4% 0px;}
.maindate .dataUl li{ float: left; width: 13%; margin-right: 1.5%; border:1px solid #fff; text-align: center; color: #fff; padding:3% 0px;}
.maindate .dataUl li .counter{ font-size: 36px; margin-bottom: 10px;}
.maindate .dataUl li .datap{ font-size:15px; height: 42px; overflow-y: hidden;}
.maindate .dataUl li:last-child{ margin-right: 0px;}
.maindate .more{ text-align: center;}
.maindate .more a{ color: #fff; font-size:15px;}










.museumThree{ height: auto;  padding:2% 0px 3%; position: relative; display: none;}

 .museumThree .swiper-slide {
       position: relative;
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    transition: 300ms;
    transform: scale(0.8);
    }
  .museumThree .swiper-slide-active,.museumThree .swiper-slide-duplicate-active{transform: scale(1.2);background: #fff;}
  .museumThree img.img{ display: block; max-width: 100%;height: 100%; background: #fff; padding:2px; border-radius: 2px;box-shadow: 0 0 16px 0 rgba(54, 58, 80, 0.16); }

.museumThree .swiperloop3{ margin-top: 3%;}

.museumThree .swiperloop3 .content{  text-align: center; position: absolute; bottom:0px; left:0px; width: 100%; top:0px; height: 100%; background: rgba(255,255,255,0.5);}
.museumThree .swiperloop3 .swiper-container{ height: 280px;}

.museumThree .swiperloop3 .content a{ display: block; width: 100%; height: 100%; }
.museumThree .swiper-slide-active .content{background:transparent; }

.museumThree .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ right: -10px;}
.museumThree .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ left:-10px;}




@media screen and (min-width: 1200px) and (max-width: 1500px){
  .maindate .dataUl li .counter{ font-size: 22px;}
.maindate .dataUl li .datap{ font-size: 14px;}
}


@media screen and (min-width: 769px) and (max-width: 1199px){
img{ max-width: 100%;}
.maindate .dataUl li .counter{ font-size: 18px;}
.maindate .dataUl li .datap{ font-size: 13px;}

}

@media screen and (min-width: 992px) and (max-width: 1199px){

}
@media screen and (min-width: 769px) and (max-width: 992px){



}


@media screen and (max-width: 768px) {
.whyUls{ margin-top: 7px;}
.whyUls li a img{ height:auto;}
.whyTg{ padding: 5% 0px;}
.whyMoble{ display: block;}

.whyTg .containerr{ padding:0px;}

.indexTitle .titlehtp{ font-size: 20px;}
.whyMoble .swiperloop2{ margin-top: 5%;}

.maindate{ padding:2% 0px;}
.maindate .dataUl li .counter,.maindate .more a{ font-size: 15px;}
.maindate .dataUl li .datap{ font-size: 12px; height: 34px;}
.maindate .dataUl li{ margin-right: 1.5%;}

}


@media screen and (max-width: 414px) {
.indexTitle .titlehtp{ font-size: 16px;}
.indexTitle p{ font-size: 12px;}

.maindate .dataUl li{ width: 24%; margin-bottom: 2%; margin-right: 1%;}
.maindate .dataUl li:nth-child(4n){ margin-right: 0px;}

.museumThree{    padding: 6% 0px 3%;}


.whyUls li .gray p{     word-break: break-all;
    height: 30px; font-size: 12px; bottom: 0px;}


}