@charset "UTF-8";

.promo0624-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    overflow: hidden;
    text-align: center;
    cursor: default;
    position: relative;
    background: #ffc955;
}
.promo0624-container .note{
    font-size: 1rem;
    color:black;
    margin-top: .5rem;
}
@media screen and (max-width: 768px) {
    .promo0624-container .note{ font-size: .8rem;}
}
.promo0624-container .title-h1{ z-index: -9999; font-size: 0; text-indent: -9999;}

.promo0624-container .tab-style {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 1rem;
    z-index: -1;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}

.promo0624-container .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 2.5% 12%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


.promo0624-container .sec1 .wrapper {
    padding-top: 0;
}
@media screen and (max-width: 768px) {
    .promo0624-container .sec1 {
        margin-top: -.8rem;
    }
}
.promo0624-container small {
    color: inherit;
}

.promo0624-container .green {
    color: #00968f !important;
}

.promo0624-container .pink {
    color: #ed2a43 !important;
}

.promo0624-container .subtitle {
    margin-bottom: 2.5%;
}

.promo0624-container .subtitle .line{ text-decoration: underline;}

.promo0624-container .subtitle h2{
    font-size: 3rem;
    font-weight: 700;
    line-height: 120%;
    color: #333333;
    display: block;
}
.promo0624-container .subtitle h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 120%;
    color: #333;
    display: block;
}
.promo0624-container .subtitle h4 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 120%;
    color: #333;
}

.promo0624-container .sec1 .subtitle h2, .promo0624-container .sec2 .subtitle h2, .promo0624-container .sec3 .subtitle h2, .promo0624-container .sec1 .subtitle p, .promo0624-container .sec2 .subtitle p, .promo0624-container .sec3 .subtitle p, .promo0624-container .sec3 .subtitle h3, .promo0624-container .events-content dl dt{ color: black; display: block}
    
.promo0624-container .sec1 .subtitle .yellowsubtitle{color:#fc3522}
.promo0624-container .sec3 .subtitle h3 small small,
.promo0624-container .sec3 .subtitle h4 small small {
    font-size: 1rem;
    font-weight: normal;
    margin-left: 4px;
}

.promo0624-container .subtitle .limit-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto .5rem;
}

.promo0624-container .subtitle .limit-title span {
    color: #fffc8d;
    margin: 0 5px;
    font-weight: 700;
}

.promo0624-container .subtitle .limit-title::after {
    width: 10%;
    height: 2px;
    content: "";
    background-color: #fffc8d;
    transform: translateY(-50%);
    display: inline-block;
}

.promo0624-container .subtitle .limit-title::before {
    width: 10%;
    height: 2px;
    content: "";
    background-color: #fffc8d;
    transform: translateY(-50%);
    display: inline-block;
}

.promo0624-container .events-content dl dt {
    border-radius: 10px 10px 0 0;
}

.promo0624-container .subtitle p {
    font-size: 1.2rem;
    line-height: 140%;
    color: #fff;
}

