@charset "UTF-8";
img {
  display: block;
}

.sec4 li img{
  width: 20%;
}

.wrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/kv_bg_260116.webp) no-repeat;
  background-size: contain;
  background-position: top center;
  background-color: #000000;
  overflow-x: hidden;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}


.sec4 .container .content{
  position: relative;
  border: 2px solid #fffa00;
}

.sec4 .container .content .sec4-content{
  position: absolute;
  top: 2%;
  height: 1500px;

}

.sec4 .container .content .sec4-content h2{
  color: #fffa00;
  font-weight: 600;
  text-align: left;
  font-size: 38px;
  margin: 1vw 0 0 2vw;
}

h2 {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 25px;
}
h2 span.forPC {
  display: inline-block;
}

h3 {
  font-size: 30px;
  font-weight: 600;
}

.forM {
  display: none;
}

.forPC {
  display: block;
}

.dazn {
  display: inline-block;
  vertical-align: text-bottom;
}
.dazn.type1 {
  width: 78px;
  /* 1. 設定高度跟文字一樣大 */
    height: 1.6em; 
    
    /* 2. 寬度設為 auto，讓它依照圖片原本比例縮放 (才不會變形) */
    width: auto; 
    
    /* 3. 如果之前有寫 aspect-ratio，這裡要取消掉，不然會衝突 */
    aspect-ratio: auto; 
    
    /* 4. 微調垂直對齊 (通常圖片預設會稍微偏上或偏下) */
    vertical-align: text-bottom; /* 或試試 middle */
    
    /* 5. 確保圖片內容完整顯示 */
    object-fit: contain;
}
.dazn.type2 {
  width: 72px;
}
.dazn.forM {
  display: none;
}

.kv {
  position: relative;
  width: 100%;
  aspect-ratio: 1440/600;
}
.kv .player {
  display: none;
  position: absolute;
  width: 100%;
}
.kv .title {
  position: absolute;
  -webkit-transform: translateX(-24px);
          transform: translateX(-24px);
  display: block;
  width: 100%;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}


.sec2 {
  padding-bottom: 70px;
}
.sec2 .container {
  position: relative;
}
.sec2 .feature_list .feature .smallwords{
   font-size: 12px;
}

.sec2 .feature_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.sec2 .feature_list .feature {
  width: calc((100% - 40px) / 3);
  max-width: 390px;
  aspect-ratio: 390/400;
  background: #000;
  padding: 20px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #fffa00;
}
.sec2 .feature_list .feature h3 {
  color: #fffa00;
  text-align: center;
  margin-bottom: 10px;
}
.sec2 .feature_list .feature:nth-child(1) {
  background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec2_bg1_260116.webp);
}
.sec2 .feature_list .feature:nth-child(2) {
  background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec2_bg2.webp);
}
.sec2 .feature_list .feature:nth-child(2) .check_list {
  width: 200px;
}
.sec2 .feature_list .feature:nth-child(3) {
  background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec2_bg3.webp);
}
.sec2 .feature_list .feature .check_list {
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
}
.sec2 .feature_list .feature .check_list li {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  padding-left: 20px;
}
.sec2 .feature_list .feature .check_list li::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/icon-check.webp) no-repeat;
  background-size: contain;
  background-position: center;
}

.sec3 {
  padding-bottom: 70px;
}
.sec3 .event_list .event {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  aspect-ratio: 1200/240;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 20px;
}
.sec3 .event_list .event > div {
  width: 38%;
}
.sec3 .event_list .event .text {
  padding: 36px;
}

.sec3 .event_list .event .text2 {
/* 1. 讓裡面的 img 和 h3 變成橫排 */
    display: flex;       
    align-items: center; /* 垂直置中 */
    /* 2. 讓這整組東西靠到最右邊 (如果父層也是 flex) */
    margin-left: auto;   
}

.sec3 .event_list .event .text2 img {
    margin-right: 15px; /* 圖片右邊推開一點距離 */
    width: 104px;       /* 確保圖片大小 */
    height: auto;
}

.sec3 .event_list .event .text2 h3{
color:#fffa00 ;
margin: 0;
font-size: 30px;
}

.sec3 .event_list .event .text h3 {
  font-size: 30px;
  color: #fffa00;
  margin-bottom: 5px;
}
.sec3 .event_list .event .text p {
  font-size: 22px;
  font-weight: 500;
  color: #fff;
}
.sec3 .event_list .event .text p span {
  color: white;
  margin-right: 5px;
}


