@charset "UTF-8";
/*20250421短約案css*/

.short_term_content{ display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow: hidden; background-color: #ffe64e;}

.short_term_content .wrapper{display: flex; width: 100%; margin: 0 auto; padding: 0 10%; justify-content: center; flex-direction:column; align-items:center; text-align: center; box-sizing: border-box; }
.short_term_content picture{ display: block; width: 100%;}

.short_term_content h1, .short_term_content h2{font-size: 3rem; font-weight: 700; color: black;}
.short_term_content h1 span,.short_term_content h2 span, .short_term_content h3 span, .short_term_content h4 span{display: inline;}

.short_term_content h3, .short_term_content h4{font-size: 2rem; font-weight: 500; color: #fff;}
.short_term_content h4 i, .short_term_content h3 i{ font-style: normal;}

.short_term_content .sec-2{ padding: 1% 0;}
.short_term_content .sec-4{ background-color: #fff87d; padding: 2.5% 0;}
.short_term_content .sec-4 h1, .short_term_content .sec-4 h2, .short_term_content .sec-4 h3, .short_term_content .sec-4 h4,
.short_term_content .sec-5 h1, .short_term_content .sec-5 h2, .short_term_content .sec-5 h3, .short_term_content .sec-5 h4{ color: #0d2065;}

.short_term_content .ad-box{ display: inline-flex; flex-direction: row; box-sizing: border-box; width: 100%; margin: 0; padding: 0; justify-content:space-evenly;}
.short_term_content .ad-box li{ margin: 15px; list-style: none; transition: all 5s ease-out; }
.short_term_content .ad-box li a{ display: block;  overflow: hidden; transition: .3s;}
.short_term_content .ad-box li a:hover{ transform:scale(1.02);}


.short_term_box{display: inline-flex; justify-content:center; flex-direction: column; width: 100%; margin: 0 auto; cursor: default;}
.short_term{ display: inline-flex; flex-direction: row; justify-content:center; margin-bottom: 30px;}
.short_term a{display: inline-flex; align-items:center;justify-content:center; font-size:  20px; padding: 15px 30px; border-radius: 10px; background-color: #fc9603; box-shadow: 0 5px #e08207; text-decoration: none; color: #fff; text-align: center; box-sizing: border-box;}
.short_term a i{ width: 15px; height: 15px; margin-left: .5rem; content: ""; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/short-term/more-btn-i.svg); background-color: inherit; background-repeat: no-repeat; background-position: right center; display: inline-block;}
.short_term a:hover, .short_term a:focus{ background-color: #ffa022; transform: translateY(-2px); box-shadow: 0 8px #e08207;}
.short_term a:active{ box-shadow: 0; transform: translateY(1px); box-shadow: 0 4px #e08207;}
.short_term a:first-child{ margin-right:  50px;}
.short_term_note{ font-size: 16px; line-height: 140%; color: #fff; text-align: center; padding: 0; margin: 0;}
.short_term_note a{ text-decoration: underline; color: inherit; display: inline-block;}

.speedtest-ad{ width: 100%; margin: 0 0 3%; display: inline-block; transition: all 5s ease-out;}
.speedtest-ad a{display: block;  overflow: hidden; transition: .3s;}
.speedtest-ad a:hover{transform:scale(1.02);}

.short_term_content .terms-box{ width: 100%; margin: 0 0 5%; background-color: #fff;}

/*kv*/
.short_term_content .kv-box{ width: 100%; height: auto; position: relative;}
.short_term_content .kv-box .kv-slogan{ width: 100%; position: absolute; left: 0; top: 0; width: 100%; z-index: 1;}
.short_term_content .kv-box .kv-stamp{ width:10%; top: 63%; left: 10%; z-index: 2; position: absolute; }

/*table*/
.offer-box{ width: 100%; margin: 0; box-sizing: border-box; padding: 1% 0;}
.offer-box .offer-table{margin: 0 auto; padding:0; width: 100%; text-align: center;}
.offer-box .offer-table table{ border-top: 0px; width: 100%; border-spacing: 0; margin: 0 auto; border-collapse: separate; border-radius: 0; font-size: 1rem;}

.offer-box .offer-table table tr:nth-child(2) th:first-child, .offer-box .offer-table table tr td:first-child{ box-shadow: 2px 0 5px rgb(0, 0, 0, .1);}
.offer-box .offer-table table tr:first-child td:first-child{box-shadow: none; border-left: 0;}
.offer-box .offer-table table tr:first-child {border-left: 0; border-right: 0;}
.offer-box .mobile-show{ display: none; text-align: center;}

.offer-box .offer-table table th{ color: #333; border-bottom: solid 1px #c3bd5a; padding: 4px; vertical-align: middle;  text-align: center; font-weight: normal; border-right: solid 1px #c3bd5a;}
.offer-box .offer-table table tr:first-child th{ padding: 4px 4px 0 4px;}
.offer-box .offer-table table tr:nth-child(2) th{ padding: 5px 0;}
.offer-box .offer-table table tr:first-child th:first-child{ font-weight: normal;}
.offer-box .offer-table table tr:first-child th:last-child{ border-right: 0;}
.offer-box .offer-table table tr:last-child th:first-child{ border-bottom: 0px;}
.offer-box .offer-table table tr:last-child td{ border-bottom: 1px solid #c3bd5a;}
.offer-box .offer-table table tr td:last-child{ border-right: 1px solid #c3bd5a;}
.offer-box .offer-table table tr th:first-child, .offer-box .offer-table table tr td:first-child{ border-left: 1px solid #c3bd5a;}
.offer-box .offer-table table tr:last-child p img{ width: auto; height: 12px; vertical-align:baseline; margin-right: 2px;}
.offer-box .offer-table table th span, .table-content table td span{ display: block;}
.offer-box .offer-table table th p{ font-size: 1.4rem;}
.offer-box .offer-table table th:first-child p{ font-size: 1rem;}
.offer-box .offer-table table td{ border-right: solid 1px #c3bd5a; border-bottom: solid 1px #c3bd5a; padding: 8px 4px; font-weight: normal;}
.offer-box .offer-table table tr:first-child td{ border-right: 0px; padding: 2px 0;}
.offer-box .offer-table table .pink{ color: #f7007f;}
.offer-box .offer-table table .sale-deco{ color: white; font-size: .9rem !important; font-weight: 300;}
.offer-box .offer-table table .sale-deco-pink{ color: #fff; font-size: .9rem !important; font-weight: 500; display: inline-block;}
.offer-box .offer-table table .hand-icon{ width: 30px; height: auto; display: inline-block; margin-right: 3px;}
.offer-box .offer-table table .online-deco{ padding: 2px 5px; background-color: #f9ff9f; color: #333; font-size: .8rem; font-weight: 700; border-radius: 2px; display: inline-block;}
.offer-box .offer-table table .price{ font-size: 1.4rem; font-weight: 700;}
.offer-box .offer-table table tr:nth-child(2) th:nth-child(7), .offer-box .offer-table table tr:nth-child(3) td:nth-child(7), .offer-box .offer-table table tr:nth-child(4) td:nth-child(7), .offer-box .offer-table table tr th:last-child, .offer-box .offer-table table tr:nth-child(3) td:last-child, .offer-box .offer-table table tr:nth-child(4) td:last-child{ border-right: 3px solid #f7007f; border-left:3px solid #f7007f ;}
.offer-box .offer-table table tr:nth-child(4) td:last-child{ border-bottom: 3px solid #f7007f;}
.offer-box .offer-table table tr:first-child td:nth-child(5){border-right: 0px solid #f7007f;}
.offer-box .offer-table table tr:first-child td:nth-child(6){border-bottom: 1px solid #a60257;}
.offer-box .offer-table table tr th:last-child{ color: #fff;}

/*note style*/
.note-box{ display: inline-flex; flex-direction: column; width: 100%; margin: 0;}
.note-box ul{ margin:.5rem 0 2rem 1.25rem; color:black;}
.note-box ul li{ font-size: 1rem; list-style: none; text-align: left; margin-left: 1rem;}
.note-box ul li::marker{ color: #ffff03; content: ' • ';}
.note-box ul li:first-child::marker { content: ' * '; color: inherit;}
.note-box ul li span{ color: #f7007f; font-weight: 700;}
.note-box ul li em{ font-style: inherit; color: #ffff03; font-weight: 700;}
.note-box .note-icon{ width: 100%; text-align: center; display: block; }
.note-box .note-icon i{ display: block; margin: 0 auto; width: 100%; position: relative;}
.note-box .note-icon i img{ width: 2.5%; margin: 0 1%; vertical-align: middle;}
.note-box .note-icon i::before{ width: 47%; content: ""; background-color:#c3bd5a; height: 2px; transform:translateY(-50%); display: inline-block;}
.note-box .note-icon i::after{ width: 47%; content: ""; background-color:#c3bd5a; height: 2px; transform:translateY(-50%); display: inline-block;}

/*QA*/
.qa-content{ width: 100%; margin:5% 0 5% 0; background-color: #fff; border-radius: 15px; padding: 1.5rem; box-shadow: 0 1px 10px rgba(0, 95, 92, .2); box-sizing: border-box;}
.qa-content .container-accordion{ display: inline-flex; flex-direction: column; width: 100%;align-items: center;}
.qa-content .container-accordion a{ text-decoration: underline;}
.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%;}
.qa-content .container-accordion .red, .qa-content .container-accordion .container-accordion-content.red{ color: #b60152 !important;}
.qa-content .container-accordion .accordion-navigation{ border-bottom: #bfbfbf 1px dotted; width: 100%; text-align: left; margin-bottom: 1rem; margin-top: 0; padding-bottom: 1rem;}
.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%; transition: 0.3s ease-in !important;}
input[type=radio]:checked+.container-accordion-content{ height: auto; font-size: 1rem; line-height: 140%; margin-left: 0; padding-left:0; padding-bottom: .5rem; padding-top: .5rem;}
input[type=radio]{ display: none;}

/*五星級到府安裝*/
.sec-5{padding: 2.5% 0; background-color: #fff87d;}
.sec-5 .sec-title-green{ text-align: center; font-size: 2rem; text-shadow: 3px 1px #fff; display: inline-block; background:linear-gradient(transparent 40%,rgba(255,255,255,0) 30%, #00fff3 90%,transparent 95%);}
.sec-5 .easy{ box-sizing: border-box; width: 100%;}
.sec-5 .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; box-shadow: 0 1px 5px rgba(0,0,0,.2); }
.sec-5 .easy dl dd{ font-size: 1.2rem; line-height: 140%;}
.sec-5 .easy dl dd:last-child{ margin-bottom: 0;}
.sec-5 .easy dl dd span{ display: block;}
.sec-5 .easy dl:nth-child(2){ margin-top: 40px;  border-radius: 20px 20px 80px 20px;}
.sec-5 .easy dl dd img{ border-radius: 40px 40px 0 0; padding-left: 15px; width: 100%;}
.sec-5 .easy-btn{ display: inline-flex; align-items:center; justify-content:center; font-size: 1rem; padding: .5rem 1.1rem; border: 2px #10998f solid; border-radius: 30px; text-decoration: none; color: #10998f; text-align: center; box-sizing: border-box; transition:box-shadow .15s,transform .15s; width: fit-content; margin-bottom: 2rem;}
.sec-5 .easy-btn i{ width: 15px; height: 15px; margin-left: .5rem; content: ""; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/big-family-oct01/easy-btn-i.svg); background-color: inherit; background-repeat: no-repeat; background-position: right center;}
.sec-5 .easy-btn:hover, .sec-5 .easy-btn:focus{ transform: scale(1.02);}
/*五星級到府安裝 swiper*/
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #00968f;}
.swiper-pagination.easy{ display: none;}

/*2大好禮*/
.sec-3 { width: 100%; box-sizing: border-box; justify-content:space-between;}
.sec-3 .extra{ width: 100%;}

.sec-3 .extra dl .sp-tag{ width: 60px; height: 60px; top: 0; left: 25px; display: block; position: absolute; border-radius: 0 0 30px 30px; background-color: #129a92; padding: 20px 3px;}
.sec-3 .extra dl .sp-tag span{color: #fff; font-size: 1rem; font-weight: 700;}

.sec-3 .extra dl{ background-color: #fff; border-radius: 15px; padding: 1rem 2rem; display: inline-flex; flex-direction: column; text-align: center; margin: 0; box-sizing: border-box; position: relative; }
.sec-3 .extra dl:nth-child(2){ background-color: white;}
.sec-3 .extra dl dt{ min-height: 4.5rem; display: inline-flex; flex-direction: column; justify-content:center; box-sizing: border-box;}
.sec-3 .extra dl dt p{font-size: 1.4rem;}
.sec-3 .extra dl dt img{ width: auto; height: 23px; vertical-align: baseline;}
.sec-3 .extra dl dd{ box-sizing: border-box; display: inline-flex; flex-direction: column;}
.sec-3 .extra dl dd em{ font-style: normal;}
.sec-3 .extra dl dd strong{ font-size: 120%;}
.sec-3 .extra dl dd p{ margin-bottom: .5rem; font-size: 1.2rem; box-sizing: border-box;}
.sec-3 .extra dl dd p:first-child{ min-height: 5rem;}
.sec-3 .extra dl dd p img{ width: 80%;}
.sec-3 .extra .green{color: #008f9d;}
.sec-3 .extra .orange{color: #ff5540;}
/*gift swiper*/
.sec-3 .swiper-pagination.extra{ display: none;}

.sec-3 .note-box ul li::marker{ color: black; content: ' • ';}

@media screen and (max-width: 1100px) {
    /*table*/
    .offer-box .offer-table{ overflow-x: scroll; overflow-y: hidden;}
    .offer-box .offer-table table{ width: 900px;}
    .offer-box .offer-table table tr:nth-child(2) th:first-child, .offer-box .offer-table table tr td:first-child{ position: sticky; left: 0; z-index: 1; font-size: .85rem;}
    .offer-box .offer-table table tr th:first-child, .offer-box .offer-table table tr td:first-child{ border-left: none;}
    .offer-box .mobile-show{ display: block; margin-bottom: 1%; color: black;}
    .offer-box ::-webkit-scrollbar-thumb{ background-color: #c3bd5a !important; border-radius: 0px; outline: 1px solid #c3bd5a;}
    .offer-box ::-webkit-scrollbar{ height: 8px; -webkit-appearance: none;}
    .offer-box ::-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);}
    .offer-box ::-webkit-scrollbar:hover{ height: 12px;}
}
    

@media screen and (max-width: 1024px) {
.short_term a{ font-size: 16px !important;}
.sec-3 .extra dl{ padding: 1rem;}
.sec-3 .extra dl dd p:first-child{ min-height: 4rem;}
.sec-3 .extra dl .sp-tag{ left: 20px; width: 50px; height: 45px; border-radius: 0 0 25px 25px; padding: 10px 0;}
.sec-3 .extra dl .sp-tag span{ font-size: .85rem;}
.sec-3 .extra dl dd p:first-child{ min-height: 3.5rem;}
.sec-3 .extra dl dt p{font-size: 1.2rem;}
.sec-3 .extra dl dd p{ font-size: .9rem;}
.note-box ul li{font-size: .9rem;}
}

@media screen and (max-width: 750px) {
.offer-box .offer-table table .hand-icon{ width: 20px !important;}
.offer-box .offer-table table .sale-deco-pink{ font-size: .8rem !important;}
.short_term_content .kv-box .kv-stamp{ width: 13%; top: 63%; left: 0;}
.short_term_content h1, .short_term_content h2{font-size: 1.6rem;}
.short_term_content h1 span,.short_term_content h2 span, .short_term_content h3 span, .short_term_content h4 span{display: block;}
.short_term_content h3, .short_term_content h4{font-size: 1.3rem; margin-bottom: 10px;}
.short_term_content h4 i, .short_term_content h3 i{ display: none;}
.short_term_content .wrapper{ padding: 0 5%;}
.short_term_box{ flex-direction: column; width: 90%; margin:0 5%;}
.short_term{ flex-direction: column;}
.short_term a{ padding: 10px 20px; }
.short_term a:first-child{ margin-right:  0px; margin-bottom: 25px;}

.short_term_content .ad-box{ flex-direction: column; width: 100%; margin: 0; padding: 0; align-items:center;}
.short_term_content .ad-box li{ margin:0 0 10px 0;}
.short_term_content .ad-box li:last-child{ margin-bottom: 0;}

/*kv*/
.short_term_content .kv-box .kv-main{ flex-direction: column; top: 45%; left: 50%; width: 100%;}
.short_term_content .kv-box .kv-main .kv-slogan{ width: 100%; margin-left: 0;}
.short_term_content .kv-box .kv-main .kv-model{ width: 100%; margin-left: 0; margin-top: -17.5%;}
.short_term_content .kv-box .kv-main .kv-sp{ margin-left: 2%;}

/*note*/
.note-box ul li{ font-size: .85rem;}
.note-box .note-icon i img{ width: 8%; margin: 0 2%;}
.note-box .note-icon i::before{ width: 40%;}
.note-box .note-icon i::after{ width: 40%;}

/*QA*/
.qa-content{ padding: 1rem; margin-top: 10%;}
.qa-content .container-accordion label{font-size: 1rem;}
input[type=radio]:checked+.container-accordion-content{ font-size: .9rem;}
.container-accordion .container-accordion-content{ font-size: .9rem;}

/*table*/
.offer-box{ padding: 2.5% 0; margin: 0 5%;}
.offer-box .offer-box-white{ padding: 0 5%;}
.offer-box .offer-table table .price{ font-size: 1.2rem;}
.offer-box .extra-box{ padding: 5%;}
.offer-box .subtitle{ margin-bottom: 20px;}
.offer-box .offer-table table{ width: 800px;}
.offer-box .offer-table table th p{ font-size: 1.2rem;}
.offer-box .offer-table table .pink-big{ font-size: 1rem;}
.offer-box .offer-table table, .offer-box .offer-table table td p, .offer-box .offer-table table th:first-child p{ font-size: .9rem;}
.offer-box .offer-table table th, .offer-box .offer-table table td{ padding: 6px;}
.offer-box .offer-table table tr:nth-child(2) th:first-child{ width: 12% !important;}
.offer-box .offer-table table tr td:first-child, .offer-box .offer-table table tr:nth-child(2) th:first-child, .offer-box .offer-table table tr td:first-child p{ font-size: .75rem;}

/*五星到府安裝*/
.sec-5{padding: 5% 0;}
.sec-5 .easy dl:nth-child(2){ margin-top: 0;}
.sec-5 .easy dl{ margin-bottom: 10%;}

/*五星級到府安裝 swiper*/
.swiper-pagination.easy{ display: block;}

/*2大好禮*/

/*gift swiper*/
.sec-3 .swiper-pagination.extra{ display: block;}

.note-box ul{ margin-left: 0;}

}

@media screen and (max-width: 400px) {
.short_term_note{ font-size: 15px !important;}
.short_term a{ font-size: 15px !important;}

}

/* AD */
.AD-picture{
    transition:0.24s;
}
.AD-picture:hover {
    transform: scale(1.02);
}