@font-face{ font-family: 'WorkSans-Regular'; src:url('../fonts/WorkSans-Regular.ttf');}
@font-face{ font-family: 'WorkSans-Bold'; src:url('../fonts/WorkSans-Bold.ttf');}
@font-face{ font-family: 'WorkSans-ExtraBold'; src:url('../fonts/WorkSans-ExtraBold.ttf');}

:root {
  /*font-size: clamp(最小值, 理想值, 最大值);*/
  --fs-xs: 1.4rem;
  --fs-base: 1.6rem;
  --fs-sm: 1.8rem;
  --fs-md: 2rem;
  --fs-md2: 2.2rem;
  --fs-md3: 2.4rem;
  --fs-md4: 2.8rem;
  --fs-lg: 3.2rem;
  --fs-lg2: 3.6rem;
  --fs-xl: 4.8rem;
  --fs-xxl: 7rem;
  --fs-xxxl: 8rem;
}
*{ margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html{ font-size: 70%; }
ul{ margin:0; padding:0; }
ul li{ list-style:none; margin:0; }
img{ border:0; }
a,a:focus,a:hover{ text-decoration: inherit; color: inherit; }

body.hoho-vip2-page{ background:#fff; font-family: "WorkSans-Regular"; font-size: var(--fs-base); letter-spacing:-1px; text-align:left; }
.hoho-vip2-page .site-header{ background:rgba(0, 0, 0, 1); font-size: var(--fs-xs); }
.vip-page-content{ padding-top:210px; background:#fff; overflow:hidden; }


.vip-page-content .row{ margin:0 -30px; }
.vip-page-content .row > *{ padding:0 30px; }

.pop-btn{ position:fixed; bottom:25px; right:30px; z-index:999; }
.pop-btn a{ position: relative; display: block; padding: 15px 25px; border-radius: 35px; background: #d7f205; 
  font-family:'WorkSans-Bold'; font-size: var(--fs-md); 
  box-shadow: 0 10px 30px #00000038; 
  transition: all .2s ease;
}
.pop-btn a:hover {
  transform: translateY(-5px);
}
.vip-top{ margin-top:0; }
.vip-top .row{ align-items:center;}
.vip-top-left img{ max-width:100%; margin-bottom: 30px; border-radius:15px; }
.vip-top-right h1{ font-family: 'WorkSans-Bold'; font-size:var(--fs-lg); line-height:40px; }
.vip-top-right h1 img{ height:40px; margin-right:10px; }
.vip-top-right h5{ display: inline-block; margin: 30px 0; padding: 15px 20px; font-family:'WorkSans-Bold'; font-size:var(--fs-base); text-transform: uppercase; background:#671ff9; border-radius:35px; color:#fff; }
.vip-right-price{ margin-bottom: 20px; line-height:1; }
.vip-right-price del{ color:rgba(0, 0, 0, .7); font-size:var(--fs-sm); }
.vip-right-price b{ margin: 0 3px 0 6px; font-family:'WorkSans-Bold'; font-size:var(--fs-lg); }
.vip-right-price strong{ font-family:'WorkSans-Bold'; font-size:var(--fs-xl); }
.vip-right-unlock{ margin-bottom: 50px; font-family:'WorkSans-Bold'; line-height: 1; font-size:var(--fs-md); }
.vip-right-unlock strong{ font-size:var(--fs-xl); color: #b22335;}
.vip-right-unlock b{ font-family:'WorkSans-Bold'; font-size:var(--fs-lg); color: #671ff9;}
.vip-top-right p{ margin:0; }
.vip-top-right h4{ font-family: 'WorkSans-Bold'; font-size:var(--fs-md2); }
.vip-right-btn{ margin:30px 0 10px 0; font-size:var(--fs-md); }
.vip-right-btn a{ position: relative; display: inline-block; padding: 15px 150px; border-radius: 35px; background: #d7f205; font-family:'WorkSans-Bold'; }
.vip-right-btn a::after{ position: absolute; right: 30px; content:"\f178"; display:inline-block; font-family: FontAwesome; }
.vip-top-right h6{ font-family: 'WorkSans-Bold'; font-size:var(--fs-xs); }

.vip-meta{ padding:20px 0; }
.vip-meta ul{ }
.vip-meta ul li{ padding-bottom:30px; }
.vip-meta ul li:nth-child(2n+1){ border-right:1px solid rgba(0, 0, 0, .3);}
/*.vip-meta ul li:nth-child(2n){ padding-left:30px; }*/
.vip-meta ul li h3{ font-family: 'WorkSans-ExtraBold'; font-size: var(--fs-md2);}
.vip-meta ul li p{ margin:0; }
.vip-meta ul li p strong{ font-family: 'WorkSans-ExtraBold'; font-size: var(--fs-md3); color: #616eff;}
.vip-meta-right{ margin-top: 50px; color:rgba(0, 0, 0, .8); text-align:right; }
.vip-meta-right img{ margin:0 15px; }

.vip-tags{ padding:50px 0; }
.vip-title{ width:80%; margin-bottom:50px; }
.vip-title h3{ font-family: 'WorkSans-Bold'; font-size: var(--fs-md2); color:#5967ff; }
.vip-title h2{ margin-bottom: 20px; font-family: 'WorkSans-Bold'; font-size: var(--fs-xxxl);}
.vip-title h4{ font-family: 'WorkSans-Bold'; font-size: var(--fs-xl); line-height: 1.6;}
.vip-title p{ color:rgba(0, 0, 0, .7); }
.vip-tags h4{ margin-bottom: 50px; padding: 30px 50px; font-family:'WorkSans-Bold'; font-size:var(--fs-md2); background:#f2f2f2; }
.vip-tags ul{ display:flex; justify-content:center; flex-wrap: wrap; gap: 50px 50px; text-align:center; }
.vip-tags ul li{ padding:15px 25px; border:2px solid #000; border-radius:35px; font-family:'WorkSans-Bold'; font-size:var(--fs-md); }
.vip-tags figure,.vip-product figure{ text-align:center; }
.vip-tags img{ margin: 50px 0; max-width:100%; }

.vip-about{ padding:50px 0;}
.vip-about-bottom{ justify-content: space-between; align-items:flex-end; }
.vip-about-bottom p{ margin: 0; color:rgba(0, 0, 0, .7); }
.vip-about-bottom img{ height: 120px; margin-top: 15px; float:right; }

.vip-videos{ padding:50px 0;}
.vip-videos ul li{ margin-bottom: 20px; background:#000; border-radius: 30px; overflow: hidden;}
.vip-videos-bottom{ padding: 10px 15px 20px; }
.vip-videos-bottom h4{ font-family:'WorkSans-Bold'; font-size:var(--fs-md3); color:#d7f205; }
.vip-videos-bottom h3{ font-family:'WorkSans-Bold'; font-size:var(--fs-lg); color: #fff;}
.vip-videos-bottom p{ font-size:var(--fs-md3); color: rgba(255, 255, 255, .7);}
.vip-videos video{ width:100%; }

.vip-blocks{ padding:100px 0; }
.vip-blocks ul li{ margin-bottom:50px; }
.vip-blocks ul li article{ width: 80%;}
.vip-blocks ul li h6{ font-family:'WorkSans-Bold'; font-size:var(--fs-xs); color:#5967ff; }
.vip-blocks ul li h3{ font-family:'WorkSans-Bold'; font-size:var(--fs-md3);}
.vip-blocks ul li p{ width: 80%; color:rgba(0, 0, 0, .75); }

.vip-gallery ul{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.vip-gallery li {
  overflow: hidden;
  border-radius: 20px;
}
/* 第一排：各占一半 */
.vip-gallery li:nth-child(1),
.vip-gallery li:nth-child(2) {
  grid-column: span 2;
}
/* 第二排：左边 3/4，右边 1/4 */
.vip-gallery li:nth-child(3) {
  grid-column: span 3;
}
.vip-gallery li:nth-child(4) {
  grid-column: span 1;
}
.vip-gallery ul li img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vip-video{ padding:100px 0; }
.vip-video video{ width:100%; }

.vip-product{ padding:100px 0;}
.vip-product img{ max-width:100%; }
.vip-product ul{
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 50px 15px 50px 10px;
  border-left: 8px solid #d7f205;
  border-radius: 0 30px 30px 0;
  background: #f5f5f3;
}
.vip-product ul li{ padding: 15px 5px; border-bottom: 1px solid rgba(0, 0, 0, .15); font-size:var(--fs-md); }
.vip-product ul li strong{ font-family:'WorkSans-Bold'; }
.vip-product ul li span{ color:rgba(0, 0, 0, .7); }
.vip-product ul li:last-child {
  grid-column: 1/-1;
}

.vip-faqs .vip-title{ width: 100%; border-bottom:1px solid rgba(0, 0, 0, .15); }
.faq-group{ margin-bottom: 50px; padding:0 0 0 10px; }
.faq-group h3{ font-family:'WorkSans-Bold'; font-size:var(--fs-lg2); }
.faq-group details{ padding:25px 0; margin-left: 15px; border-bottom:1px solid rgba(0, 0, 0, .15); }
.faq-group details summary{ position: relative; margin-bottom: 15px; font-family:'WorkSans-Bold'; font-size:var(--fs-md); cursor: pointer; list-style: none;}
.faq-group details p{ color:rgba(0, 0, 0, .7); }
.faq-group summary:after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0; 
    color: #5967ff;
}

.faq-group details[open] summary:after {
    content: "×"
}

.vip-bottom{ padding:100px 0; background:#000; text-align:center; }
.vip-bottom h5{ font-family:'WorkSans-Bold'; font-size: var(--fs-md); color:#5967ff; text-transform:uppercase; }
.vip-bottom h2{ margin: 30px 0; font-family: 'WorkSans-ExtraBold'; font-size: var(--fs-xxl); color: #fff;}
.vip-bottom h6{ font-size: var(--fs-sm); color: rgba(255, 255, 255, .5);}
.vip-bottom a{ position: relative; display: inline-block; margin: 50px 0 10px 0; padding: 20px 150px; background:#d7f205; border-radius: 35px; font-family:'WorkSans-Bold'; font-size: var(--fs-md); }
.vip-bottom a::after{ position: absolute; right: 30px; content:"\f178"; display:inline-block; font-family: FontAwesome; }
.vip-bottom p{ color: rgba(255, 255, 255, .55);}

.vip-ticket{ margin: 100px 0; display:flex; border-radius: 35px; overflow: hidden; box-shadow: 15px 25px 42px rgba(0,0,0,.18);}
.vip-ticket-left{ min-width: 200px; padding: 30px; display: flex; justify-content: flex-end; align-items: flex-end; background:#616eff; }
.vip-ticket-left img{ max-width:40px; }
.vip-ticket-line{ position: relative; border-left: 2px dashed #616eff;}
.vip-ticket-line::before, 
.vip-ticket-line::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
}
.vip-ticket-line::before{ top:-15px; }
.vip-ticket-line::after{ bottom:-15px; background: #dcdcdc;}
.vip-ticket-right{ background:#f5f5f5; padding:50px; }
.vip-ticket-right h6{ margin-bottom: 15px; font-size:var(--fs-sm); color:rgba(0, 0, 0, .55); text-transform:uppercase; }
.vip-ticket-right h3{ margin-bottom: 30px; font-size:var(--fs-xl); }
.vip-ticket-right h5{ width: 70%; margin-bottom: 30px; font-size:var(--fs-md2);}
.vip-ticket-right .vip-noptin-form{ width:80%; }
.vip-ticket-right .vip-noptin-form .noptin-optin-form-wrapper{ border:0; background:transparent; overflow:visible; }
.vip-ticket-right .vip-noptin-form .noptin-form-header{ display:none; }
.vip-ticket-right .vip-noptin-form .noptin-form-footer{ padding:0; }
.vip-ticket-right .vip-noptin-form .noptin-form-fields{ display:flex; flex-flow:row nowrap; gap:15px; align-items:stretch; }
.vip-ticket-right .vip-noptin-form .noptin-form-field-wrapper{ margin:0; }
.vip-ticket-right .vip-noptin-form .noptin-form-field-email{ flex:1 1 auto; min-width:0; }
.vip-ticket-right .vip-noptin-form .noptin-form-field-submit{ flex:0 0 auto; }
.vip-ticket-right .vip-noptin-form .noptin-form-field{ min-height:58px; background:#fff; padding:15px 20px; border-radius:35px; border:1px solid rgba(0, 0, 0, .15); font-size:var(--fs-md); }
.vip-ticket-right .vip-noptin-form .noptin-form-submit{ min-height:58px; background:#000; padding:15px 24px; margin:0; border:0; border-radius:35px; color:#fff; font-size:var(--fs-md); white-space:nowrap; }
.vip-ticket-right .vip-noptin-form .noptin-form-notice{ margin-top:10px; text-align:left; }

@media (min-width:1300px) {
  .vip-page-content .container {
      width: 1282px;
  }
}
@media (max-width: 1200px) {
  .vip-right-btn a, .vip-bottom a{ padding:15px 80px; }
}
@media (max-width: 992px) {
  .vip-page-content{ padding-top:195px; }
  .vip-page-content .container{ padding:0 15px; }
  .offset-2{ margin:0; }
  .vip-top-right{ text-align:center; }
  .vip-top-right h5{ margin:10px 0 0 0; }
  /*.vip-right-btn a, .vip-bottom a{ padding:15px 80px; }*/
  .vip-meta ul li, .vip-meta-right{ text-align:center; }
  .vip-title{ width:100%; margin-bottom:30px; }
  .vip-title h2{ font-size:var(--fs-lg2); }
  .vip-title h4{ line-height:1; }
  .vip-tags h4{ padding:30px 15px; }
  .vip-about-bottom img{ float:none; }
  .vip-blocks{ padding:0; }
  .vip-blocks ul li article,.vip-blocks ul li p{ width:100%; }
  .vip-gallery ul{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .vip-gallery ul li:nth-child(n) {
    grid-column: span 1;
  }
  .vip-product{ padding:0; }
  .vip-product ul{
    grid-template-columns: 1fr;
    padding: 15px;
  }
  .vip-faqs{ padding:50px 0; }
  .faq-group h3{ font-size:var(--fs-md4);}
  .vip-bottom h2{ font-size:var(--fs-lg);}
  .vip-ticket-left, .vip-ticket-line, .vip-ticket-line::before, .vip-ticket-line::after{ display:none; }
  .vip-ticket-right{ padding:15px; }
  .vip-ticket-right h3{ font-size:var(--fs-lg);}
  .vip-ticket-right h5{ width:100%; }
  .vip-ticket-right .vip-noptin-form{ width:100%; }
}

@media (max-width: 576px) {
  .vip-gallery ul{
    grid-template-columns: 1fr;
  }
}