.sec3 .event_list .event:nth-child(1) {
  background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec3_bg1_260116.webp);
  background-position: right center;
  border: 2px solid #fffa00;
}
.sec3 .event_list .event:nth-child(2) {
  background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec3_bg2_260116.webp);
  background-position: right center;
  border: 2px solid #fffa00;
  display: flex;         /* 啟用彈性排版 */
  flex-direction: row;   /* 橫向排列 (預設就是左到右) */
  align-items: center;   /* 垂直置中對齊 */
  justify-content: flex-start; /* 整組靠左對齊 */
}



.sec3 .event_list .event:nth-child(2) .text2 {
    /* 關鍵：把左邊空間全部推開，自己就會跑去最右邊 */
    margin-left: auto; 
    
    /* 建議加一點右邊距離，不要貼太死 */
    padding-right: 4vw; 
    
    /* 確保文字本身也是靠右對齊 (視需求) */
    text-align: right;
}

.sec3 .event_list .event:nth-child(3) {
  background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec3_bg3_260116.webp);
  background-position: right center;
  border: 2px solid #fffa00;
}
.sec3 .event_list .event .icon {
        padding-left: 4vw;
 }
.br-m{
  display: none;
}
.sec4 {
  padding-bottom: 70px;
}
.sec4 .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  aspect-ratio: 1200/660;
  background: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec4_bg_260116.webp) no-repeat;
  background-size: cover;
  border-radius: 20px;
  padding: 20px 0 36px;
  background-size: contain; /* 保持完整顯示整張圖 */
  background-position: center;
  overflow: hidden;
}
.sec4 .content > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -ms-flex-line-pack: start;
      align-content: start;
  width: 100%;
}
.sec4 .bar h2 {
  margin: 0;
}
.sec4 .bar1 {
  width: 58.8vw;
  max-width: 1000px;
}

.sec4 .text {
  padding-left: 12px;
  margin: 2vw 0 2vw 2vw;
  border-left: 7px solid #fffa00;
;
}
.sec4 .text h3 {
  font-weight: 600;
  color: #fff;
}
.sec4 .text h3 sub {
  font-size: 36.8%;
  vertical-align: middle;
}
.sec4 .text .yellow {
  color: #fffa00;
}
.sec4 .step_list {
  width: 90%;
  max-width: 1200px;
  margin: 60px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
}
.sec4 .step_list li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 325px;
  color: #fff;
  background: rgba(13, 13, 13, 0.8);
  border-radius: 20px;
  border: 2px solid #fff;
  padding: 26px 0 18px;
  -webkit-box-shadow: 0 0 7px rgba(255, 248, 63, 0.46);
          box-shadow: 0 0 7px rgba(255, 248, 63, 0.46);
}
.sec4 .step_list li .num {
  position: absolute;
  top: -24px;
  font-size: 30px;
  font-weight: 600;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  line-height: 48px;
  text-align: center;
  color: #0d0d0d;
  background: #fffa00;
;
}
.sec4 .step_list li h3 {
  color: #fffa00;
;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  h2 {
    font-size: 3.5vw;
  }
  h3 {
    font-size: 2.5vw;
  }
  .dazn {
    display: inline-block;
    vertical-align: text-bottom;
  }
  .dazn.type1 {
    width: 6.5vw !important;
    height: auto !important;
  }
  .dazn.type2 {
    width: 8.33vw !important;
    height: auto !important;
  }
  
 
  .sec2 .feature_list .feature {
    aspect-ratio: 39/50;
  }
  .sec2 .feature_list .feature .check_list li {
    font-size: 1.45vw;
  }
  .sec3 .event_list .event {
    aspect-ratio: 1200/300;
  }
  .sec3 .event_list .event .text h3 {
    font-size: 3.166vw;
  }
  .sec3 .event_list .event .text p {
    font-size: 2.5vw;
  }
  .sec3 .event_list .event .icon{
    padding-left: 4vw;
  }

  .sec3 .event_list .event:nth-child(1) {
    background-position: right center;
  }
  .sec3 .event_list .event:nth-child(2) {
    background-position: center;
  }
  .sec3 .event_list .event:nth-child(3) {
    background-position: right center;
  }
  .sec4 .content {
    aspect-ratio: 1200/683;
    padding: 0;
  }
  .sec4 .text {
    margin: 1vw 0 1vw 2vw;
  }
  .sec4 .step_list {
    width: 90%;
    max-width: 1060px;
    margin: 5vw auto 0;
  }
  .sec4 .step_list li {
    width: 32%;
    padding: 2.16vw 0 1vw;
  }
  .sec4 .step_list li .num {
    top: -2vw;
    width: 3vw;
    height: 3vw;
    line-height: 3vw;
    font-size: 1.6vw;
  }
  .sec4 .step_list li img {
    width: auto;
    height: 4.66vw;
  }

  .sec4 img{
    max-width: 80%;
  }

  .sec4 .container .content .sec4-content h2{
  font-size: 30px;
}
}
@media screen and (max-width: 820px) {
  .forM {
    display: block;
  }

  .wrapper .kv .player .forM{
    width: 100%;
  }

  .title .forM{
 width: 100%;
  }

  .forPC {
    display: none;
  }
  h2 {
    font-size: 8vw;
  }
  h2 span.forPC {
    display: none;
  }
  .wrapper {
    background: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/kv_m_bg_260116.webp) no-repeat;
    background-size: contain;
    background-position: top center;
    background-color: #000000;
  }
  .dazn {
    display: inline-block;
    vertical-align: text-bottom;
  }
  .dazn.type1 {
    width: 15.9vw !important;
    height: auto !important;
    margin-bottom: 0;
  }
  .dazn.type2 {
    width: 8.33vw !important;
    height: auto !important;
  }
  .dazn.type3 {
    width: 14.19vw !important;
  }
  .dazn.type4 {
    width: 16vw !important;
  }
  .dazn.forM {
    display: inline-block;
  }
  .dazn.forPC {
    display: none;
  }
  .kv {
    aspect-ratio: 750/930;
    margin-bottom: -10vw;
  }
  .kv .player {
    width: 100%;
  }

  .kv .logo {
    left: 10vw;
    top: 8.5vw;
    width: 80.3vw;
    -webkit-transform: none;
            transform: none;
  }
  .sec2 {
    padding-bottom: 8.5vw;
  }

  .sec2 .feature_list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .sec2 .feature_list .feature {
    width: 100%;
    max-width: none;
    aspect-ratio: 670/820;
    padding: 6.66vw;
    margin-bottom: 4.5vw;
    border-radius: 2.5vw;
  }
  .sec2 .feature_list .feature h3 {
    font-size: 8vw;
  }
  .sec2 .feature_list .feature .check_list {
    width: 93%;
    max-width: none;
  }
  .sec2 .feature_list .feature .check_list li {
    font-size: 4vw;
    padding-left: 4.5vw;
    line-height: 1.8;
  }
  .sec2 .feature_list .feature .check_list li::after {
    width: 4.5vw;
    height: 4.5vw;
  }
  .sec2 .feature_list .feature:nth-child(2) .check_list {
    width: 75%;
    max-width: none;
  }
  .sec2 .feature_list .feature:nth-child(3) {
    margin-bottom: 0;
  }
  .sec2 .feature_list .feature:nth-child(3) .check_list {
    width: 75%;
  }

  .sec2 .feature_list .feature .smallwords {
    font-size: 3vw;
}

