@charset "utf-8";
/**
   @author liuxuetao
   @description product page
   @date 2018/08/28
 */
.product_banner{width: 1200px;margin: 0 auto 40px;height: 400px}
.banner__wrap{height: 100%;width: 500%;}
.banner__slider{height:400px;display: block;float: left;}
.banner__slider--picture{height: 100%;width: 100%;display: block;}
.product__pagination{position: absolute;bottom:20px;left: 50%;transform: translate(-50%,0);}
.product_banner--swiper{position: relative;height: 100%;overflow: hidden;}
.swiper-pagination-bullet{width: 10px;height: 10px;display:inline-block;border-radius: 100%;background: #fff;margin-right: 10px;}
.swiper-pagination-bullet:last-child{margin-right: 0;}
.swiper-pagination-bullet-active{background: #FF40B4;}
.swiper-button{display:none;width: 36px;height: 80px;position: absolute;top:50%;margin-top: -40px;z-index: 1;background:#ccc;cursor: pointer; background: url("../image/left-right.svg") no-repeat center center rgba(0,0,0,0.35);}
.swiper-button:hover{background-color:rgba(0,0,0,0.55); }
.swiper-button-prev{left:0;border-radius: 0 6px 6px 0;}
.swiper-button-next{right: 0;border-radius: 0 6px 6px 0;transform: rotate(180deg)}
.product_banner--swiper:hover .swiper-button{display: block;}
/*product common*/
.product__common{width: 280px;height: 320px;float: left;margin-right: 25px;margin-bottom: 26px;background: #fff;position: relative;border-radius: 2px;position: relative;transition: .2s}
.product__common:hover{box-shadow: 0 10px 25px 0 rgba(0,0,0,0.10);border-radius: 12px;}
.product__common--picture{width: 100%;height: 158px;border-radius: 12px 12px 0 0;}
.product__common--content{padding: 13px 15px;background: #fff;}
.product__common--product-name{font-size: 16px;margin-bottom:10px;color: #333333; letter-spacing: 0;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;
    display: -webkit-box;display: box;  -webkit-box-orient: vertical;box-orient: vertical;line-clamp:2;}
.product__common--intro{font-size: 14px;margin-bottom:10px;color: #666666; letter-spacing: 0;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;
    display: -webkit-box;display: box;  -webkit-box-orient: vertical;box-orient: vertical;line-clamp:1;}
.product__common--price-current{font-size: 18px; color: #E6018C;letter-spacing: 0;margin-bottom: 3px;position: relative}
i.unit{font-size: 14px; color: #666666;font-style: normal}
.product__common--price-old{font-size: 13px;color: #666666;letter-spacing: 0;text-decoration: line-through;}
.product__common--discount{display: inline-block;font-size: 12px;color: #FF6A00;letter-spacing: 0;background: #FFF7E6;border: 1px solid #FFE6A6;  border-radius: 12px;padding:2px 5px;}
.product__common--rent{opacity:0;transform:translate(0,10px);transition:.2s;border-radius: 12px;color: #fff;font-size: 14px;height: 24px;line-height: 24px;text-align: center;position: absolute;right:0px;top: 0px;padding: 0px 10px 0px 10px;width: 86px;}
.product__common--rent:hover{color: #fff;}
.product__common:hover .product__common--rent{opacity: 1;transform:translate(0,0);}
.product__common--more{display:block;width:87px;padding-top:74px;background: url("../image/product_more.png") no-repeat center top #fff;text-align: center;font-size: 16px;color: #333333;
position: absolute;top:50%;left:50%;height: 96px;margin: -48px 0 0 -43px;}
/*product recommend*/
.swiper-fix{width: 1200px;margin: 0 auto;position: relative;}
.product__recommend{background: #F0F0F0;}
.product__wrap--recommend{overflow: visible;}
.product__wrap--child{position: relative;overflow: hidden;}
.product__recommend--title{padding: 44px 0 16px;font-size: 28px;color: #332F3D;letter-spacing: 0;}
.product__promotions--more{margin-right: 0;}
.product__promotions--content{width: 500%;}
.product__promotions--content>div{margin-bottom: 0;border-radius: 12px;overflow: hidden}
.swiper-promotions-button{position: absolute;z-index:100;width: 36px;height: 36px;border-radius: 100%;top:50%;background: url("../image/left.png") no-repeat 40% 60% #fff;cursor: pointer;}
.swiper-promotions-button:hover{box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10)}
.swiper-promotions-prev{top: 60%;left:0;transform: translate(-50%,-50%);}
.swiper-promotions-next{top: 60%;right:0;transform: translate(50%,-50%);background: url("../image/right.png") no-repeat 50% 68% #fff;}
/*product popular*/
.product__popular--content{padding-bottom: 73px;width: 500%;}
.product__popular--item{width: 390px;float: left;margin-left:10px;position: relative;height: 236px;overflow: visible;}
.product__popular--item:hover{overflow: visible;z-index: 100}
.popular__item--picture{width: 100%;height: 225px;cursor: pointer;transition: all .2s;bottom:0;position: absolute;border-radius: 12px;}
.popular__item--picture:hover{border-radius: 12px 12px 0px 0px;}
.popular__item--product-name{position: absolute;bottom:0;left:0;padding:20px;width:100%;font-size: 22px;color: #FFFFFF; letter-spacing: 0;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.3)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
    border-radius: 0 0 12px 12px;
}
.popular__item--other{opacity: 0;width: 100%;height: 53px;line-height: 53px;padding: 0 15px 0 21px;background: #fff;position: absolute;bottom: -53px;left:0;box-shadow: 0 10px 25px 0 rgba(0,0,0,0.08);border-bottom-right-radius: 12px;border-bottom-left-radius: 12px}
.popular__item--price{float: left;}
.popular__item--rent{float: right;border-radius: 12px;height: 24px;line-height: 24px;text-align: center;font-size: 13px;color: #FFFFFF;letter-spacing: 0;display: block;margin-top: 15px;padding: 0px 10px 0px 10px;}
.popular__item--price-new{font-size: 18px;color: #FF40B4;letter-spacing: 0;margin-right: 9px;}
.popular__item--price-old{font-size: 13px;color: #666666;letter-spacing: 0;text-decoration: line-through;}
.product__popular--item:hover .popular__item--other{opacity: 1;}
.product__popular--item:hover .popular__item--picture{height: 236px;transform-origin: 0 100%;}
.product__popular--item:hover .popular__item--product-name{border-radius: 0 ;}
.product__popular--more{height: 226px;margin-top: 10px;background: #fff;}
.swiper-popular-prev{left:0;transform: translate(-50%,-10%);}
.swiper-popular-next{right:0;transform: translate(50%,-10%);background: url("../image/right.png") no-repeat 50% 68% #fff;}
/*wifi-packages*/
.wifi-packages{background: #fff;}
.wifi-packages__title{font-size: 28px;color: #332F3D;padding: 64px 32px 32px;text-align: center;background: url("../image/pic_line.png") repeat-x left 72px;}
.wifi-packages__title--text{position: relative;  z-index: 1;background: #fff;padding:0 25px;}
.wifi-packages__content{padding-left: 1px;}
.wifi-packages__item:nth-child(4n){margin-right: 0;}
.wifi-packages__item{margin-bottom: 26px;border: 1px solid #E6E6E6;border-radius: 12px;}
/*.wifi-packages__item:hover{border-color:#FF40B4;box-shadow:0 0 0 1px  #FF40B4;}*/
.wifi-packages__btn--more{border-radius:28px;font-size: 16px;color: #FFFFFF;width: 180px;height: 40px;line-height: 40px;text-align: left;display: block;margin: 0 auto 40px;background: url("../image/tab_dir2.svg") no-repeat 140px center #FF40B4;padding-left: 40px}

.slider__banner {
    height: 400px;
}
.slider__banner li {
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 5px;
    overflow: hidden;
}



.big_share_bg {
    width: 200px;
    /*height: 40px;*/
    position: absolute;
    /*background: url(../image/big_tag.png) no-repeat;*/
    background: url(../image/big_tag.png);
    top: 6px;
    right: 10px;
    z-index: 10;
    padding: 5px 5px 5px 12px;
    transition: all .2s;
    font-size: 13px;
    color: #FFFFFF;
    background-size: cover;
}

.big_share_bg span {
    font-weight: bold;
}
.big_share_bg i.unit{
    font-size: 12px;
    color: #fff;}
.product__popular--item:hover .big_share_bg {
    top: -5px;
}

.small_share_bg {
    width: 125px;
    height: 30px;
    position: absolute;
    background: url(../image/small_tag.png) no-repeat;
    top: -5px;
    right: 15px;
    z-index: 10;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 30px;
    text-align: center;
}

/*vip营销页样式*/
.vip-banner.my{
    width: 100%;
    height: 968px;
    margin: 0 auto;
    background: url(../image/vip/my_banner_bg_02.png) no-repeat center center;
    background-size: cover;
    position: relative;
}
.vip-banner{
    width: 100%;
    height: 968px;
    margin: 0 auto;
    background: url(../image/vip/banner_bg_02.png) no-repeat center center;
    background-size: cover;
    position: relative;
}
/*左边气球div*/
.vip-banner-left{
    width: 1280px;
    margin: 0 auto;
}
/*右边边气球div*/
.vip-banner-right{
    margin: 0 auto;
    width: 1100px;
    text-align: right;
}
/*红色按钮div*/
.vip-banner-div{
    width: 1000px;
    margin: 0 auto;
}
.vip-banner-btn{
    position: absolute;
    top: 530px;
    /*left: 305px;*/
    cursor: pointer;
}
/*中部内容*/
.vip-main{
    width: 100%;
    height: 597px;
    background: #C9BC99;
    margin-top: -4px;
}
.vip-main-white{
    width: 1200px;
    height:520px;
    background: #fff;
    margin: 0 auto;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 0px 0px rgba(84,57,17,0.63);
    border-radius:0px 0px 10px 10px;
}
.vip-main-ul{
    width: 100%;
    height: 350px;
    padding: 0 24px;
}
.vip-main-ul li{
    float: left;
    width: 243px;
    margin-left: 35px;
}
.vip-main-ul li div{
    text-align: left;
    padding: 19px 10px;
    font-size: 16px;
    font-family:PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(60,60,60,1);
    line-height: 28px;
}
.vip-main-btn{
    height: 170px;
    text-align: center;
    position: relative;
    padding-top: 20px;
}
.vip-main-btn button{
    width:291px;
    height:60px;
    background:linear-gradient(270deg,rgba(190,136,60,1) 0%,rgba(233,201,135,1) 51%,rgba(150,100,43,1) 100%);
    border-radius:4px;
    font-size:20px;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(81,48,34,1);
    line-height:28px;
    text-shadow:0px 1px 0px rgba(255,255,255,0.5);
    box-shadow: rgba(150,100,43,1) 0 5px 8px;
}
.vip-main-btn button:hover{
    background:linear-gradient(270deg,rgba(150,100,43,1) 0%,rgba(233,201,135,1) 51%,rgba(190,136,60,1) 100%);
}
.vip-main-btn img{
    display: inline-block;
    width:62px;
    height:48px;
    position: absolute;
}
/*下部内容*/
.vip-bottom{
    width: 100%;
    height: 699px;
    background: #FFFBEF;
    padding-top: 72px;
}
.vip-bottom-main{
    width: 1092px;
    height: 557px;
    margin: 0 auto;
    background: url(../image/vip/bg.png) no-repeat center center;
    position: relative;
}
.vip-bottom-biaoti img{
    position: absolute;
    top: -25px;
    left: -80px;
}
.vip-bottom-ul{
    width: 672px;
    height: 434px;
    position: absolute;
    bottom: 62px;
    right: 61px;
}
.vip-bottom-ul li{
    float: left;
    width: 240px;
    margin-left: 50px;
    margin-top: 55px;
}
.vip-bottom-ul li div{
    margin-top: 15px;
    font-size:16px;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(241,211,147,0.45);
    line-height:27px;
}
.vip-banner-balloon-left{
    position: absolute;
    /*left: 16%;*/
    top: 31%;
    animation: balloonUpdown 2.5s infinite alternate;
    -webkit-animation: balloonUpdown 2.5s infinite alternate;
}
.vip-banner-balloon-right{
    position: absolute;
    top: 25%;
    /*right: 14%;*/
    animation: balloonUpdown 3s infinite alternate;
    -webkit-animation: balloonUpdown 3s infinite alternate;
}
@keyframes balloonUpdown {
    from {
        margin-top: 0px;
    }
    to {
        margin-top: 30px;
    }
}     
@-webkit-keyframes balloonUpdown {
    from {
        margin-top: 0px;
    }
    to {
        margin-top: 40px;
    }
}
@keyframes scrollShow {
    from{
        transform: translate(0,100%);
        opacity: 0;
    }
    to{
        transform:translate(0,0);
        opacity:1;
    }
}
.clear_input{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 80px;
    top: 13px;
    background: url(../image/clear.png) no-repeat;
    background-size: contain;
    cursor: pointer;
}
.search__block:hover i{
    right: 79px;
    top: 12px;
}