@charset "UTF-8";
.wrapper img {
    width: 100%;
    height: auto;
}
.wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    color: #fff;
    background-color: #0f2059;
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1440px auto;
    cursor: default;
}
.wrapper .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.wrapper .sec {
    padding: 3.25em 0;
}
/*****************************************************/
.wrapper .text-hidden {
    font-size: 0px;
    text-indent: -9999;
    line-height: 0;
    opacity: 0;
}
.wrapper h2 {
    text-align: center;
    font-size: 3.125em;
    font-weight: bold;
    line-height: 1.25;
}
.wrapper picture {
    display: block;
}
.wrapper .hightlight {
    color: #ffd741;
}
.wrapper small {
    display: inline-block;
    font-weight: normal;
}
.wrapper small, .wrapper h1 small, .wrapper h2 small, .wrapper h3 small, .wrapper h4 small, .wrapper h5 small, .wrapper h6 small {
    font-size: 0.35em;
}
.wrapper h2 small {
    color: #fff;
}
.wrapper h2 .dollarsign {
    font-size: 80%;
    color: inherit;
}
.wrapper .hint {
    font-size: 0.35em;
    text-align: center;
}
/*****************************************************/
.wrapper .sec2 {
    padding: 3.25em 0 6em;
}
.wrapper .sec2 h2 {
    margin: 1em auto 1.2em;
    line-height: 1;
}
.wrapper .sec2 ul.brand {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}
.wrapper .sec2 ul.brand li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% / 3);
    margin-bottom: 4em;
}
.wrapper .sec2 ul.brand li img {
    width: 82%;
}
.wrapper .sec2_ifno {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
    margin: 0 auto;
    gap: 3em;
}
.wrapper .sec2 .sec2_ifno h3 {
    position: relative;
    font-size: 1.7em;
}
.wrapper .sec2 .sec2_ifno h3 span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    color: #fffcdb;
}
/*****************************************************/
.wrapper .sec3 {
    padding: 0;
}
/*****************************************************/
.wrapper .sec-plan {
    padding: 5em 0 0.5em;
}
.wrapper .sec-plan h2 {
    margin: 0 auto .35em;
}
.wrapper .sec-plan .table-outter {
    margin-bottom: 3em;
}
.wrapper .sec-plan table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    background-color: transparent;
}
.wrapper .sec-plan table .col_h small {
    font-size: .8em;
}
.wrapper .sec-plan table th {
    border-right: 1px solid #333;
    background-color: #1383E6;
    font-size: 1.25em;
}
.wrapper .sec-plan table td {
    color: #333;
    border-right: 1px solid #777;
    background-color: #fff;
}
.wrapper .sec-plan table tbody tr:nth-of-type(1) td {
    font-size: 1.25em;
}
.wrapper .sec-plan table thead tr:nth-of-type(1), .wrapper .sec-plan table tbody tr:nth-of-type(1) {
    height: 4.5em;
}
.wrapper .sec-plan1 table tbody tr:nth-of-type(2) {
    height: 6em;
}
.wrapper .sec-plan table .col_h, .wrapper .sec-plan table tbody tr:nth-of-type(1) .col_h {
    color: #fff;
    width: 15em;
    background-color: #333;
    border-bottom: 1px solid #a0a0a0;
    font-size: 1em;
}
.wrapper .sec-plan table th, .wrapper .sec-plan table td {
    text-align: center;
    vertical-align: middle;
    padding: 0;
    border-bottom: 1px solid #777;
    line-height: 1;
}
.wrapper .sec-plan table th.last, .wrapper .sec-plan table td.last {
    height: auto;
    border: none;
}
.wrapper .sec-plan p.hint {
    font-size: 1.3em;
    padding-bottom: 1em;
}
.wrapper .sec-plan1 table th:nth-last-child(1), .wrapper .sec-plan1 table td:nth-last-child(1) {
    border-right: none;
}
.wrapper .sec-plan table tbody tr, .wrapper .sec-plan table tbody tr td {
    height: auto;
}
.wrapper .sec-plan1 table tbody tr:last-of-type td {
    background-color: #1383E6;
    color: #Fff;
    font-size: 1.4em;
    height: 2.6em;
}
.wrapper .sec-plan1 table tbody tr:last-of-type td small {
    font-size: .6em;
}
.wrapper .sec-plan1 table tbody tr:nth-of-type(2) td.col_h {}
.wrapper .sec-plan1 table tbody tr:nth-of-type(2) td.col_h strong {
    display: inline-block;
    padding-bottom: .4em;
}
.wrapper .sec-plan1 table tbody tr:nth-last-child(3) td[colspan="3"] {
    text-align: left;
    padding: 0 0 0 1rem;
    vertical-align: middle;
    line-height: 1.2;
    font-size: 2.2em;
}
.wrapper .sec-plan1 table tbody tr:nth-last-child(3) td[colspan="3"] small {
    font-size: .4em;
}
.wrapper .sec-plan1 table tbody tr:nth-last-child(2) td[colspan="3"] {
    padding: 0;
    text-align: left;
    font-size: 1.05em;
}
.wrapper .sec-plan1 table tbody tr:nth-last-child(2) td[colspan="3"] strong small {
    font-size: .6em;
    font-weight: normal;
}
.wrapper .sec-plan table tbody tr:nth-last-child(2) td div {
    padding: 0 0 0 1rem;
    border-bottom: 1px solid #777;
    font-weight: bold;
    line-height: 1.2;
    height: 2em;
    display: flex;
    align-items: center;
    height: 2.5em;
    font-size: 1.4em;
}
.wrapper .sec-plan table td ul {
    padding: 0.5em 1em;
}
.wrapper .sec-plan table td ul li {
    text-align: left;
    line-height: 1.6;
    padding-left: 1.25em;
    position: relative;
    font-weight: 500;
}
.wrapper .sec-plan table td ul li small {
    font-size: .9em;
}
.wrapper .sec-plan table td ul li.pink {
    color: #f40ea6;
    font-weight: bold;
}
.wrapper .sec-plan table th p, .wrapper .sec-plan table td p {
    text-align: left;
}
.sec-plan table th p img, .wrapper .sec-plan table td p img {
    display: inline-block;
    vertical-align: sub;
    width: auto;
}
.wrapper .sec-plan table th p img.dazn, .wrapper .sec-plan table td p img.dazn {
    background: #000;
    padding: 1px;
}
.wrapper ul.exclusiveOffer li:before {
    content: "";
    display: inline-block;
    background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/ott-vas-disney/images/icon_check.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    aspect-ratio: 1 / 1;
    width: 1em;
    position: absolute;
    top: 0.313em;
    left: 0;
}
.wrapper ul.exclusiveOffer li.pink:before {
    background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/ott-vas-disney/images/icon_check_pink.webp);
}
.wrapper .sec-plan .links-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5em;
}
.wrapper .sec-plan .links-group .link-button {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 11em;
    padding: 0.9em 0.9em;
    text-align: center;
    text-decoration: none;
    background-color: #5ef9ff;
    font-size: 1.15em;
    font-weight: bold;
    line-height: 1;
}
.wrapper .sec-plan .links-group .link-button::after {
    content: '\ea04';
    font-family: icon;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-decoration: none;
    text-rendering: optimizeLegibility;
    speak: none;
    font-size: 0.85em;
    margin-left: .25em;
}
/************************************************************/
.wrapper .sec4 {
    padding: 3em 0 4em;
}
.wrapper .sec4 h2 {
    margin: 0 0 0.8em;
    line-height: 1.4;
}
.wrapper .sec4 .info {
    margin-bottom: 2em;
    border-radius: 1.3em;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(to right, rgba(81, 33, 238, 1) 0%, rgba(52, 11, 189, 1) 30%);
}
.wrapper .sec4 .info article {
    padding: 2.8em 0 0 2.3em;
}
.wrapper .sec4 .info picture {
    flex: 1;
}
.wrapper .sec4 .info dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.wrapper .sec4 .info dl {
    justify-content: flex-start;
    margin: 0;
}
.wrapper .sec4 .info dl dt {
    width: 7em;
    margin: 0;
}
.wrapper .sec4 .info dl dd {
    flex: 1;
    padding-left: 0.8em;
}
.wrapper .sec4 .info dl dd img[alt="DAZN"] {
    width: 4em;
    margin-right: .5em;
}
.wrapper .sec4 .info dl dd span.exclusive {
    display: inline-block;
    line-height: 1;
    padding: .15em .25em .3em;
    font-size: 0.9em;
    margin: 0 0 .5em;
    color: #000;
    background: #ffd741;
    font-weight: bold;
    vertical-align: top;
}
.wrapper .sec4 .info dl dd h3 {
    font-size: 1.25em;
    font-weight: bold;
}
.wrapper .sec4 .info dl dd img[alt="DAZN"] {
    vertical-align: top;
}
.wrapper .sec4 .info dl dd h3 small {
    font-size: .8em;
    color: #fff;
    font-weight: normal;
}
.wrapper .sec4 .info dl dd small {
    font-size: 1em;
}
.wrapper .sec4 .info dl dd p {
    font-size: 1.2em;
    line-height: normal;
}
.wrapper .sec4 .info2 {
    flex-direction: row-reverse;
    padding: .6em 1em;
    background: linear-gradient(to left, rgba(81, 33, 238, 1) 0%, rgba(52, 11, 189, 1) 30%);
}
.wrapper .sec4 .info2 article {
    padding: 0 0 0 2.3em;
    width: 25.3em;
}
.wrapper .sec4 .info2 dl dd h3 {
    font-size: 1.85em;
}
.wrapper .sec4 .info2 article, .wrapper .sec4 .info2 dl {
    display: flex;
    align-items: center;
}
.wrapper .sec4 .info2 dl dd p {
    font-size: 1.2em;
}
.wrapper .sec4 .info3 {
    padding: .6em 1em .6em 2em;
}
.wrapper .sec4 .info3 article {
    padding: 0;
    width: 23em;
}
.wrapper .sec4 .info3 dl dd h3 {
    font-size: 1.85em;
}
.wrapper .sec4 .info article {
    display: flex;
    align-items: center;
}
.wrapper .sec4 .info3 dl dd p {
    font-size: 1.2em;
}
/************************************************************/
.wrapper .sec-plan2 {
    padding: 0 0 0.5em;
}
.wrapper .sec-plan2 h2 {
    margin: 0 auto .75em;
}
.wrapper .sec-plan2 table tbody tr:nth-of-type(3) td:nth-of-type(2), .wrapper .sec-plan2 table tbody tr:nth-of-type(4) td:nth-of-type(2) {
    text-align: left;
    padding: 0 0 0 1em;
    font-size: 1.1em;
}
.wrapper .sec-plan2 table tbody tr:nth-of-type(3), .wrapper .sec-plan2 table tbody tr:nth-of-type(4) {
    height: 3.4em;
}
.wrapper .sec-plan2 table tbody tr:nth-of-type(2) {
    height: 3em;
    font-size: 1.2em;
}
.wrapper .sec-plan2 table th {
    background-color: #5021ed;
}
/************************************************************/
.wrapper .sec6 {
    padding: 0 0 3.25em;
}
.wrapper .sec6 h2 {
    margin: 0 auto 0.6em;
}
.wrapper .sec6 dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: 2em;
    margin: 0;
}
.wrapper .sec6 dl dt, .wrapper .sec6 dl dd {
    margin: 0;
    padding: 2.2em 3em 1em;
    border-radius: 1em;
    background: linear-gradient(to right, rgba(81, 33, 238, 1) 0%, rgba(52, 11, 189, 1) 30%);
}
.wrapper .sec6 dl dt img.DAZN {
    display: block;
    width: 7em;
    margin: 0 auto 1.5em;
}
.wrapper .sec6 dl dt ul {
    display: flex;
}
.wrapper .sec6 dl dt ul li {
    position: relative;
    width: auto;
    padding: 0 0 0.938em 0.938em;
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: normal;
}
.wrapper .sec6 dl dt ul li:nth-child(1) small {
    font-size: .7em;
}
.wrapper .sec6 dl dt ul li:nth-child(3) {
    border-left: 0;
    padding: 0.938em 0 0;
}
.wrapper .sec6 dl dt ul li img {
    display: inline-block;
    width: 3em;
}
.wrapper .sec6 dl dt ul li::before {
    position: absolute;
    top: -0.8em;
    left: -0.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "1";
    border-radius: 500px;
    background: #fff;
    color: #000;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    aspect-ratio: 1 / 1;
    width: 1.4em;
    z-index: 2;
}
.wrapper .sec6 dl dt ul li:nth-child(2)::before {
    content: "2";
}
.wrapper .sec6 dl dt ul li:nth-child(3)::before {
    content: "3";
}
.wrapper .sec6 dl dd ul {
    display: grid;
    grid-template-columns: 7em 7em 7em;
    margin-bottom: 1.6em;
    gap: 9%;
    justify-content: center;
}
.wrapper .sec6 dl dd ul li strong {
    display: block;
    text-align: center;
    padding: .4em 0 0;
    font-weight: normal;
}
.wrapper .sec6 dl dd p {
    text-align: center;
    font-size: 1.25em;
}
/************************************************************/
.wrapper .sec7 {
    padding: 1.2em 0 5.4em;
}
.wrapper .sec7 h2 {
    margin: 0 auto .75em;
}
/************************************************************/
@media screen and (min-width: 820px) and (max-width: 1400px) {
    .wrapper {
        font-size: 1.1vw;
    }
    .wrapper .sec-plan .links-group {
        font-size: 16px;
    }
}
@media screen and (max-width: 820px) {
    .wrapper {
        font-size: 2.1vw;
    }
    .wrapper small {
        font-size: .45em;
    }
    .wrapper .sec2_ifno {
        gap: 2.6em;
    }
    .wrapper .sec2 .sec2_ifno h3 {
        font-size: 2em;
    }
    .wrapper .sec-plan table {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        table-layout: fixed;
        /* 凍結第一欄 */
    }
    .wrapper .sec-plan table .col_h {
        color: #fff;
        background: #333;
        border-bottom: 1px solid #777;
        font-size: .9rem;
        line-height: 120%;
    }
    .wrapper .sec-plan table th, .wrapper .sec-plan table td {
        border-bottom: 1px solid #777;
    }
    .wrapper .sec-plan table .col_h, .wrapper .sec-plan table tbody tr:nth-of-type(1) .col_h {
        width: 6.1em;
        font-size: .9rem;
        line-height: 120%;
    }
    .wrapper .sec-plan table tbody tr:nth-last-child(2) td.h-auto div {
        border-bottom: 1px solid #777;
    }
    .wrapper .sec-plan table td, .sec-plan table th {
        border-right: 1px solid #777;
        width: 7em;
    }
    .wrapper .sec-plan .table-outter {
        width: 100%;
        overflow-x: scroll;
        font-size: 3.5vw;
    }
    .wrapper .sec-plan .links-group {
        font-size: 1.3em;
        gap: 2em;
    }
    .wrapper .sec-plan .links-group .link-button {
        width: 100%;
        font-size: 17px;
    }
    .wrapper .sec-plan .links-group .link-button.direction-store{
        order: 3;
    }
    .wrapper .sec-plan .links-group .link-button.direction-online{
        order: 2;
    }
    .wrapper .sec-plan1 table tbody tr:nth-last-child(3) td[colspan="3"] small {
        font-size: .6em;
    }
    .wrapper .sec-plan1 table tbody tr:nth-last-child(3) td[colspan="3"] {
        font-size: 1.25em;
    }
    .wrapper .sec4 .info article {
        padding: 1.5em;
        font-size: 3.4vw;
        width: 100%;
    }
    .wrapper .sec4 .info dl dt {
        width: 5.4em;
    }
    .wrapper .sec4 .info dl dd img[alt="DAZN"] {
        width: 5em;
    }
    .wrapper .sec4 .info dl dd h3 small {
        vertical-align: bottom;
        line-height: 1;
    }
    .wrapper .sec4 .info dl dd h3 {
        font-size: 1.25em;
        line-height: normal;
    }
    .wrapper .sec4 .info dl dd h3 small {
        font-size: .7em;
    }
    .wrapper .sec4 .info dl dd p {
        font-size: 1.1em;
        line-height: 120%;
    }
    .wrapper .sec4 .info dl dd small {
        font-size: .9em;
    }
    .wrapper .sec4 .info2 dl dd h3 {
        font-size: 2.1em;
    }
    .wrapper .sec4 .info2 dl dd h3, .wrapper .sec4 .info2 dl dd p, .wrapper .sec4 .info3 dl dd h3, .wrapper .sec4 .info3 dl dd p {
        line-height: 1;
    }
    .wrapper .sec4 .info2, .wrapper .sec4 .info3 {
        padding: 0;
    }
    .wrapper .sec4 .info3 dl dd h3 {
        font-size: 2.3em;
    }
    .wrapper .sec5 {
        padding: 5em 0;
    }
    .wrapper .scrollbar {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        font-size: 2vw;
    }
   .wrapper .sec6 dl {
        display: inline-flex;
        white-space: normal;
        padding: 0 5% 2.5%;
        width: max-content;
    }
    .wrapper .sec6 dl dt, .wrapper .sec6 dl dd {
        width: 39em;
    }
    .wrapper .sec6 dl dt {
        display: flex;
        align-items: center;
        padding: 2.4em 2em;
    }
    .wrapper .sec6 dl dd {
        padding: 2.4em 2em 1em;
    }
    .wrapper .sec6 dl dd ul {
        grid-template-columns: 10.5em 10.5em 10.5em;
        margin-bottom: 1.2em;
        gap: 0;
        text-align: center;
    }
    .wrapper .sec6 dl dd ul li img {
        width: 75%;
    }
    .wrapper .sec6 dl dt ul {
        display: block;
        position: relative;
    }
    .wrapper .sec6 dl dt ul li {
        font-size: 2em;
        padding: 0 0 0.938em 1.3em;
    }
    .wrapper .sec6 dl dt ul li:nth-child(3) {
        padding: 0 0 0 1.3em;
    }
    .wrapper .sec6 dl dt ul li::before {
        top: 0.2em;
        left: 0;
        line-height: 1.25;
        width: 1.45em;
        font-size: .7em;
    }
    .wrapper .sec6 dl dt ul::after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 1px;
        top: .5em;
        left: .9em;
        height: calc(100% - 1em);
        background-color: #fff;
        z-index: 1;
    }
    .wrapper .sec6 dl dt img.DAZN {
        width: 8em;
        margin: 0 1.7em 0 0;
    }
    .wrapper .sec6 dl dt ul li:nth-child(1) small {
        display: block;
        font-size: .6em;
    }
    .wrapper .sec6 dl dd ul li strong {
        font-size: 1.4em;
    }
    .wrapper .sec6 dl dd p {
        font-size: 2.1em;
    }
    .wrapper .sec-plan table .col_h small {
        display: block;
    }
    .wrapper .sec-plan2 table tbody tr:nth-of-type(3), .wrapper .sec-plan2 table tbody tr:nth-of-type(4) {
        height: 4em;
    }
    .wrapper .sec6 .container {
        width: 100%;
    }
    .wrapper .sec6 .container h2 {
        padding: 0 5%;
    }
    .wrapper .sec7 h2 span {
        display: inline-block;
    }
    .wrapper .sec-plan1 table tbody tr:last-of-type td{
        font-size: 1em;
    }
    .wrapper .sec-plan1 table tbody tr:nth-last-child(2) td[colspan="3"]{
        font-size: .9em;
    }
    .wrapper .sec-plan1 table tbody tr:nth-of-type(2){
        height: 4em;
    }
}
@media screen and (max-width: 480px) {
    .wrapper .sec-plan .table-outter {
        font-size: 16px;
    }
}
@media screen and (min-width: 820px) {
    .wrapper .sec2_ifno {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.4em;
    }
    .wrapper .forPC, .hint {
        display: none;
    }
    .wrapper .sec4 .info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .wrapper .sec4 .info article {
        padding: 0 0 0 2.3em;
        width: 28.5em;
    }
    .wrapper .sec6 dl dt ul li {
        width: 40%;
        border-top: 1px solid #fff;
        padding: 0.938em 0.938em 0 0;
    }
    .wrapper .sec6 dl dt ul li:nth-child(3) {
        flex: 1;
        border-top: 0;
        padding: 0.938em 0 0;
    }
    .wrapper .sec6 dl dt ul li br {
        display: none;
    }
    .wrapper .sec2 ul.brand li {
        width: calc(100% / 6);
        margin-bottom: 0;
    }
    .wrapper .sec2 h2 {
        margin: 2.6em auto 1.2em;
    }
}
@media screen and (min-width: 980px) {
    .wrapper .sec6 .stream .stream_list {
        max-width: 87%;
    }
}