.sec3 .event_list .event:nth-child(2){
padding-left: 45vw;
}

  .sec3 {
    padding-bottom: 8.5vw;
  }
  .sec3 .event_list .event {
    aspect-ratio: 670/240;
    border-radius: 2.5vw;
    background-size: contain;
    background-position: center;
  }
  .sec3 .event_list .event:nth-child(1) {
    background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec3_bg1_m_0602.webp);
    overflow: hidden;
    border: 2px solid #fffa00;
  }
  .sec3 .event_list .event:nth-child(2) {
    background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec3_bg2_m_260116.webp);
    overflow: hidden;
    border: 2px solid #fffa00;
  }
  .sec3 .event_list .event:nth-child(2) .text {
    width: 58%;
  }
  .sec3 .event_list .event:nth-child(3) {
    background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec3_bg3_m_260116.webp);
    overflow: hidden;
    border: 2px solid #fffa00;
  }
  .sec3 .event_list .event .text {
    width: 100%;
    padding: 4vw;
  }
  .sec3 .event_list .event .text h3 {
    font-size: 5vw;
    line-height: 1.2;
    margin-bottom: 0;
  }
  .sec3 .event_list .event .text p {
    font-size: 2.8vw;
    margin-top: 1vw;
  }
.sec3 .event_list .event .text2 img {
    margin-right: 15px; /* 圖片右邊推開一點距離 */
    width: 40%;       /* 確保圖片大小 */
    height: auto;
}

.sec3 .event_list .event .text2 h3 {
font-size: 5vw;
}

.sec3 .event_list .event > div {
width: auto;
}

.sec3 .event_list .event:nth-child(3) .icon {
  width: 15vw;       /* 大約是螢幕寬度的 15%，你可以依需求調整 */
  max-width: 60px;   /* 設定一個上限，避免太大 */
  margin-right: 0vw; /* 間距也稍微縮小一點 */
 }

 .sec3 .event_list .event:nth-child(1) .icon {
  width: 34vw;       /* 大約是螢幕寬度的 15%，你可以依需求調整 */
  max-width: 76px;   /* 設定一個上限，避免太大 */
  margin-right: 0vw; /* 間距也稍微縮小一點 */
 }

 .sec3 .event_list .event .text p{
    color: white;
    margin-right: 5px;
    max-width: 120px;
}

