@charset "utf-8";
/* banner */
.page-banner{position: relative; overflow: hidden;}
.page-banner picture img{width: 100%;}
.page-banner-info{position: absolute; top: 0;left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff;}
.page-banner-info h3{font-size: 36px; }
.page-banner-info p{margin-top: 15px; font-size: 20px; opacity: .5; text-transform: uppercase;}
.page-banner-info img{margin: 30px 0 10px; max-width: 110px;}
.page-banner-info span{display: block;}
@media (max-width:768px) {
    .page-banner-info h3 {font-size: 18px;}
    .page-banner-info p{font-size: 14px;}
    .page-banner-info img{margin: 10px;}
}

/*  */
.vip-head{margin-bottom: 70px;}
.vip-head ul{justify-content: center;}
.vip-head ul li{margin: 0 30px;}
.vip-head ul li a{ position: relative; font-size: 18px;}
.vip-head ul li.on a{ display: inline-block; padding-bottom: 15px; font-weight: bold; color: #FFDC00;}
.vip-head ul li.on a::before{position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #FFDC00;}

.vip-taocan ul{margin-left: -20px;}
.vip-taocan ul li{width: 20%; padding-left: 20px;}

.vip-item{display: none;}

.vip-taocan-item{ border-radius: 10px; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,.05); overflow: hidden;}

.vip-taocan-head{ padding: 25px 15px; text-align: center; background-image: linear-gradient(to right, #73A1FF, #0e59f0);}
.vip-taocan-head h3{ font-size: 24px; color: #fff;}

.vip-taocan-content{ padding: 50px 15px 40px; text-align: center;}
.vip-taocan-content a{display: inline-block; padding: 0 35px; line-height: 40px; color: #fff; background-color: #0e59f0; border-radius: 4px;}

.vip-taocan-price h3{font-size: 36px;}
.vip-taocan-price h3 small{font-size: 24px;}
.vip-taocan-price p{color: #0e59f0;}


.vip-taocan-if{margin: 40px 0 50px; height: 60px;}
.vip-taocan-if p{font-size: 16px; line-height: 30px; color: #666;}

.vip-taocan-info{padding: 0 24px; background-color: #fff; opacity: 0; display: none; }
.vip-taocan-info div{padding: 25px 0 20px; border-top: 1px solid #eee; }
.vip-taocan-info p{height: 100px; line-height: 20px; text-align: left; color: #777; overflow: hidden;}

.on .vip-taocan-head{background-image: linear-gradient(to right, #FFF3A8, #FFDC02);}
.on .vip-taocan-head h3{ color: #333;}
.on .vip-taocan-info{opacity: 1; display: block;}
.on .vip-taocan-content a{ background-color: #FFDC00; color: #333;}

@media (max-width:1200px) {
    
    
    .vip-taocan ul{justify-content: center;}
    .vip-taocan ul li{width: 33.33%; margin: 10px 0;}
    
    .vip-taocan-head{ padding:15px;}
    .vip-taocan-head h3{ font-size: 20px;}
    
    .vip-taocan-content{ padding: 20px 15px; text-align: center;}
    
    .vip-taocan-if{margin: 20px 0; height: 60px;}
    
    .vip-taocan-info{ opacity: 0; display: block; opacity: 1; }
    
}

@media (max-width:768px) {
    .vip-taocan-if p{font-size: 14px;}
    
    .vip-taocan-info p{font-size: 12px;}
}

@media (max-width:640px) {
    .vip-taocan ul li{width: 50%;}
    
    .vip-taocan-price h3{font-size: 32px;}
    .vip-taocan-price h3 small{font-size: 16px;}
    
}