@charset "UTF-8";

.catv-promo-container{ cursor: default; width: 100%; height: auto; background-color: #312e3b; position: relative;}

.catv-promo-container .wrapper{ max-width: 1440px; height: 100%; position: relative; display: flex; margin: 0 auto; justify-content:center; flex-direction:column; padding: 2.5%;}

.catv-promo-container .text-hidden{ font-size: 0; line-height: 0; z-index: -999;}

.catv-promo-container .kv-box{ background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/catv-promo/kv.webp); position: relative; background-size: cover; background-position: top center; background-repeat: no-repeat; height: 40vw;}

.catv-promo-container .kv-title{ position: absolute; left: 0; top: 10%; width: 40vw; height: fit-content; display: block;}

.catv-promo-container .sec-1{ background-color: #431acc; width: 100%; margin-top: -15%; position: relative; clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);}
.catv-promo-container .sec-1 .wrapper{ padding: 5%;}

.catv-promo-container .title-h2{ font-size: 3rem; color: #fff; text-shadow: 0 0 10px rgba(0,0,0, .5); margin-bottom:  30px; font-weight: 700; text-align: center;}
.catv-promo-container .title-h3{ font-size: 2rem; color: #fff; text-shadow: 0 0 10px rgba(0,0,0, .5); margin-bottom:  30px; font-weight: 700;}

.catv-promo-container .yellow{ color: #fdff6c;}
.catv-promo-container .white{ color: #fff;}
.catv-promo-container .pink{ color: #ff0066;}
.catv-promo-container .mb-show{ display: none;}

.catv-promo-container .feature-box{ display: flex; flex-direction: column; width: 100%; align-items:center; margin-bottom: 50px;}

.catv-promo-container .feature-content{ width: 100%; margin: 0 5%; box-sizing: border-box;}
.catv-promo-container .feature-content .feature-item{ width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; align-items:start;}
.catv-promo-container .feature-content .feature-item .feature-list{ background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .5); display: flex; border-radius: 80px 20px 20px 20px; overflow: hidden; justify-content:center;}
.catv-promo-container .feature-content .feature-item .feature-list:nth-child(2){ margin-top: 40px;}
.catv-promo-container .feature-content .feature-item .feature-list .pic-box{ max-height: 270px; overflow: hidden;}
.catv-promo-container .feature-content .feature-item .feature-list .pic-box img{ width: 100%;}
.catv-promo-container .feature-content .feature-item .feature-list .text-box{ padding: 20px 0;}
.catv-promo-container .feature-content .feature-item .feature-list .text-box p{ font-size: 1.5rem; font-weight: 700; line-height: 140%; text-align: center;}

.catv-promo-container .plan-box{ display: flex; flex-direction: column; width: 100%; align-items: center; margin-bottom: 50px;}

.catv-promo-container .plan-table{ width: 100%;}

.catv-promo-container .table-box{ width: 100%;}
.catv-promo-container .table-box tr td{ border-right: 4px solid #431acc; border-bottom: 4px solid #431acc; padding: 10px 20px;}
.catv-promo-container .table-box tr td p{ font-size: 1.5rem; font-weight: 700;}
.catv-promo-container .table-box .note{ font-size: 1rem; font-weight: 500;}
.catv-promo-container .table-box .height-50{ height: 5vw;}
.catv-promo-container .table-box .pink{ font-size: 150%;}
.catv-promo-container .table-box .pink small{ font-size: 60%;}
.catv-promo-container .table-box .th-width{ width: 20%;}

.catv-promo-container .store-box{ display: flex; width: 100%; flex-direction: column; align-items:center;}
.catv-promo-container .store-box .title-h2{ margin-bottom: 5px;}

.catv-promo-container .qa-box{ display: flex; width: 100%; flex-direction: column; align-items:center; margin-bottom: 20px;}

/* div-4 線上申辦 流程*/
.catv-promo-container .div-4-step-box{ width: 100%; color: #fff; display: inline-flex; box-sizing: border-box; }
.catv-promo-container .div-4-step-box .step-main{ display: inline-flex; flex-direction: column; align-items: center; padding: 1rem 0; margin: 0; border-radius: 80px 0 0 20px; width: 20%; box-sizing: border-box;}
.catv-promo-container .div-4-step-box .step-main:first-child{ padding-left: 1rem;}
.catv-promo-container .div-4-step-box .step-main:last-child{ padding-right: 1rem;}
.catv-promo-container .div-4-step-box .step-main dl{ margin-bottom: 0; padding: 0 .5rem ;}
.catv-promo-container .div-4-step-box .step-main dl dt{ font-size: 1.8rem; margin: .5rem 0; font-weight: 700;}
.catv-promo-container .div-4-step-box .step-main dl dd{ font-size: 1rem;}
.catv-promo-container .div-4-step-box .step-main dl dd span{ display: block;}
.catv-promo-container .div-4-step-box .step-pic{ width: 155px; height: auto;}
.catv-promo-container .div-4-step-box .icon-1, .catv-promo-container .div-4-step-box .icon-2{ padding-top: 8.4%; width: 8%;}
.catv-promo-container .div-4-step-box .icon-1 img, .catv-promo-container .div-4-step-box .icon-2 img{ position: relative; z-index: 1;}
.catv-promo-container .div-4-step-box .icon-1{ position: relative;}
.catv-promo-container .div-4-step-box .icon{ width: 1.5%; padding-top: 9.5%;}

.catv-promo-container .div-4-step-box ol li{ list-style: auto;}
.catv-promo-container .div-4-step-box ul, .catv-promo-container .div-4-step-box ol{ text-align: left; margin-left: 1rem; display: inline-flex; flex-direction: column;}
.catv-promo-container .div-4-step-box ul li{ list-style: disc;}
.catv-promo-container .div-4-step-box ul li::marker{ color: #4b4aa4;}
  @media screen and (max-width: 1440px) {
.catv-promo-container .div-4-step-box .step-pic{ width: 120px; height: auto;}
  }

  @media screen and (max-width: 768px) {
  .catv-promo-container .div-4-step-box{ flex-direction: column; align-items: center;}
  .catv-promo-container .div-4-step-box .step-main{ flex-direction: row; width: 100%; padding:0.5rem 2rem 0.5rem 2.5rem; justify-content: flex-start;}
  .catv-promo-container .div-4-step-box .step-main:first-child{ padding: 0 0.5rem 0.5rem 2.5rem;}
  .catv-promo-container .div-4-step-box .step-main:last-child{ padding-bottom: 0;}
  .catv-promo-container .div-4-step-box .step-main dl{ text-align: left; margin: 0; padding: 0 0 0 1rem;}
  .catv-promo-container .div-4-step-box .step-main dl dt{ margin: 0; font-size: 1.2rem;}
  .catv-promo-container .div-4-step-box .step-main dl dd{ font-size: .9rem;}
  .catv-promo-container .div-4-step-box .icon-1, .catv-promo-container .div-4-step-box .icon-2{ padding-top: 0; width: 100%; text-align: center;}
  .catv-promo-container .div-4-step-box .icon-1 img, .catv-promo-container .div-4-step-box .icon-2 img{ width: 15%;}
  .catv-promo-container .div-4-step-box .icon-1::after{ clip-path: polygon(0 0, 100% 0, 100% 49%, 0 50%); left:0px; top:-1px}
  .catv-promo-container .div-4-step-box .icon{ padding-top: 0; width: 3%;}
  .catv-promo-container .div-4-step-box .step-pic{ width:80px;}
}

/*QA_start*/
.qa-content{ width: 100%; padding: 1.5rem; box-sizing: border-box; color: #fff;}
.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; cursor: pointer; font-size: 1.2rem; color: #fff; 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 2px solid; 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;}

@media screen and (max-width: 768px) {
  .qa-content{ margin-bottom: 25px; width: 100%; margin: 0 5%;}
  .qa-content{ padding: 0;}
  .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;}
}


@media screen and (max-width: 1440px) {
.catv-promo-container .wrapper{ padding: 5%;}
.catv-promo-container .sec-1 .wrapper{ padding: 10% 5%;}
.catv-promo-container .sec-2 .wrapper{ padding-top: 0;}
.catv-promo-container .kv-title{ left: 10%; top: 10%; width: 40vw;}
.catv-promo-container .kv-box{ background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/catv-promo/kv.webp); background-size: cover; height: 55vw; background-attachment:unset;}
.catv-promo-container .kv-title{ width: 45vw;}
.catv-promo-container .feature-content .feature-item{ gap: 30px; }
.catv-promo-container .sec-1{ margin-top: -25%;}
.catv-promo-container .table-box tr td{ padding: 5px 10px;}
.catv-promo-container .table-box tr td p{ font-size: 1.25rem;}
}

@media screen and (max-width: 768px) {
.catv-promo-container .wrapper{ max-width: 90%; margin: 0 auto;}
.catv-promo-container .sec-1{ margin-top: -30%;}
.catv-promo-container .sec-1 .wrapper{ padding: 25% 0 25%;}
.catv-promo-container .kv-box{ background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/catv-promo/m-kv.webp); background-size: cover; height: 125vw; background-attachment:unset;}
.catv-promo-container .kv-title{ position: absolute; left: 0; top: 5%; width:90vw;}
.catv-promo-container .title-h2{ font-size: 1.8rem; margin-bottom: 20px;}
.catv-promo-container .title-h3{ font-size: 1.3rem; margin-bottom: 20px;}

.catv-promo-container .mb-show{ display: block;}

.catv-promo-container .feature-content{overflow-y: hidden; overflow-x: scroll;}
.catv-promo-container .feature-content .feature-item{ width: 795px; gap: 20px;}
.catv-promo-container .feature-content .feature-item .feature-list{ width: 250px;}
.catv-promo-container .feature-content .feature-item .feature-list:nth-child(2){ margin-top: 0;}
.catv-promo-container .feature-content .feature-item .feature-list .text-box p{ font-size: 1.2rem;}

.catv-promo-container .table-box tr td p{ font-size: 1rem;}
.catv-promo-container .table-box .white{ font-size: .8rem;}
.catv-promo-container .table-box .height-50{ height: 23vw;}
.catv-promo-container .table-box .th-width{ width: 25%;}


}