.br-m{
  display: block;
}

  .sec4 {
    padding-bottom: 8.5vw;
  }
  .sec4 .content {
    display: block;
    aspect-ratio: 670/1650;
    background: url(https://www.homeplus.net.tw/cable/images/manual_upload/dazn-vas/sec4_bg_m_260116.webp) no-repeat;
    background-size: cover;
    border-radius: 2.5vw;
    overflow: hidden;
    background-position: center;
  }
  .sec4 .content > div {
    padding-top: 56vw;
  }
  .sec4 .bar {
    width: 100%;
  }
  .sec4 .bar h2 {
    font-size: 6.66vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #fffa00;
  }
  .sec4 .bar h2 span {
    color: #ec0000;
  }
  .sec4 .bar2 h2 {
    line-height: 2;
  }
  .sec4 .text {
    border: 0;
  }
  .sec4 .text h3 {
    font-size: 5.33vw;
    text-align: center;
    margin-bottom: 5vw;
  }
  .sec4 .text h3:nth-child(1) {
    margin-bottom: 5.6vw;
    margin-top: 5vw;
  }
  .sec4 .text h3:nth-child(2) {
    color: white;
  }
  .sec4 .text h3:nth-child(2) sub {
    color: #fff;
  }
  .sec4 .step_list {
    display: none;
  }
  .sec4 .mySwiper {
    margin: 8.66vw;
  }
  .sec4 .mySwiper .dazn.type1 {
    width: 14.1vw !important;
    margin: 0;
  }
  .sec4 .swiper-slide {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #fff;
    background: rgba(13, 13, 13, 0.8);
    border: 2px solid #fff;
    padding: 7.6vw 0 1vw;
    -webkit-box-shadow: 0 0 7px rgba(255, 248, 63, 0.46);
            box-shadow: 0 0 7px rgba(255, 248, 63, 0.46);
    width: 75%;
    border-radius: 2.5vw;
    height: 70%;
  }
  .sec4 .swiper-slide .num {
    position: absolute;
    top: -4.33vw;
    font-weight: 600;
    display: block;
    border-radius: 50%;
    font-size: 5.33vw;
    font-weight: 600;
    width: 8.66vw;
    height: 8.66vw;
    line-height: 8.66vw;
    text-align: center;
    color: #0d0d0d;
    background: #fffa00;
;
  }
  .sec4 .swiper-slide h3 {
    font-size: 5.33vw;
    color: #fffa00;
;
    text-align: center;
  }
  .sec4 .swiper-slide img {
    height: 60px;
    margin-bottom: 0;
    width: 60px;
  }

  .sec4 .container .content .sec4-content h2 {
    color: #fffa00;
    font-weight: 600;
    text-align: center;
    font-size: 6vw;
    margin: 1vw 0 0 2vw;
}
}
.swiper-pagination {
  position: static;
  display: block;
  margin-top: 2.5vw;
}

/* 讓圓點變大 */
.swiper-pagination-bullet {
  width: 3.33vw;
  height: 3.33vw;
  background: #fff;
  opacity: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/* 當前頁面圓點 */
.swiper-pagination-bullet-active {
  background: #fffa00;
;
  opacity: 1;
}

.ani {
  display: none !important;
}
.ani.animated {
  display: block !important;
}

@import url(https://fonts.googleapis.com/css?family=Lato:400,400i,700);
.wrapper {
  font-family: Lato, sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.sec5 {
  background-color:none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 10px 0;
}

.faqwrapper {
  width: 60%;
}

.sec5 h1 {
  margin-bottom: 20px;
  color: white;
}

.faqcontainer {
  background-color: rgb(69, 69, 69);
  color:white;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgb(0,0,0,0.25);
  margin: 20px 0;
}

.sec5 .question {
  font-weight: 600;
  padding: 20px 80px 20px 20px;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sec5 .question h2{
    font-size: 1.2rem;
    margin-bottom: 0px;
    text-align: left;
}


.question::after {
  content: "\002B";
  font-size: 2.2rem;
  position: absolute;
  right: 20px;
  transition: 0.2s;
  color: #fffa00;
;
}

.question.active::after {
  transform: rotate(45deg);
}

.answercont {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s;
}

.answer {
  padding: 0 20px 20px;
  line-height: 1.5rem;
}

.question.active + .answercont {
}

@media screen and (max-width: 790px){
  .faqwrapper {
  width: 80%;
}
}