.banner{ background: url(/wp-content/themes/vantage/images/promotions-festival-of-rewards-banner-bg.webp) center no-repeat; background-size:cover; overflow: hidden; width: 100%; position: relative;}
.banner:before{ content:""; display: none; width: 100%; height: 100%; position: absolute; left: 0; top:0; background: url(/wp-content/themes/vantage/images/promotions-festival-of-rewards-banner-bg-mb.webp) center top no-repeat; background-size:cover;}
.banner .inner{display: flex; justify-content: space-between; align-items: center; padding-top:10px; min-height: 600px; max-width:1440px; position: relative;}
.banner .text-box{ width: 560px; max-width: 45%; position: relative; z-index: 10;}
.banner .text-box h1{font-size: 48px;font-weight: 600;color: var(--v-white); margin-bottom: 17px;line-height: 1.2; max-width: 600px;}
.banner .text-box h1 span{color: var(--v-orange);}
.banner .text-box p{font-size: 20px; font-weight: 500;color: var(--v-white); opacity: 0.8; margin-bottom: 26px; line-height: 1.2;}
.banner .text-box p.tnc-text{font-size: 14px; margin: 0; padding-left:4px; font-weight: 400; opacity: 1;}
.banner .text-box p.tnc-text a{text-decoration: underline; opacity: 0.5;}
.banner .text-box p.tnc-text a:hover {text-decoration: underline; opacity: 1;}
.banner .text-box .orange-button.p18{margin-bottom: 2px; padding:17px 36px 19px; box-shadow: 0px 8px 20px 0px #B75D2670;}
.banner .img-box { position: absolute; width: 814px; right: -86px; bottom:0; max-width: 76%;}

h2{ font-size: 48px; font-weight: 600;color: var(--v-black-light); margin-bottom: 11px; line-height: 1.22; text-align:center;}
h2 span{color: var(--v-orange);}

.row1{ width: 100%; overflow: hidden;}
.row1 .inner{padding-top:96px; padding-bottom:97px;}
.row1 .top-box{ text-align:center; padding-bottom:56px;}
.row1 .top-box p{font-size: 20px; font-weight: 500;color: var(--v-black-light); opacity: 0.7; line-height: 1.3; margin-bottom:0; }
.row1 h3{ font-size: 28px; font-weight: 600;color: var(--v-black-light); margin-bottom: 33px; line-height: 1.22; text-align:center;}
.row1 ul{ max-width:1000px; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap; padding-bottom:34px; text-align:left;}
.row1 ul li{ width: 35.2%; position: relative; padding-right:30px;}
.row1 ul li:nth-child(3){ width: 29.6%;}
.row1 ul li:nth-child(3):after{ display: none;}
.row1 ul li:after{ content:""; display: block; position: absolute; right: 56px; top:24px; width: 100%; max-width:calc(100% - 164px); height: 2px; background:url(/wp-content/themes/vantage/images/lp-fastest-punch-challenge-row1-line.webp) center top repeat-x;}
.row1 ul li .num-text{width: 52px; height: 52px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--v-white); font-size: 20px; font-weight: 600; margin-bottom: 7px;}
.row1 ul li:nth-child(1) .num-text{background:#FF8E5C;}
.row1 ul li:nth-child(2) .num-text{background:#E35728;}
.row1 ul li:nth-child(3) .num-text{background:#034854;}
.row1 ul li h4{ font-size:20px; font-weight: 600; margin-bottom: 11px; line-height: 1.3;}
.row1 ul li:nth-child(1) h4{color:#FF8E5C;}
.row1 ul li:nth-child(2) h4{color:#E35728;}
.row1 ul li:nth-child(3) h4{color:#034854;}
.row1 ul li:nth-child(3){ padding-right:0;}
.row1 ul li:nth-child(3) p{ max-width: 100%;}
.row1 ul li p{ font-size:16px; margin-bottom: 0px; line-height: 1.5; color: var(--v-black); max-width:300px;}
.row1 ul li p.link-text{ padding-top:8px;}
.row1 ul li p.link-text a{ text-decoration: underline; color: var(--v-orange); position: relative; display: inline-block;}
.row1 ul li p.link-text a:hover{ text-decoration: underline; color: #c62400;}
.row1 ul li p.link-text a::after{content: '\f105'; font-family: 'FontAwesome'; color: var(--v-orange); display: block;width:20px;height: 20px;transition: all .15s linear; position: absolute; left: calc(100% + 3px); top:2px; border-radius: 50%; text-align:center; font-size:12px; line-height:20px;}
.row1 ul li p.link-text a:hover::after{background-color: #f9ddd4;}
.row1 p.tnc-text{ line-height: 1.2; font-size: 14px; margin: 0; padding-top:20px; font-weight: 400; opacity: 1;color: var(--v-black); text-align:center;}
.row1 p.tnc-text a{text-decoration: underline; opacity: 0.5;}
.row1 p.tnc-text a:hover {text-decoration: underline; opacity: 1;}

.row1 .get-tab-list{display: flex;justify-content: center;margin-bottom: 32px;cursor: pointer;position: relative;}
.row1 .get-tab-list .tab-item{position: relative;}
.row1 .get-tab-list .tab-item::after{content:"";display:block;width: 100%;height: 1px;background:#0000003D;position: absolute;bottom: -1px;left: 0;}
.row1 .get-tab-list p{width: 116px;color: var(--v-black);font-size: var(--fs-20);line-height: 1.3;margin-bottom: 0;text-align: center;font-weight: 500;}
.row1 .get-tab-list .tab-item.active p{color: var(--v-orange);}
.row1 .wire{position: absolute;top: 31px;height: 2px;background: var(--v-orange);transition: .4s;}
.row1 .tab-con-item{opacity: 0;height: 0; position: relative; overflow: hidden; text-align:center;}
.row1 .tab-con-item.active{opacity: 1;height: auto; overflow: visible;}


.row2{ background: url(/wp-content/themes/vantage/images/promotions-festival-of-rewards-row2-bg.webp) center no-repeat; background-size:cover; width: 100%; overflow: hidden; position: relative;}
.row2:before{ content:""; display: none; width: 100%; height: 100%; position: absolute; left: 0; top:0; background: url(/wp-content/themes/vantage/images/promotions-festival-of-rewards-row2-bg-mb.webp) center top no-repeat; background-size:cover;}
.row2 .inner{padding-top:96px; padding-bottom:90px;}
.row2 .top-box{ max-width: 650px; margin: 0 auto; text-align:center; padding-bottom:56px;}
.row2 .top-box h2{ color: var(--v-white); max-width: 670px;}
.row2 .top-box p{font-size: 20px; font-weight: 500;color: var(--v-white); opacity: 0.7; line-height: 1.3; margin-bottom:0; }
.row2 .top-content{ width: 1000px; max-width:100%; margin: 0 auto; border:1px solid var(--v-white); border-radius:8px; min-height:268px; display: flex; position: relative; background: url(/wp-content/themes/vantage/images/promotions-festival-of-rewards-row2-top-bg.webp) center top no-repeat; background-size:cover; align-items: center; flex-wrap: wrap; padding: 20px 80px;}
.row2 h3{ font-size: 32px; font-weight: 600;color: var(--v-white); margin-bottom: 0; line-height: 1.22;}
.row2 h3 span{color: var(--v-orange);}
.row2 .top-content h3{ margin-bottom: 0; position: relative; z-index: 1;}
.row2 .top-content .img-box{ width: 408px; max-width:45%; position: absolute; right: 45px; bottom:-1px;}
.row2 .top-content .img-box img.mb-img{ display: none;}
.row2 h3.sub-title{ text-align:center; max-width: 600px; margin: 0 auto 23px;}
.row2 .add-icon{ text-align:center; padding: 39px 0px 41px;}
.row2 .content-list{ max-width: 1024px; margin: 0 auto; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;}
.row2 .content-list li{ width: 317px; max-width:calc(100% / 3 - 24px);  text-align:center;}
.row2 .content-list li .list-box{ height: 100%; width: 100%; box-shadow: 0px 4px 20px 0px #00000029; border-radius:8px; background: var(--v-white); padding:43px 0px 0px; position: relative;}
.row2 .content-list li .top-text{ position: absolute; width: 100%; top:14px; width: 100%; text-align:center; left: 0;}
.row2 .content-list span.tier-text{ display: block; font-size: 14px; font-weight: 600; color: var(--v-black); opacity: 0.4; padding-bottom:3px; position: relative; z-index: 1;}
.row2 .content-list h4{ font-size: 18px; font-weight: 600; color: var(--v-orange); position: relative; z-index: 2; padding-left:10px; padding-right:10px;}
.row2 .content-list .img-box{ position:relative; bottom:17px; left: 50%; transform: translateX(-50%); width: 100%;}
.row2 .content-list .traded-lots-text{ width: calc(100% - 32px); margin: 0px auto; background:var(--v-orange); color:rgba(255,255,255,0.5); font-size: 14px; font-weight: 500; line-height:1.3; padding: 8px 10px; position:absolute; z-index: 3; bottom:24px; left: 50%; transform: translateX(-50%);}
.row2 .content-list .traded-lots-text span{font-size: 18px; color: var(--v-white);}
.row2 .button-box{ text-align:center; padding-top:32px;}
.row2 .button-box .orange-arrow-button.p18{ text-transform: none;}


@media (max-width:1600px) {
    .banner .img-box{ right: -80px;}
}

@media (max-width:1440px) {
    .banner .text-box h1{font-size:45px;}
    h2{ font-size: 42px;}

    .row2 .top-content{ padding-left:60px; padding-right:60px;}
}

@media (max-width:1240px) {
    .banner .text-box h1{font-size:42px;}
    .banner .text-box p{font-size:18px;}

    h2{ font-size: 38px;}

    .row1 .top-box{ padding-bottom: 42px;}
    .row1 .top-box p{ font-size:18px;}
    .row1 h3{ font-size:26px; margin-bottom: 30px;}
    
    .row2 .top-box{ padding-bottom: 42px;}
    .row2 .top-box p{ font-size:18px;}
    .row2 h3{ font-size:32px;}
    
    .row2 .top-content{ padding-left:50px; padding-right:50px;}
}

@media (max-width:1024px) {    
    h2{ font-size: 32px;}
    
    .row1 .inner { padding-top: 75px; padding-bottom: 75px;}
    .row1 .top-box{ padding-bottom: 35px;}
    .row1 .top-box p{ font-size:16px;}
    .row1 h3{ font-size:24px; margin-bottom: 25px;}

    .row2 .inner{ padding-top: 75px; padding-bottom: 75px;}
    .row2 .top-box p{ font-size:16px;}
    .row2 h3{ font-size:30px;}
    .row2 .top-content{ padding-left:40px; padding-right:40px;}
    .row2 .top-content .img-box{ right: 0;}
    .row2 .content-list li{max-width: calc(100% / 2 - 24px);}
}

@media (max-width:940px){
    .banner .inner{min-height: 520px;}
    .banner .text-box h1{font-size:40px;}
    .banner .text-box p{font-size:16px;}
    .banner .img-box{ width: 700px;}
    
    .row1 .inner { padding-top: 60px; padding-bottom: 60px;}
    .row1 .top-box{ padding-bottom: 30px;}

    
    .row2 .inner{ padding-top: 60px; padding-bottom: 60px;}
    .row2 .top-content{ padding-left:30px; padding-right:30px;}
    .row2 h3{ font-size:28px;}
}

@media (max-width:768px) {
    .banner:before{ display: block;}  
    .banner .inner{ padding-top:33px; min-height:auto; align-items: flex-start; padding-bottom:334px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42.67%, rgba(0, 0, 0, 0.7) 64.44%, rgba(227, 87, 40, 0) 77.52%, #E35728 115.64%); }
    .banner .text-box{ width: 380px; max-width:100%; text-align:center; margin: 0 auto;}
    .banner .text-box h1{font-size:28px; margin-bottom:8px;}
    .banner .text-box p{font-size:16px; font-weight:400; margin-bottom:21px; line-height:1.5;}
    .banner .text-box .orange-button.p18{padding: 12px 24px 15px; font-size:16px;}
    .banner .img-box{ width: 394px; max-width:394px; min-width:394px; right: 50%; transform: translateX(50%);}

    h2{ font-size: 20px; margin-bottom:5px;}
    
    .row1{ background:#e8e9ed;}
    .row1 .inner { padding-top: 32px; padding-bottom: 33px;}
    .row1 .top-box{ width: 360px; max-width:100%; padding-bottom: 25px; margin: 0 auto;}
    .row1 .top-box p{ font-size:14px; line-height: 1.28;}
    .row1 h3{ font-size:18px;}
    .row1 ul{ max-width: 353px; padding-bottom:7px;}
    .row1 ul li,
    .row1 ul li:nth-child(3){ width: 100%; padding:0px 0px 18px 32px}
    .row1 ul li:after{ width: 0px; height: calc(100% - 28px); background:none; border-left:1px dashed var(--v-orange); left: 11px; right:auto; top:28px; display: none;}
    .row1 ul li .num-text{ width: 24px; height: 24px; font-size:14px; font-weight:400; position: absolute; left: 0; top:-2px;}
    .row1 ul li h4{ font-size:16px; margin-bottom:6px;}
    .row1 ul li p{ font-size:14px; line-height:1.4; max-width:100%;}
    .row1 ul li p.link-text { padding-top: 4px;}
    .row1 ul li p.link-text a::after{ top:-1px;}
    .row1 .get-tab-list p {font-size: 14px;width: 82px;}
    
    .row2:before{ display: block;}
    .row2 .inner { padding-top: 32px; padding-bottom: 25px; position: relative; z-index: 2;}
    .row2 .top-box{ width: 270px; max-width:100%; padding-bottom: 24px; margin: 0 auto;}
    .row2 .top-box p{ font-size:14px; line-height: 1.28;}    
    .row2 h3{ font-size:20px; line-height:1.2;}
    .row2 .top-content{ width:353px; background: url(/wp-content/themes/vantage/images/promotions-festival-of-rewards-row2-top-bg-mb.webp) center top no-repeat; background-size:cover; min-height: auto; padding: 23px 0px 0px; display: flex; justify-content: center;}
    .row2 .top-content h3{ text-align:center; margin-bottom:43px; padding-left:20px; padding-right:20px;}
    .row2 .top-content .img-box{ position: static; margin: 0 auto; width: 281px; max-width:100%; transform: translateY(1px);}
    .row2 .top-content .img-box img.pc-img{ display: none;}
    .row2 .top-content .img-box img.mb-img{ display: block;}
    .row2 .add-icon{ padding: 10px 0px 17px;}
    .row2 .add-icon img{ width: 13px;}
    .row2 h3.sub-title{ margin-bottom:7px; max-width:353px;}
    .row2 .content-list{ gap:7px 3px; max-width:353px; justify-content: space-between;}
    .row2 .content-list li{ width: 173px; max-width: calc(50% - 3px);}
    .row2 .content-list li .list-box{ padding-top:70px;}
    .row2 .content-list li .top-text{ top:6px;}
    .row2 .content-list span.tier-text{ padding-bottom:2px;}
    .row2 .content-list h4{ font-size:16px; padding-left:21px; padding-right:21px;}
    .row2 .content-list .traded-lots-text{ font-size:12px; padding: 5px 5px 3px; width: calc(100% - 16px); bottom:8px;}
    .row2 .content-list .traded-lots-text span{ font-size:16px;}
    .row2 .button-box{padding-top:24px;}
    .row2 .button-box .orange-arrow-button.p18{ font-size:14px;}
    .row2 .content-list li:nth-child(1) h4,
    .row2 .content-list li:nth-child(2) h4 { padding-left: 0px; padding-right: 0px;}   
    .row2 .content-list li:nth-child(1) .list-box,
    .row2 .content-list li:nth-child(2) .list-box{ padding-top:52px;}
}

@media(max-width:380px) {
    .row2 .content-list h4{ font-size:14px;}
}
@media(max-width:350px) {
    .row2 .content-list h4{ padding-left:15px; padding-right:15px;}
}
/* ! vantagemarekts|2025-10-21 17:20:00 ! */