.promo0624-container .sec1,
.promo0624-container .sec2,
.promo0624-container .sec3,
.promo0624-container .sec4 {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.promo0624-container .sec2{ background: url(https://www.homeplus.net.tw/cable/images/manual_upload/promo0624/sec2-wow-bg.svg) center top no-repeat, radial-gradient(circle farthest-corner at left, #269aaf 0%, #00d7c4 100%); background-size: cover; transform:skew(0deg, -6deg); margin-top: 50px;}

.promo0624-container .sec3 .wrapper:nth-child(2) {
    padding-bottom: 5%;
}

.promo0624-container .sec2 .wrapper,
.promo0624-container .sec4 .wrapper {
    transform: skew(0deg, 6deg);
}

.promo0624-container .sec4 {
    background-color: #e6f2f4;
    transform: skew(0deg, -6deg);
}

.promo0624-container .sec3 .wrapper:nth-child(2) .subtitle h2{ background: linear-gradient(transparent 60%, #7e0327 60%, #7e0327 90%,transparent 90%);}

.promo0624-container .sec2 .wrapper {
    padding-top: 5%;
    padding-bottom: 5%;
}

.promo0624-container .sec3 .wrapper {
    padding-top: 5%;
}

.promo0624-container .sec4 .wrapper:first-child {
    padding-top: 10%;
}

.promo0624-container .sec4 .wrapper:last-child {
    background: #e6f2f4;
}

.promo0624-container .sec5 {
    width: 100%;
    background: #e6f2f4;
    height: 1rem;
    margin-top: -5px;
}

.promo0624-container .tab-style {
    display: block;
    width: 100%;
    height: 1rem;
    z-index: -9;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}

.promo0624-container .hero-box {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.promo0624-container .hero-box .kv-bg {
    position: relative;
    width: 100%;
}

.promo0624-container .hero-box .kv-slogan {
    width: auto;
    position: absolute;
    left: 41%;
    top: 29%;
    transform: translate(-50%, 0);
}

.promo0624-container .hero-box .model0217{ 
    position: absolute; 
    left: 0%; 
    top: 4%; 
    display: flex; 
    align-items: center; 
    width: 100%; 
    justify-content: center;
 }

.promo0624-container .hero-box .kv-slogan .slogan-1 img{
    max-width: 706px;
    width: 100%;
}
.promo0624-container .hero-box .kv-slogan .slogan-2{
    margin-top: 20px;
}
.promo0624-container .hero-box .kv-slogan .slogan-2 img{
    max-width: 945px;
    width: 100%;
}
@media screen and (max-width: 1280px) {
    .promo0624-container .hero-box{
        margin-bottom: 5%;
    }
    .promo0624-container .hero-box .kv-slogan{
        top: 28%;
        width: 24%;
        left: 40%;
    }
    .promo0624-container .hero-box .kv-slogan .slogan-1 img{
        max-width: 700px;
    }
    .promo0624-container .hero-box .kv-slogan .slogan-2 img{
        max-width: 900px;
    }
    .promo0624-container .hero-box .model0217{ 
        position: absolute; 
        left: 33%; 
        top: 1%; 
        display: flex; 
        align-items: center; 
        width: 30%; 
        justify-content: center;
     }
}
@media screen and (max-width: 1100px) {
    .promo0624-container .hero-box{
        margin-bottom: 12%;
    }
    .promo0624-container .hero-box .kv-slogan .slogan-2{
        margin-top: 10px;
    }
    .promo0624-container .hero-box .kv-slogan{
        width: 82%;
    }
    .promo0624-container .hero-box .kv-slogan .slogan-1 img{
    position: absolute; 
    left: 32%; 
    top: -11%; 
    display: flex; 
    align-items: center; 
    width: 33%; 
    justify-content: center;
    }
    .promo0624-container .hero-box .kv-slogan .slogan-2 img{
        max-width: 800px;
    }
    /* .promo0624-container .hero-box .model0217{ 
        position: absolute; 
        left: 27%; 
        top: 5%; 
        display: flex; 
        align-items: center; 
        width: 50%; 
        justify-content: center;
     } */
}
@media screen and (max-width: 820px) {
    .promo0624-container .hero-box{
        margin-bottom: 20%;
    }

    .promo0624-container .hero-box .model0217{ 
        position: absolute; 
        left: 27%; 
        top: 5%; 
        display: flex; 
        align-items: center; 
        width: 50%; 
        justify-content: center;
     }
    
    .promo0624-container .hero-box .kv-slogan .slogan-1 img {
        position: absolute;
        left: 13%;
        top: 0%;
        display: flex;
        align-items: center;
        width: 57%;
        justify-content: center;
    }
}
@media screen and (max-width: 768px) {
    .promo0624-container .hero-box{
        margin-bottom: 0;
    }
    .promo0624-container .hero-box .model0217{ 
        position: absolute; 
        left: 24%; 
        top: 8%; 
        display: flex; 
        align-items: center; 
        width: 57%; 
        justify-content: center;
     }
}
.promo0624-container .hero-box .kv-Bonus {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: fit-content;
    /* padding: 0 5rem; */
}
.promo0624-container .hero-box .kv-Bonus img{
    margin-top: 37%;
}

@media screen and (max-width: 750px) {
    .promo0624-container .hero-box .kv-Bonus img{
        margin-top: 58%;
    }
    .promo0624-container .hero-box .kv-slogan img {
        margin-left: 0PX;
        margin-top: 48px;
    }
    
}

/*優惠*/
.promo0624-container .sec1 .offer-box-desk {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 5%;
}

.promo0624-container .sec1 .offer-box-desk img {
    width: 100%;
    height: fit-content;
}

.promo0624-container .sec1 .offer-box-desk figure {
    margin-bottom: 2.5%;
}

/* .promo0624-container .sec1 .offer-box-desk figure:nth-child(2), .promo0624-container .sec1 .offer-box-desk figure:nth-child(3){ width: 48%;} */
.promo0624-container .sec1 .offer-box-mobile {
    display: none;
}

/*table*/
.promo0624-container .fees-content {
    position: relative;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 5%;
}

.promo0624-container .sec1 .fees-content {
    margin-bottom: 2.5%;
}

.promo0624-container .fees-content .mobile-show {
    display: none;
    margin-bottom: 5px;
    font-size: 12px;
}

.promo0624-container .fees-content .fees-table table .logo {
    vertical-align: baseline;
}

.promo0624-container .fees-content .fees-table {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 0 10px #33333310;
}

.promo0624-container .fees-content .fees-table table .hot {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 5px;
    border-radius: 25px;
    box-shadow: 2px 2px 0 #0000003a;
    color: #fff7d2;
    background-color: #632aff;
    font-size: 14px;
}

.promo0624-container .fees-content .fees-table table {
    border: 0;
    width: 100%;
    border-spacing: 0;
    margin: 0 auto;
    border-collapse: separate;
    border-radius: 0;
}

.promo0624-container .fees-content .fees-table table th {
    color: #fff;
    padding: 8px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    border-right: solid 1px #fff;
}

.promo0624-container .fees-content .fees-table table th p {
    font-weight: 700;
    font-size: 1.5rem;
}

.promo0624-container .fees-content .fees-table table tr:first-child th:first-child {
    width: 20%;
}

.promo0624-container .fees-content .fees-table table tr:first-child th:last-child,
.promo0624-container .fees-content .fees-table table tr:nth-child(3) th:last-child {
    border-right: 0;
}

.promo0624-container .fees-content .fees-table table td {
    border-right: solid 1px #666;
    border-top: solid 1px #666;
    padding: 12px 8px;
    font-weight: 500;
}

.promo0624-container .fees-content .fees-table table tr:nth-child(2) td:first-child,
.promo0624-container .fees-content .fees-table table tr:nth-child(4) td:first-child {
    border-top: 1px solid #fff;
}

.promo0624-container .fees-content .fees-table table tr:nth-child(2) td:first-child,
.promo0624-container .fees-content .fees-table table tr:nth-child(3) td:first-child {
    border-right: 1px solid #666;
}

.promo0624-container .fees-content .fees-table table tr:nth-child(2) th:nth-child(1),
.promo0624-container .fees-content .fees-table table tr:nth-child(2) th:nth-child(2),
.promo0624-container .fees-content .fees-table table tr:nth-child(5) td:nth-child(1) {
    border-top: solid 1px #fff;
}

.promo0624-container .fees-content .fees-table table tr:nth-child(3) td:last-child,
.promo0624-container .fees-content .fees-table table tr:nth-child(4) td:last-child,
.promo0624-container .fees-content .fees-table table tr:nth-child(5) td:last-child,
.promo0624-container .fees-content .fees-table table tr:nth-child(2) td:last-child,
.promo0624-container .fees-content .fees-table table tr:nth-child(6) td:last-child {
    border-right: 0;
}

.promo0624-container .fees-content .fees-table table tr:first-child th:first-child small {
    font-weight: normal;
}

.promo0624-container .fees-content .fees-table table,
.promo0624-container .fees-content .fees-table table tr td,
.promo0624-container .fees-content .fees-table table tr td p {
    font-size: 1.1rem;
    color: #333;
}

.promo0624-container .fees-content .fees-table table .sale-deco {
    padding: 1px 6px;
    background: linear-gradient(to right, #d69813 0%, #fff4a2 33%, #fff4a2 100%);
    color: #70460a;
    font-size: 13px !important;
    border-radius: 20px;
    display: inline-block;
}

.promo0624-container .fees-content .fees-table table .w {
    color: #fff;
}

.promo0624-container .fees-content .fees-table table .yellow {
    color: #fffc8d;
}

.promo0624-container .fees-content .fees-table table .price {
    font-size: 160%;
    font-weight: 700;
    color: #fc3522;
}

.promo0624-container .fees-content .fees-table table del {
    font-size: 16px;
    font-weight: normal;
    color: #666;
}

.promo0624-container .fees-content .fees-table table .icon {
    margin-right: 2px;
}

.promo0624-container .fees-content .fees-table table tr:nth-child(5) td:last-child p img {
    vertical-align: baseline;
}

/*1G速配*/
.promo0624-container .match {
    box-sizing: border-box;
    width: 100%;
}

.promo0624-container .match dl {
    background: linear-gradient(0deg, rgba(232, 232, 232, 1) 0%, rgba(255, 255, 255, 1) 20%);
    border-radius: 80px 20px 20px 20px;
    padding: 15px 0;
}

.promo0624-container .match dl dt {
    font-size: 1.5rem;
    line-height: 140%;
    font-weight: 700;
}

.promo0624-container .match dl dd {
    font-size: 1.2rem;
    line-height: 140%;
}

.promo0624-container .match dl dd:last-child {
    margin-bottom: 0;
}

.promo0624-container .match dl dd span {
    display: block;
}

.promo0624-container .match dl:nth-child(2) {
    margin-top: 40px;
    border-radius: 20px 20px 80px 20px;
}

.promo0624-container .match dl dd img {
    border-radius: 40px 40px 0 0;
    padding-left: 15px;
    width: 100%;
}

.promo0624-container .match dl dd i img {
    width: 14px;
    height: 16px;
    border-radius: 0;
    padding-left: 0;
    vertical-align: baseline;
    margin-right: 1px;
}

/*1G速配 swiper*/
.promo0624-container .swiper-pagination.match .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ffffff;
}

.promo0624-container .swiper-pagination.match {
    display: none;
}

/*老客戶AB試算*/
.promo0624-container .regular-content .ex-box .ex-box-main {
    margin-bottom: 2.5%;
    border-radius: 20px;
    box-shadow: 0 0 10px #33333310;
    display: flex;
    border: 2px solid #d4164a;
    box-sizing: border-box;
    overflow: hidden;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left {
    background-color: #d4164a;
    display: inline-flex;
    justify-content: center;
    width: 40%;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left dl {
    display: inline-flex;
    margin: 0;
    padding: 5%;
    align-items: center;
    text-align: left;
    width: 100%;
    color: #fff;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left dl dt {
    margin: 0;
    padding: 0;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left dl dt p {
    font-size: 1rem;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left .user-icon {
    width: 55px;
    margin-right: 1rem;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right {
    width: 60%;
    padding: .5rem 1rem;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: #fff;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right .ex-box-tip {
    font-size: 13px;
    color: #939393;
    line-height: 100%;
    padding: 2px 5px;
    border: 1px solid #939393;
    font-style: normal;
    margin-bottom: .5rem;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right dl {
    display: inline-flex;
    border-bottom: 1px solid #7e0327;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    width: 100%;
    justify-content: space-between;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right dl dt,
.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right dl dd {
    margin-bottom: 0;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right .note {
    font-size: .9rem;
    text-align: left;
    color: #939393;
}

.promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right dl:last-child {
    border-bottom: 0;
}

.promo0624-container .regular-content .ex-box .ex-box-main:first-child .ex-box-right dl {
    padding-bottom: 0;
    margin-bottom: 0;
}

.promo0624-container .regular-content .regular-ad {
    margin-bottom: 2.5%;
}

.promo0624-container .regular-content .regular-ad img {
    width: 100%;
    height: fit-content;
}

/*線上申辦優點*/
.promo0624-container .easy {
    box-sizing: border-box;
    width: 100%;
}

.promo0624-container .easy dl {
    background: linear-gradient(0deg, rgba(232, 232, 232, 1) 0%, rgba(255, 255, 255, 1) 20%);
    border-radius: 80px 20px 20px 20px;
    padding: 15px 0;
}

.promo0624-container .easy dl dd {
    font-size: 1.2rem;
    line-height: 140%;
}

.promo0624-container .easy dl dd:last-child {
    margin-bottom: 0;
}

.promo0624-container .easy dl dd span {
    display: block;
}

.promo0624-container .easy dl:nth-child(2) {
    margin-top: 40px;
    border-radius: 20px 20px 80px 20px;
}

.promo0624-container .easy dl dd img {
    border-radius: 40px 40px 0 0;
    padding-left: 15px;
    width: 100%;
}

.promo0624-container .sec4 .btn {
    width: fit-content;
    margin: 1rem auto 0;
}

/*線上申辦優點 swiper*/
.promo0624-container .swiper-pagination.easy .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #269aaf;
}

.promo0624-container .swiper-pagination.easy {
    display: none;
}

/*更多優惠*/
.promo0624-container .events-content dl {
    background-color: #fff;
    border-radius: 20px;
    min-height: 11rem;
    display: flex;
    
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.promo0624-container .events-content dl dt{ font-size: 1.4rem; line-height: normal; padding: 12px 0; border-radius: 20px 20px 0 0; margin: 0 0 10px 0; background: radial-gradient(circle farthest-corner at left, #22aec6 0%, #1c96ac 40%, #1c96ac 100%);}

.promo0624-container .events-content dl dd {
    font-size: 1.1rem;
}

.promo0624-container .events-content dl dd .promo0624-btn {
    font-size: .9rem;
    margin-bottom: .5rem;
    display: block;
}

.promo0624-container .events-content .btn {
    padding: 10px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
}

.promo0624-container .events-content .promo0624-btn i {
    margin-left: 8px;
}

.promo0624-container .events-content .promo0624-btn i img {
    vertical-align: baseline;
}

.promo0624-container .events-content .promo0624-btn:hover i {
    transform: translate(3px, 0);
    transition: .2s;
}

/*更多優惠 swiper*/
.promo0624-container .swiper-container.events-content {
    display: flex;
    padding: 0;
    width: 100%;
}

.promo0624-container .swiper-wrapper.events-content {
    display: flex;
}

.promo0624-container .swiper-pagination.events-content .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #269aaf;
}

.promo0624-container .swiper-pagination.events-content {
    display: none;
}

/*QA*/
.promo0624-container .sec4 .qa-content {
    background-color: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
}

.promo0624-container .sec4 .qa-content .container-accordion {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.promo0624-container .sec4 .qa-content .container-accordion label {
    display: block;
    width: 100%;
    text-align: left;
    background-color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    /* color: #00968f; */
    line-height: 140%;
}

.promo0624-container .sec4 .qa-content .container-accordion .accordion-navigation {
    border-bottom: #bfbfbf 1px dotted;
    width: 100%;
    text-align: left;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.promo0624-container .sec4 .qa-content .container-accordion .accordion-navigation:last-child {
    border-bottom: none !important;
    padding-bottom: 0;
    margin-bottom: 0;
}

.container-accordion .container-accordion-content {
    height: 0px;
    overflow: hidden;
    font-size: 1rem;
    line-height: 140%;
    padding-left: 2rem;
    transition: 0.3s ease-in !important;
}

input[type=radio]:checked+.container-accordion-content {
    height: auto;
    font-size: 1rem;
    line-height: 140%;
    padding-left: 2rem;
    padding-top: .5rem;
}

input[type=radio] {
    display: none;
}

/*貼心提醒*/
.promo0624-container .terms-box {
    background-color: #fff;
    text-align: left;
}

.promo0624-container .terms-box .dot-hr {
    margin-top: 0;
}

@media screen and (max-width: 1280px) {
    .promo0624-container .wrapper {
        padding: 2% 5%;
    }

}

@media screen and (max-width: 1024px) {
    .promo0624-container .events-content dl {
        min-height: 12rem;
    }

    .promo0624-container .fees-content .fees-table table tr:nth-child(5) td:last-child p {
        font-size: 1rem;
    }

    .promo0624-container .fees-content .fees-table table th p {
        font-size: 1.25rem;
    }

    .promo0624-container .fees-content .fees-table table,
    .promo0624-container .fees-content .fees-table table tr td,
    .promo0624-container .fees-content .fees-table table tr td p,
    .promo0624-container .fees-content .fees-table table .red {
        font-size: 1rem;
    }

    .promo0624-container .fees-content .fees-table table .price {
        font-size: 140%;
    }
}

@media screen and (max-width: 900px) {
    .promo0624-container .events-content dl {
        min-height: 14rem;
    }

}


@media screen and (max-width: 750px) {
    .promo0624-container .m-hidden{ display: none;}
    .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 0;
    }

    .promo0624-container .wrapper {
        padding: 5%;
    }

    .promo0624-container .sec2 .wrapper,
    .promo0624-container .sec3 .wrapper,
    .promo0624-container .sec4 .wrapper:first-child {
        padding-top: 10%;
    }

    .promo0624-container .hero-box .kv-slogan {
        width: 90%;
    }

    .promo0624-container .subtitle h2, .promo0624-container .subtitle h3 {
        font-size: 1.8rem;
    }

    .promo0624-container .subtitle h3 {
        font-size: 1.15rem;
    }

    .promo0624-container .subtitle p,
    .promo0624-container .events-content dl dd {
        font-size: .9rem;
    }

    .promo0624-container .sec3 .subtitle h3 small small,
    .promo0624-container .sec3 .subtitle h4 small small {
        font-size: .85rem;
    }

    .promo0624-container .sec3 .wrapper:nth-child(2) .subtitle h3:first-child {
        display: inline;
    }

    .promo0624-container .easy dl:nth-child(2),
    .promo0624-container .match dl:nth-child(2) {
        margin-top: 0px;
        border-radius: 10px 10px 50px 10px;
    }

    .promo0624-container .match dl dt {
        font-size: 1.25rem;
    }

    .promo0624-container .easy dl dd,
    .promo0624-container .match dl dd {
        font-size: 1rem;
    }

    .promo0624-container .swiper-wrapper.events-content,
    .promo0624-container .swiper-wrapper.easy,
    .promo0624-container .swiper-wrapper.match {
        margin-bottom: 1rem;
    }

    .promo0624-container .swiper-pagination.events-content,
    .promo0624-container .swiper-pagination.easy,
    .promo0624-container .swiper-pagination.match,
    .promo0624-container .swiper-pagination.offter-item {
        display: block;
    }

    .promo0624-container .events-content dl {
        min-height: 10rem;
    }

    .promo0624-container .match dl,
    .promo0624-container .easy dl {
        border-radius: 50px 10px 10px 10px;
    }

    .promo0624-container .events-content dl dt {
        border-radius: 10px 10px 0 0;
    }

    .promo0624-container .events-content dl,
    .promo0624-container .sec4 .qa-content {
        border-radius: 10px;
    }

    .promo0624-container .sec4 .qa-content .container-accordion label,
    input[type=radio]:checked+.container-accordion-content,
    .container-accordion .container-accordion-content {
        font-size: .9rem;
        line-height: 140%;
    }

    input[type=radio]:checked+.container-accordion-content,
    .container-accordion .container-accordion-content {
        padding-left: .9rem;
    }

    /*優惠*/
    .promo0624-container .sec1 .offer-box-desk {
        display: none;
    }

    .promo0624-container .sec1 .offer-box-mobile {
        width: 100%;
        display: block;
    }

    .promo0624-container .swiper-pagination.offter-item .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #fff;
    }

    .promo0624-container .swiper-pagination.offter-item {
        display: block;
    }

    .promo0624-container .swiper-wrapper.offter-item {
        margin-bottom: 2rem;
    }

    /*老客戶AB試算*/
    .promo0624-container .regular-content .ex-box .ex-box-main {
        flex-direction: column;
        margin-bottom: 5%;
        border-radius: 10px;
    }

    .promo0624-container .regular-content .regular-ad img {
        border-radius: 10px;
    }

    .promo0624-container .regular-content .regular-ad {
        margin-bottom: 5%;
    }

    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left,
    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right {
        width: 100%;
    }

    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left dl {
        justify-content: center;
        padding: 2%;
    }

    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left .user-icon {
        width: 30px;
    }

    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right {
        padding: 2.5%;
    }

    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right dl dt,
    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right dl dd {
        font-weight: normal;
        text-align: left;
        font-size: .9rem;
    }

    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-left dl dt p {
        font-weight: normal;
    }

    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right .note {
        font-size: .85rem;
    }

    .promo0624-container .regular-content .ex-box .ex-box-main .ex-box-right .ex-box-tip {
        font-size: 12px;
    }

    /*table*/
    .promo0624-container .sec1 .fees-content {
        margin-bottom: 0;
    }

    .promo0624-container .sec1 .fees-content .fees-table {
        margin-bottom: 5%;
    }

    .promo0624-container .fees-content .fees-table table .price {
        font-size: 130%;
    }

    .promo0624-container .fees-content .fees-table table del {
        font-size: .85rem;
    }

    .promo0624-container .fees-content .fees-table {
        overflow-x: scroll;
        overflow-y: hidden;
        margin-bottom: 10%;
        position: relative;
        box-shadow: none;
    }

    .promo0624-container .fees-content .fees-table table .hot {
        border-radius: 25px;
        font-size: 12px;
    }

    .promo0624-container .fees-content .fees-table table .hot span {
        display: block;
    }


    .promo0624-container .fees-content .mobile-show {
        display: block;
        color: #000;
    }

    .promo0624-container .fees-content ::-webkit-scrollbar-thumb {
        background-color: #333 !important;
        border-radius: 0px;
        outline: 1px solid #333;
    }

    .promo0624-container .fees-content ::-webkit-scrollbar {
        height: 8px;
        -webkit-appearance: none;
    }

    .promo0624-container .fees-content ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.4);
        -webkit-box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.4);
    }

    .promo0624-container .fees-content ::-webkit-scrollbar:hover {
        height: 12px;
    }

    .promo0624-container .fees-content .fees-table table tr:first-child th:first-child,
    .promo0624-container .fees-content .fees-table table tr td:first-child {
        box-shadow: 5px 0 10px rgb(0, 0, 0, .1);
    }

    .promo0624-container .fees-content .fees-table table th p {
        font-size: 1.1rem;
    }

    .promo0624-container .fees-content .fees-table table,
    .promo0624-container .fees-content .fees-table table tr td,
    .promo0624-container .fees-content .fees-table table tr td p,
    .promo0624-container .fees-content .fees-table table .red,
    .promo0624-container .fees-content .fees-table table tr:nth-child(5) td:last-child p {
        font-size: .9rem;
    }

    .promo0624-container .fees-content .fees-table table tr td:first-child,
    .promo0624-container .fees-content .fees-table table tr:nth-child(3) td:first-child,
    .promo0624-container .fees-content .fees-table table tr:nth-child(4) td:first-child p,
    .promo0624-container .fees-content .fees-table table tr:nth-child(5) td:first-child p,
    .promo0624-container .fees-content .fees-table table tr:nth-child(3) td:first-child p {
        font-size: .85rem;
    }

    .promo0624-container .fees-content .fees-table table td,
    .promo0624-container .fees-content .fees-table table th {
        padding: 8px 4px;
    }

    .promo0624-container .fees-content .fees-table table tr:last-child p img {
        height: 14px;
    }

}

@media screen and (max-width: 650px) {
    .promo0624-container .fees-content .fees-table table {
        width: 566px;
    }


}

.m-show{
    display: none;
}

@media screen and (max-width: 500px) {
    .m-show{
        display: block;
    }
}



/* AD */
.AD-picture{
    transition:0.24s;
}
.AD-picture:hover {
    transform: scale(1.02);
}
/* 外部容器，確保 PC 並排 */
.cardcontainer {
    display: flex;
    justify-content: space-between; /* 確保卡片從左側開始排列 */
    gap: 20px;
    flex-wrap: nowrap; /* PC 版不換行 */
    width: 100%;
    overflow-x: auto; /*  手機版橫向滑動 */
    scrollbar-width: none; /* 隱藏滾動條 (Firefox) */
    -ms-overflow-style: none; /* 隱藏滾動條 (IE/Edge) */
    margin-bottom: 2rem;
}

/* 隱藏滾動條 (Chrome / Safari) */
.cardcontainer::-webkit-scrollbar {
    display: none;
}

/* 卡片樣式 */
.card {
    flex: 0 0 33%; /* 固定卡片寬度，不縮小 */
    max-width: 330px; /* 限制最大寬度 */
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 416px;
}

/* 確保背景圖片填滿 */
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* 內容區塊 */
.content {
    position: relative;
    z-index: 1;
    padding: 6px;
    margin-top: 10px;
}

/* 黃色標籤 */
.label {
    position: absolute;
    top: 0px;
    left: 10px;
    width: 88px; /* 調整標籤寬度 */
    height: 55px; /* 調整標籤高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    border-radius: 5px;
    
    /* ✅ 設定背景圖片 */
    background-image: url('https://www.homeplus.net.tw/cable/images/manual_upload/promo0624/icon-tag-250521.webp'); /* 替換為你的標籤背景圖 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* 讓底部圖片適應標籤 */
.label-bottom-img {
    width: 100%; /* 讓圖片跟標籤一樣寬 */
    height: auto;
    margin-top: 5px; /* 調整間距 */
}

/* 文字樣式 */
.title {
    color: #fc3522;
    font-size: 30px;
    font-weight: bold;
    margin-top: 20px;
}


.subtitle {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}

.description {
    font-size: 18px;
    color: #000;
    line-height: 1.5;
}

.description strong{
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 8px;
    display: inline;
    box-decoration-break: clone;
}

.catchplay{
    width: 205px;
    margin-top: 10px;
}

.bonus021825{
    width: 100%;
    margin-top: 2%;
    margin-bottom: 5%;
}
/* 手機版 (橫向滑動) */
@media (max-width: 1055px) {
    .cardcontainer {
        overflow-x: auto; /* 超出畫面可橫向滑動 */
        display: flex;
        flex-wrap: nowrap; /* 不允許換行 */
        justify-content: flex-start; /* 讓卡片靠左排列 */
        margin-bottom: 1rem;
    }

    .card {
        flex: 0 0 303px; /*  固定卡片寬度 */
    }
    .bonus021825{
        padding-top: 10px;
        width: 100%;
        position: relative;
    }

}
@media (max-width: 768px) {
    .title, .subtitle{
        font-size: 24px;
    }
    .card {
        flex: 0 0 280px; /*  固定卡片寬度 */
        padding: 20px 0;
        height: 380px;
    }
    .description{
        font-size: 1rem;
    }
    .description strong{
        font-size: 1.2rem;
    }
    .label{
        font-size: 18px;
        width: 65px;
        height: 40px;
    }
    .content{
        margin-top: 0;
        padding-top: 0;
    }
    .catchplay{
        margin-top: 0;
        width: 180px;
    }
}

@media (min-width: 768px) and (max-width: 1090px) { 
    .sec1 .wrapper .sub1 .subtitle{
    margin-top: -100px;
    }
}


@media screen and (max-width: 769px){
    .promo0624-container .hero-box .kv-slogan .slogan-1 img{
        position: absolute; 
        left: 16%; 
        top: 50%; 
        display: flex; 
        align-items: center; 
        width: 57%; 
        justify-content: center;
        }
        .promo0624-container .hero-box .kv-slogan{
            top:15%
        }
}

.table-bg{
    background-color: #fc3522;
}
@media (min-width: 769px) and (max-width: 769px) { 

    .promo0624-container .hero-box .kv-slogan{
        top:26%
    }
    .promo0624-container .hero-box .model0217{ 
        position: absolute; 
        left: 32%; 
        top: 5%; 
        display: flex; 
        align-items: center; 
        width: 39%; 
        justify-content: center;
     }
}

@media (min-width: 768px) and (max-width: 768px) { 
    .sec1 .wrapper .sub1 .subtitle{
        margin-top: -10px;
    }
    .promo0624-container .hero-box .kv-slogan{
        top: 35%;
    }
}
/* 左右滑動區塊 - 可應用在 swiper-container.match */
.swiper-container.match {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding-bottom: 10px;
}

.swiper-slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 80%;
  max-width: 330px;
  background: white;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .swiper-container.match {
    overflow: visible;
    scroll-snap-type: none;
    justify-content: center;
  }
}

/* 滾動容器 */
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding: 0 16px 10px;
  justify-content: flex-start;
}

/* 卡片樣式 */
.scroll-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 80%;
  max-width: 320px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 桌機時改為自動換行置中 */
@media (min-width: 768px) {
  .scroll-container {
    overflow: visible;
    scroll-snap-type: none;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0; /* 可選：去掉 padding，讓它真的正中 */
  }

  .scroll-slide {
    width: 300px;
  }
}

.scroll-container.easy {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding: 0 16px 10px;
  justify-content: flex-start;
}

.scroll-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 80%;
  max-width: 320px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 桌機置中 */
@media (min-width: 768px) {
  .scroll-container.easy {
    overflow: visible;
    scroll-snap-type: none;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
  }

  .scroll-slide {
    width: 300px;
  }
}

.promo0624-container .events-content dl dt{
    color: white;
}