
#ban{
    width: 100%;
    min-width: 1300px; 
    /* height: 760px;  */
    height: 660px; 
    position: relative;
}

#ban .carousel img{
    width: 100%; 
    /* height: 760px; */
    height: 660px;
}


#banProgress{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
}
.animationProgress {
    -webkit-animation:twinkling 5s infinite ease-in-out;
	animation:twinkling 5s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
@-webkit-keyframes twinkling {
	0% {
        width: 0;
    }
    80% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}
@keyframes twinkling {
	0% {
        width: 0;
    }
    80% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

#banSpinner{
    position: absolute;
    right: 3px;
    bottom: -2px;
    z-index: 3;
    width: 15px;
    height: 15px;
    -webkit-animation:spining 5s infinite ease-in-out;
	animation:spining 5s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
/* .animationSpin {
    -webkit-animation:spining 5s infinite ease-in-out;
	animation:spining 5s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
} */
@-webkit-keyframes spining {
	0% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes spining {
	0% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


#topArea{
    width: 295px;
    /* height: 554px; */
    min-height: 454px;
    max-height: 554px;
    /* background: #FFFFFF; */
    /* filter: blur(30px); */
    /* opacity: 0.8; */
    background-color: rgba(255,255,255,0.8);
    border-radius: 8px;
    padding-top:5px;
    padding-bottom: 10px;
}
.topAreaList{
    width: 100%;
    min-height: 83px;
    padding: 10px 20px 0 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1012);
    word-break:break-all;
}
/*.text{ width: auto}*/
.topAreaList h6{
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    color: #333333;
}
.topAreaListCon span{
    margin-right: 20px;
    font-size: 12px;
    line-height: 20px;
    color: #666;
    cursor: pointer;
}
.topAreaListCon span a{
    color:#666;
}
.topAreaListCon span a:hover{
    color:#0056b3;
}
.topAreaListCon span:last-child{margin-right: 0;}
.topAreaListCon span.areaOn{
    color: #008CD6;
}
#topAreaBut{
    /* margin: 46px auto 0; */
    margin: 30px auto 0;
    width: 240px;
    height: 40px;
    background: #008CD6;
    box-shadow: 0px 3px 6px rgba(4, 141, 213, 0.4);
    opacity: 1;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 4px;
    cursor: pointer;
}
#topAreaBut a{ color: #fff;}
.wrap #topAreaBut img{ width: 10px; height: 17px;}


.navImg{
    flex:1;
    height: 157px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    line-height: 26px;
    text-align: center;
    /*cursor: pointer;*/
}
.navImg:hover{
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 8px 8px;
}
.navImg img{
    width: 46px;
    width: 46px;
    margin-bottom: 10px;

}

.navCol {
    height: 176px;
    padding-top: 80px;
}
.navColL{
    font-size: 30px;
    color: #333333;
    line-height: 40px;
    display: flex;
}
.navColL img{
    width: 38px;
    height: 38px;
    margin-right: 8px;
}
.navColR{
    font-size: 16px;
    color: #666666;
    cursor: pointer;
}
.navColR a{ color:#666}
.navColR:hover,.navColR a:hover{ color: #008CD6;}
.navColR span{
    width: 5px;
    height: 8px;
    margin-left: 2px;
    background: url('../images/iconMoreGrey.png') no-repeat center center;
}
.navColR:hover span{background: url('../images/iconMoreBlue.png') no-repeat center center;}

/* 臻美空间 */
.zmkjTop{
    width: 590px;
    height: 250px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 20px;
}
.zmkjTop:hover{
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6);

}
.wrap .zmkjTopImg{
    width: 590px;
    height: 250px;
    border-radius: 8px;
    position: relative;
    display: block;
    
}

.zmkjTopImg img{
    border-radius: 8px;
}
/* .zmkjTopImg:hover img{
    width: 592px;
    height: 252px;
} */

.zmkjTopCon1{
    position: absolute;
    left: 20px;
    top: 31px;
    width: 144px;
    height: 48px;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    opacity: 1;
}
.zmkjTopCon2{
    position: absolute;
    left: 20px;
    top: 80px;
    width: 100px;
    height: 14px;
    font-size: 10px;
    font-family: Segoe UI;
    line-height: 28px;
    color: #FFFFFF;
    opacity: 1;

}
.zmkjTopCon3{
    position: absolute;
    left: 0;
    bottom: 24px;
    width: 144px;
    height: 16px;
    font-size: 12px;
    font-family: Segoe UI;
    font-weight: 400;
    line-height: 14px;
    color: #FFFFFF;
    display: flex;
}
.wrap .zmkjTopCon3 img{
    width: 15px;
    height: 15px;
    margin: 0 2px 0 20px;
}

/* 走进校园 */
.zjxy{
    width: 386px;
    height: 299px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 8px;
    
}
.wrap .zjxy img{
    width: 386px;
    height: 248px;
    border-radius: 8px 8px 0 0;
}
.zjxy span{
    display: block;
    width: 386px;
    height: 50px;
    font-size: 14px;
    color: #333333;
    padding: 0 0 0 20px;
    line-height: 50px;
}
/* 空间好物 */
.kjhwL{
    width: 822px;
}
.kjhwLTop{
    width: 822px;
    height: 284px;
    margin-bottom: 16px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
}
.kjhwLBot{
    width: 822px;
    height: 82px;
    /* box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); */
    /* border-radius: 8px; */
}
.kjhwText{
    width: auto;
    height: 82px;
    
    padding-top: 18px;
}
.kjhwText span:first-child{
    font-size: 18px;
    line-height: 24px;
    color: #00041A;
}
.kjhwText span{
    font-size: 14px;
    line-height: 19px;
    color: #666666;
    opacity: 1;
    
}
.ljhwList{
    width: 358px;
    height: 82px;
    display: flex;
}
.ljhwList a{ color:#666}
.ljhwList:hover,.ljhwList a:hover{ color: #008CD6;}
.ljhwList span{
    width: 82px;
    height: 82px;
    position: relative;
    display: block;
    margin-right: 10px;
}
.ljhwList span img{ border-radius: 8px;}
.ljhwList span:last-child{
    margin-right: 0;
}
.ljhwList span .ljhwListLast{
    width: 82px;
    height: 82px;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(255,255,255,0.6);
    font-size: 16px;
    color: #333333;
    text-align: center;
    line-height: 82px;
    border-radius: 8px;
    cursor: pointer;
}
.ljhwList span .ljhwListLast:hover{background: rgba(255,255,255,0.7);}
.kjhwR{
    width: 358px;
}
.kjhwRTop{
    width: 100%;
    height: 284px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 16px;
}
.kjhwR01{
    width: 358px;
    height: 188px;
}
.kjhwR01 img{
    width: 174px;
    height: 188px;
    display: block;
}

/* 最新活动/热点新闻 */
.hdxw{
    width: 590px;
    height: 569px;
}
.hdTop{
    width: 590px;
    height: 343px;
    border-radius: 4px;
}
.hdTop .swiper-slide img{ border-radius: 4px;}
.hdBot{
    width: 100%;
    height: 60px;
    padding-top: 30px;
    font-size: 16px;
    line-height: 22px;
    color: #666666;
    cursor: pointer;
    text-align: center;
}
.hdBot a{
    color: #666666;
}
.hdBot:hover,.hdBot a:hover{ color: #008CD6;}
.hdBot span{
    width: 5px;
    height: 8px;
    margin-left: 2px;
    background: url('../images/iconMoreGrey.png') no-repeat center center;
}
.hdBot:hover span{background: url('../images/iconMoreBlue.png') no-repeat center center;}
.xwTop{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.xw{
    width: 590px;
    height: 101px;
    padding: 18px 0 16px 0;
    border-radius: 8px;
}
.xw:hover{
    background: #008CD6;

}
.xw .xwL{
    width: 125px;
    height: 68px;
    font-size: 20px;
    font-family: Segoe UI;
    line-height: 28px;
    border-right:#E5E5E5 solid 1px;
    text-align: center;
}
.xw:hover .xmL{
    border-right:#fff solid 1px;
    color: #fff!important;
}
.xwL strong{
    font-size: 36px;
    font-family: Segoe UI;
    font-weight: bold;
    line-height: 40px;
    color: #333647;
}
.xwL span{
    color: #707070;
}
.xw:hover strong,.xw:hover span,.xw:hover .xwRText{color: #fff;}
.xwR{
    flex: 1;
    padding-left: 29px;
    font-size: 14px;
    line-height: 19px;
    
}
.xwRText{color: #7F818C;}
.xwRText p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 436px;
}
.xwR:hover{
    color: rgba(255,255,255,0.7);
}
.xwR span {
    font-size: 20px;
    font-weight: bold;
    line-height: 38px;
    margin-bottom: 3px;
    color: #333647;
    opacity: 1;
    display: block;
    width: 435px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* 外部链接 */
.wblj{
    width: 224px;
    height: 108px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    opacity: 1;
    border-radius: 8px;
    margin-bottom: 40px;
    cursor: pointer;
}
.wblj:hover{
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
    border:none;
    margin-top: -10px;
}
.wblj img{
    width: 202px;
    height: 54px;
}
.wblj:hover{
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);

}

/* 品牌馆特效 */
.swiper-container{
    width: 100%;
    height: 100%;
  }

  #ppgSwiper .swiper-slide {
    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;
  }
  
  #ppgSwiperWrap {
    width: 1200px;height: 254px; position: absolute; left: 0; top: 0;
  }
  #ppgSwiperWrap .swiper-button-prev,
#ppgSwiperWrap .swiper-button-next {
/* font-size: 26px!important; */
width: 14px;
height: 28px;

}
/* #ppgSwiperWrap  .swiper-button-prev.swiper-button-white,
  #ppgSwiperWrap .swiper-button-next.swiper-button-white {
--swiper-navigation-color: rgba(0,0,0,0.5)!important;
z-index: inherit;
} */
  #ppgSwiperWrap .swiper-button-next{ right: -30px!important;background-image: url(../images/iconHomeSwiperR.png); background-size: 100% 100%;}
  #ppgSwiperWrap .swiper-button-prev{ left: -30px!important;background-image: url(../images/iconHomeSwiperL.png); background-size: 100% 100%;}

/* 最新活动特效 */
/* .swiper-container {
    width: 100%;
    height: 100%;
  } */

  #zxhdSwiper .swiper-slide {
    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;
  }
  #zxhdSwiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #fff;
    opacity: 0.5;
  }
  #zxhdSwiper .swiper-pagination-bullet-active {
    opacity: 1;}