@charset "UTF-8";
/*240909雙網得利*/
html {scroll-behavior: smooth;}
.doubleplay-container{ width: 100%; background-color: #fff; cursor: default; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;}
.doubleplay-container .wrapper{ width: 100%; padding: 0 5%; box-sizing: border-box; text-align: center; margin: 5% 0;}
.doubleplay-container a{ color: inherit;}
.doubleplay-container small{ color: inherit;}

.doubleplay-container h3{ font-size: 3rem; font-weight: 700; color: #212f42; display: inline-block; margin: 0 auto 30px;}
.doubleplay-container .sec1 .deco,.doubleplay-container .sec2 .deco, .doubleplay-container .sec1 .deco-2, .doubleplay-container .sec1 .deco-3, .doubleplay-container .btn-box h3, .doubleplay-container .add-caption ul li{ color: #fff; text-shadow: 0 0 10px #212f4299;}
.doubleplay-container .deco::after{ content: ""; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/icon-section-title-b.svg); background-size: cover; background-repeat: no-repeat; background-position: center top; display: block; width: 100%; height: 20px;}
.doubleplay-container .deco-2::after{ content: ""; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/icon-section-title-lg.svg); background-size: cover; background-repeat: no-repeat; background-position: center top; display: block; width: 100%; height: 20px;}
.doubleplay-container .deco-3::after{ content: ""; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/icon-section-title-lr.svg); background-size: cover; background-repeat: no-repeat; background-position: center top; display: block; width: 100%; height: 20px;}
.doubleplay-container .deco-4::after{ content: ""; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/icon-section-title-g.svg); background-size: cover; background-repeat: no-repeat; background-position: center top; display: block; width: 100%; height: 20px;}
.doubleplay-container .deco-5{ border-bottom: 10px solid #00a7b7;}


/*kv*/
.doubleplay-container .kv-box{ position: relative; width: 100%;}
.doubleplay-container .kv-box .kv-title{position: absolute; left: 0; top: 0;}
.doubleplay-container .kv-box .kv-title .kv-title-text, .add-workflow-step-box .special-title-text{ font-size: 0; z-index: -999; position: relative; line-height: 0;}
.doubleplay-container .kv-box .kv-left-model{position: absolute; left: 2%; top: 10%; width: 26%; height: fit-content;}

/*sec1*/
.doubleplay-container .sec1{ position: relative; padding:0 0 2%; margin-top: -4.5%; width: 100%; background: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/sec1-bg.webp), #00a7b7; background-size:contain; background-position: center -10%; background-repeat: no-repeat; transform: skewY(-5deg);}
.doubleplay-container .sec1 .wrapper{ transform: skewY(5deg); margin-top: 0;}
.doubleplay-container .sec1 .kv-right-model{position: absolute; right: 2%; bottom: 96%; width: 20%; height: fit-content;}

.doubleplay-container .sec1 .point-box{ display: grid; grid-template-columns:repeat(3, 1fr); grid-column-gap: 30px; width: 80%; margin: 0 auto 100px;}
.doubleplay-container .sec1 .point-box .point-item:nth-child(2){ margin-top: -15%;}
.doubleplay-container .sec1 .point-box .point-item img{ width: 100%; height: fit-content;}
.doubleplay-container .sec1 .point-box .point-item .point-title-text{font-size: 0; z-index: -999; position: relative; line-height: 0;}

/*雙網資費任你搭*/
.doubleplay-container .sec1 .scheme-point{ width: 100%; margin-bottom: 60px; text-align: center;}

/*0729*/
.doubleplay-container .sec1 .scheme-point .scheme .scheme-box{ display: flex; justify-content:space-evenly;}

@media screen and (max-width: 985px) {
.doubleplay-container .sec1 .scheme-point .scheme{ overflow-x:scroll; overflow-y: hidden; }
.doubleplay-container .sec1 .scheme-point .scheme .scheme-box{ width: 940px; display: flex; flex-direction: row; justify-content:flex-start; }
.doubleplay-container .sec1 .scheme-point .scheme .scheme-box .scheme-point-item-list{ margin-right: 20px; width: 300px;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-box .scheme-point-item-list:last-child{ margin-right: 0;}
}

.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list:nth-child(odd){ margin-top: 2rem;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list{ display: flex; flex-direction: column;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title{ display: flex; flex-direction: row; align-items:center; justify-content:center; z-index: 2;}

.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title .list-messages{ color: #fff; font-weight: 700; position: relative; background: #212f42; border-radius: 1.25rem; padding: 5px 20px; margin-right: 1rem; font-size: 1.25rem; box-shadow: 0 0 10px #212f4233;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title .list-messages:after{content: ''; position: absolute; right: 3px; top: 50%; width: 0; height: 0; border: 1rem solid transparent; border-left-color: #212f42; border-right: 0; border-top: 0; margin-top: -0.5rem; margin-right: -1rem;}

.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title .list-pic{max-width: 80px; height: fit-content; filter: drop-shadow(0px 0px 5px rgba(0,0,0,.1));;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme{ display: flex; flex-direction: column; align-items: center; background: linear-gradient(to bottom, #fff 0%, #e6e6e6 70%); padding: 50px 20px 20px 20px; border-radius: 30px 0 0 0; margin-top: -40px; box-shadow: 0 0 10px #212f4233;}

.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box{ width: 100%; box-sizing: border-box; background-color: #fff; padding:.5rem 1rem; display: flex; flex-direction: column; align-items: center; border-radius: 15px 0; border: 1px solid #e6e6e6;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box .price-title{ color: #d80c18; font-size: 1.6rem; font-weight: 700;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box .price-title span{ font-size: 120%;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box .price-item li{ color: #212f42; font-size: 1.25rem; font-weight: 700; margin-left: 20px; position: relative; text-align: left;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box .price-item li::before{ content: ""; width: 18px; height: 17px; display: block; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/icon-check.svg); background-position: left top; background-repeat: no-repeat; background-size: cover; position: absolute; left: -20px; top: 6px;}

.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-plus{ font-size: 2rem; color: #212f42; line-height: 100%;}

.doubleplay-container .sec1 .scheme-point .scheme .swiper-pagination.scheme{ display: none;}

.doubleplay-container .sec1 .scheme-point .list-title-offer{ background-color: #d80c18; padding: 10px; text-align: center; box-shadow: 0 0 10px #212f4233; position: relative; overflow: hidden; border-radius: 0 0 30px 0;}
.doubleplay-container .sec1 .scheme-point .list-title-offer::before{ background: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/icon-scheme.svg); background-position: right top; background-repeat: no-repeat; background-size: contain; width: 30px; height: 29px; position: absolute; right: -1px; top: 0; content: "";}
.doubleplay-container .sec1 .scheme-point .list-title-offer .offer-price{ color: #fff; font-weight: 700; font-size: 1.5rem;}
.doubleplay-container .sec1 .scheme-point .list-title-offer .offer-price span{ color: #ffff00; font-size: 160%;}
.doubleplay-container .sec1 .scheme-point .list-title-offer .offer-price span small{ font-size: 60%;}
.doubleplay-container .sec1 .scheme-point .list-title-offer .offer-price small{ font-size: 50%;}

/*寬頻+行動 table*/
.doubleplay-container .sec1 .scheme-table{ display: grid;grid-template-columns: 3fr .5fr 3fr; width: 100%; margin-bottom: 40px; align-items:center;}
.doubleplay-container .sec1 .scheme-table .plus{ font-size: 3rem; color: #212f42; font-weight: 700; text-align: center;}

/*table*/
.doubleplay-container .sec1 .scheme-table .mobile-show{ display: none;}
.doubleplay-container .sec1 .scheme-table .broadband-table, .doubleplay-container .sec1 .scheme-table .mobile-table{ text-align: center;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table{ min-height: 22vh; width: 100%;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table th, .doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table td, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table th, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table td{ padding: 8px 12px;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table th p, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table th p, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table .bg-red p{ font-size: .9rem; color: #fff;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table td p, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table td p{ font-size: 1rem; color: #212f42;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table .price, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table .price{ font-size: 150%; font-weight: 700;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table th, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table th, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table .bg-red{ border-bottom: 1px solid #fff;}
.doubleplay-container .sec1 .scheme-table .mobile-table .m-table table .bg-red{ border-right: 1px solid #fff !important;}
.doubleplay-container .sec1 .scheme-table .mobile-table .m-table table .bg-red:last-child{ border-right: 0px !important;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table tr:last-child th, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table tr:last-child th{ border-bottom: 0px;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table td, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table td{ border-bottom: 1px solid #212f42; border-right: 1px solid #212f42;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table tr:last-child td, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table tr:last-child td{ border-bottom: 0px;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table tr:first-child td:last-child, .doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table tr:nth-child(2) td:last-child, .doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table tr:nth-child(3) td:last-child, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table tr:first-child td:last-child, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table tr:nth-child(2) td:last-child, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table tr:nth-child(3) td:last-child, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table tr:nth-child(4) td:last-child{ border-right: 0px;}
.doubleplay-container .sec1 .scheme-table .broadband-table .price-sp, .doubleplay-container .sec1 .scheme-table .mobile-table .price-sp{color: #ef3123 !important;}

/*更多資費表btn*/
.doubleplay-container .button--text{ display: inline-flex; cursor: pointer; align-items: center; color: #fff;}
.doubleplay-container .button--text .label{ font-size: 1rem; text-decoration: underline; text-underline-offset:4px;}
.doubleplay-container .button--text .icon{ font-size: 14px; margin-left: 5px;}

/*門市輕鬆免等待*/
.doubleplay-container .btn-box{ margin: 40px 0}
.doubleplay-container .btn-box h3{ margin-bottom: 60px; font-style: italic; font-size: 4rem;}
.doubleplay-container .btn-box h3 span{ display: inline-block; position: relative;}
.doubleplay-container .btn-box h3 span:nth-child(2)::after{ content: ""; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/btn-box-title.svg); background-size: contain; background-repeat: no-repeat; background-position: right top; display: block; width: 70%; height: 20px; position: absolute; right: 0; bottom: -15px;}
.doubleplay-container .btn-box .btn-item{ width: 100%; display: flex; justify-content:space-evenly;}
.doubleplay-container .btn-box .btn-item .phone{ display: none;}

/*親友加辦門號*/
.doubleplay-container .sec2{ position: relative; padding:0 0 2%; margin-top: -2px; width: 100%; background: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/sec2-bg.webp), #00a7b7; background-size:contain; background-position: center top; background-repeat: no-repeat; transform: skewY(-5deg) scaleX(-1);}
.doubleplay-container .sec2 .wrapper{ transform: skewY(-5deg) scaleX(-1);}

.add-workflow-step-box{ position: relative; display: grid; grid-template-columns:3fr 1fr; justify-content:center; padding-top: 5vh;}
.add-workflow-step-box .workflow-special{ position: relative; display: grid; grid-template-rows: 2fr 1fr 1fr; align-items:center;}
.add-workflow-step-box .workflow-special .col-1{ margin-top: 18vh;}
.add-workflow-step-box .workflow-step-pop{ position: absolute;  left: 43%; top: 0; width: max(298px, 25%); height: fit-content;}
.add-workflow-step-box-mobile{ display: none;}
.add-workflow-step-box-mobile .mobile-show{ display: none;}

/*親友加辦門號 備註*/
.doubleplay-container .add-caption{ width: 100%; margin: 2% 0 4%;}
.doubleplay-container .add-caption ul{ text-align: left; display: inline-block;}
.doubleplay-container .add-caption ul li{ font-size: 1rem; list-style: disc; margin-left: 1.5rem;}


/*賺更多禮券*/
.doubleplay-container .sec3{ position: relative; width: 100%; background: url(https://www.homeplus.net.tw/cable/images/manual_upload/doubleplay/sec3-bg.webp), #fff; background-size:contain; background-position: center top; background-repeat: no-repeat; transform: skewY(-5deg);}
.doubleplay-container .sec3 .wrapper{ transform: skewY(5deg);}

.doubleplay-container .sec3 .step-point{ width: 100%; margin-bottom: 10vh;}
.doubleplay-container .sec3 .step-point .step-point-box{ display: flex; justify-content:space-evenly; margin: 3% 0;}
.doubleplay-container .sec3 .step-point .step-point-box .item{ background: linear-gradient( 135deg, #fff 40%, #f4f4f4 100%); border-radius: 20px; padding: 1.5rem; position: relative; box-shadow: 0 0 5px #212f4229; box-sizing: border-box; min-height: 20vh; border:1px solid #e6e6e6; width: 30%;}
.doubleplay-container .sec3 .step-point .step-point-box .item .number{ display: inline-block; font-size: 2rem; color: #fff; font-weight: 700; width: 4rem; height: 4rem; border-radius: 2rem; position: absolute; left: 10%; top: -10%; background-color: #212f42; line-height: 4rem; text-align: center; box-shadow: 0 5px 10px #212f4229;}
.doubleplay-container .sec3 .step-point .step-point-box .item img{ max-width: 70px; height: fit-content;}
.doubleplay-container .sec3 .step-point .step-point-box .item .text{ margin: 1rem auto 0; font-size: 1.2rem; color: #212f42; font-weight: 700;}
.doubleplay-container .sec3 .step-point .step-point-box .item .text span{ display: block;}

.doubleplay-container .sec3 .step-flow{ width: 100%;}
.doubleplay-container .sec3 .step-flow .step-flow-box{display: grid; grid-template-columns: 200px 1fr 200px 1fr 200px 1fr 200px;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-and{ position: relative; width: 100%; display: block;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-and img{ width: 100%; height: auto; position: absolute; top: 24.5%; transform: translateX(-50%);}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic{ display: flex; flex-direction: column;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic .text{font-size: 1.2rem; margin-top: 1rem; color: #212f42; min-height: 5rem; font-weight: 700;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic .text span{ display: inline-block;}

/*常見問題*/
.doubleplay-container .sec4{ width: 100%; background-color: #f3f9f6; z-index: 2;}
.doubleplay-container .sec4 h4{ border-left:  4px solid #00a7b7; color: #00a7b7; font-size: 1.6rem; font-weight: 700; text-align: left; padding-left: 1rem;}

.doubleplay-container .sec4 .aq-box{ width: 100%; padding: 2rem 0;}

.qa-content{ padding: 1rem 0 0 1.5rem;}

.qa-content .container-accordion{ display: inline-flex; flex-direction: column; width: 100%;align-items: center;}
.qa-content .container-accordion label{ display: block; width: 100%; text-align: left; cursor: pointer; font-size: 1.1rem; color: #212f42; line-height: 140%; font-weight: 700;}
.qa-content .container-accordion .accordion-navigation{ border-bottom: #b3b3b3 1px solid; width: 100%; text-align: left; margin-bottom: .8rem; padding-bottom: .8rem;}
.doubleplay-container .sec4 .aq-box:first-child .qa-content .container-accordion dl.accordion-navigation:last-child{ border-bottom: none !important; padding-bottom: 0; margin-bottom: 0;}
.doubleplay-container .sec4 .aq-box:nth-child(2) .qa-content .container-accordion dl.accordion-navigation:last-child{ border-bottom: none !important; padding-bottom: 0; margin-bottom: 0;}
.qa-content .container-accordion .container-accordion-content{ height: 0px; overflow: hidden; font-size: 1rem; line-height: 150%; padding-left: 2rem; transition: 0.3s ease-in !important;}
.qa-content .container-accordion .container-accordion-content a{ text-decoration: underline;}
input[type=radio]:checked+.container-accordion-content{ height: auto; font-size: 1rem; line-height: 150%; padding-bottom: .5rem; padding-top: .5rem;}
input[type=radio]{ display: none;}

/*完整資費內容*/
.doubleplay-container .sec4 .terms-box{ background-color: #fff; border-bottom: 1px solid #f4f4f4;}
.doubleplay-container .sec4 .terms-box:last-child{ border-bottom: 0px;}
.doubleplay-container .sec4 .terms-box .terms-content{ text-align: left;}


.note-scheme{ width: 100%;}
.note-scheme .bd-table-box{ width: 100%; margin-bottom: 2rem;}
.note-scheme .m-table-box{ width: 100%; margin-bottom: 2rem;}
.note-scheme .m-table-box:last-child{ margin-bottom: 0;}
.note-scheme table{ width: 100%; background-color: #fff;}
.note-scheme table tr th{ font-size: .9rem; border-right: 1px solid #fff; border-top: 1px solid #fff; padding: 10px 2px; font-weight: normal; background-color: #212f42; color: #fff;}
.note-scheme table tr th p{ font-size: .9rem;}
.note-scheme table tr td{ font-size: 1rem; border-right: 1px solid #c1c1c1; border-top: 1px solid #c1c1c1; padding: 10px 6px;}
.note-scheme table tr:last-child td{ border-bottom: 1px solid #c1c1c1;}
.note-scheme table .price{ font-size: 120%;}
.note-scheme table .price-sp{ color: #ef3123;}
.note-scheme table .bg-red{ background-color: #ef3123; color: #fff;}
.note-scheme .note-scheme-title{ text-align: center; font-size:1.5rem; margin-bottom: .5rem;}
.note-scheme .mobile-show{ display: none;}

.allscheme{ display: block; height: 0px;}

@media screen and (max-width: 1280px) {
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table th, .doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table td, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table th, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table td{ padding: 5px;}
.doubleplay-container .sec3 .step-flow .step-flow-box{grid-template-columns: 180px 1fr 180px 1fr 180px 1fr 180px;}

.note-scheme table tr th p{ font-size: .8rem !important;}
.note-scheme table tr td p{ font-size: .85rem !important;}
.note-scheme table tr td, .note-scheme table tr th{ padding: 8px 2px;}
.note-scheme .m-table-box{ width: 100%; overflow-x: scroll; overflow-y: hidden; position: relative;}
.note-scheme .m-table-box .m-table{ width: 1000px;}
.note-scheme .m-table-box .m-table tr th{ position: sticky; left: 0; top: 0; z-index: 1; box-shadow: 2px 0 5px rgb(0, 0, 0, .1);}
.note-scheme .m-table-box .m-table .m-sticky{ left: 66.1px;}
.note-scheme .mobile-show.m-table{ display: block; color: #666; margin-bottom: .25rem; text-align: center;}

.doubleplay-container ::-webkit-scrollbar-thumb{ background-color: #212f42 !important; border-radius: 0px; outline: 1px solid #212f42;}
.doubleplay-container ::-webkit-scrollbar{ height: 8px; -webkit-appearance: none;}
.doubleplay-container ::-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);}
.doubleplay-container ::-webkit-scrollbar:hover{ height: 12px;}

.add-workflow-step-box{ padding-top: 4.5vh;}
.add-workflow-step-box .workflow-step-pop{ left: 43%; width: max(200px, 25%);}

}

@media screen and (max-width: 1130px) {
.doubleplay-container .sec3 .step-point .step-point-box .item .text span{ display: inline;}
.doubleplay-container .sec3 .step-flow .step-flow-box{grid-template-columns: 160px 1fr 160px 1fr 160px 1fr 160px;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic .text{font-size: 1rem; min-height: 4rem;}

}

@media screen and (max-width: 1060px) {
.doubleplay-container .sec3 .step-point .step-point-box .item{ padding: 1rem; min-height: 15vh;}
.doubleplay-container .sec3 .step-point .step-point-box .item .text{ font-size: 1rem; margin-top: 10px;}
}


@media screen and (max-width: 1025px) {
.doubleplay-container h3{ font-size: 2.5rem;}
.doubleplay-container .sec1 .kv-right-model{ bottom: 98%;}
.doubleplay-container .sec1 .point-box{ grid-column-gap: 20px; margin-bottom: 50px;}

.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title .list-messages{ padding: 5px 10px; font-size: 1rem;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title .list-pic{ width: 50px;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme{ padding: 40px .8rem .8rem .8rem; border-radius: 20px 0 0 0;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box .price-title{ font-size: 1.4rem;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box .price-item li{ font-size: 1.1rem; margin-left: 15px;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box .price-item li::before{ width: 15px; height: 14px; left: -15px;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme .scheme-box{padding: .5rem;}
.doubleplay-container .sec1 .scheme-point .list-title-offer .offer-price{ font-size: 1.2rem;}
.doubleplay-container .sec1 .scheme-point .list-title-offer{ border-radius: 0 0 20px 0; padding: 15px;}

.doubleplay-container .sec3 .step-point .step-point-box .item{ padding: 1rem; min-height: 19vh;}
.doubleplay-container .sec3 .step-point .step-point-box .item .number{ width: 3rem; height: 3rem; border-radius: 1.5rem; position: absolute; left: 10%; top: -12%; background-color: #212f42; line-height:3rem; font-size: 1.5rem;}

.doubleplay-container .sec3 .step-flow .step-flow-box{ grid-template-columns: 140px 1fr 140px 1fr 140px 1fr 140px;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic .text span{ display: inline;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-and img{ top: 23.5%;}

}

@media screen and (max-width: 985px) {
.doubleplay-container .sec1 .scheme-table{ display: flex; flex-direction: column; width: 100%; margin-bottom: 20px;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table{ max-height: fit-content;}
.doubleplay-container .sec1 .scheme-table .broadband-table, .doubleplay-container .sec1 .scheme-table .mobile-table{ width: 100%;}
.doubleplay-container .sec3 .step-point .step-point-box .item{ padding: 1rem .35rem; min-height: 16.5vh;}
.doubleplay-container .sec3 .step-point .step-point-box .item img{ max-width: 60px;}
.doubleplay-container .sec3 .step-point .step-point-box{ margin-top: 4%;}
.doubleplay-container .sec3 .step-flow .step-flow-box{ grid-template-columns: 130px 1fr 130px 1fr 130px 1fr 130px;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-and img{ top: 21.5%;}

.add-workflow-step-box .workflow-special .col-1{margin-top: 14vh;}
}

@media screen and (max-width: 750px) {
.doubleplay-container h3{ font-size: 2rem; margin-bottom: 20px;}
.doubleplay-container h3 span{ display: block;}
.doubleplay-container .deco::after, .doubleplay-container .deco-2::after, .doubleplay-container .deco-3::after, .doubleplay-container .deco-4::after{ height: 15px;}
.doubleplay-container .deco-5{ border-bottom: 6px solid #00a7b7;}

.doubleplay-container .kv-box .kv-left-model{display: none;}
.doubleplay-container .sec1 .kv-right-model{display: none;}

.doubleplay-container .sec1{background-position: center -10%; background-size:200%;}
.doubleplay-container .sec1 .point-box{ width: 98%; grid-column-gap:0px; margin-top: -10%;}
.doubleplay-container .sec1 .point-box .point-item:nth-child(2){ margin-top: -15%;}

.doubleplay-container .sec1 .scheme-point .scheme .swiper-pagination.scheme{ display: block;}
.doubleplay-container .sec1 .scheme-point .scheme .swiper-pagination-bullet-active{ background: #212f42;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title .list-pic{ width: 70px;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title .list-messages{ font-size: 1.2rem;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list .list-title-scheme{ padding: 50px 15px 15px 15px;}
.doubleplay-container .sec1 .scheme-point .scheme .swiper-wrapper.scheme{ margin-bottom: 2.5rem;}
.doubleplay-container .sec1 .scheme-point .scheme .scheme-point-item-list:nth-child(odd){ margin-top: 0;}

.doubleplay-container .btn-box h3{ margin-bottom: 40px; font-size: 2.5rem;}
.doubleplay-container .btn-box .btn-item{ flex-direction: column;}
.doubleplay-container .btn-box .btn-item a{ margin-bottom: 1rem;}
.doubleplay-container .btn-box .btn-item .phone{ display: flex;}

.doubleplay-container .add-caption ul li{ font-size: .85rem; margin-left: 1.2rem;}

.doubleplay-container .sec3 .step-point .step-point-box{ margin: 5% 0 0; flex-direction:column;}
.doubleplay-container .sec3 .step-point .step-point-box .item{ min-height: 14.5vh; padding: 10px; width: 90%; margin: 0 5% 30px;}
.doubleplay-container .sec3 .step-point .step-point-box .item img{ max-width: 50px;}
.doubleplay-container .sec3 .step-point .step-point-box .item .text{ font-size: 1rem; margin-top: 10px; padding: 0 1.5rem;}
.doubleplay-container .sec3 .step-point .step-point-box .item .text span{ display: block;}
.doubleplay-container .sec3 .step-point .step-point-box .item:nth-child(2) .text span:nth-child(2), .doubleplay-container .sec3 .step-point .step-point-box .item:nth-child(2) .text span:nth-child(3){ display: inline;}
.doubleplay-container .sec3 .step-point .step-point-box .item:nth-child(3) .text span:nth-child(2), .doubleplay-container .sec3 .step-point .step-point-box .item:nth-child(3) .text span:nth-child(3){ display: inline;}


.doubleplay-container .sec3 .step-flow .step-flow-box{ grid-template-columns: 1fr;justify-content:center;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-and{ height: 40px;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-and img{max-width: 30px; max-height: 30px; top: 50%; transform: translate(-50%, -50%);}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic{ align-items: center; flex-direction: row; text-align: left; width: 90%; margin: 0 5%; box-shadow: 0 0 5px #212f4229; padding: 3% 0 3% 3%; border-radius: 20px; border: 1px solid #e6e6e6;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic img{ max-width: 100px;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic .text{ min-height: fit-content; margin: .5rem 0 0 .5rem; font-size: 1.2rem;}
.doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic .text span{ display: block;}

/*QA*/
.doubleplay-container .sec4 h4{ font-size: 1.25rem;}
.qa-content{ padding: 1rem 0 0 1rem;}
.qa-content .container-accordion label{ font-size: .9rem;}
input[type=radio]:checked+.container-accordion-content, .qa-content .container-accordion .container-accordion-content{ font-size: .9rem;}
.qa-content .container-accordion .container-accordion-content{ padding-left: 0;}

/*親友加辦門號圖*/
.add-workflow-step-box{display: none;}
.add-workflow-step-box-mobile{ display: block;}
.add-workflow-step-box-mobile .add-workflow-step-box-mobile-box{ overflow-x: scroll; overflow-y: hidden; position: relative; box-sizing: border-box;}
.add-workflow-step-box-mobile .add-workflow-step-box-mobile-box img{max-width: 1200px; height: fit-content;}
.add-workflow-step-box-mobile .mobile-show{ display: block; color: #f4f4f4;}
.note-scheme table tr td, .note-scheme table tr th{ padding: 6px 1px;}

.allscheme{ display: block; height: 20px;}

}

@media screen and (max-width: 640px) {
.note-scheme .bd-table-box .bd-table .bd-sticky{ left: 88px;}
.add-workflow-step-box-mobile .add-workflow-step-box-mobile-box img{max-width: 1000px;}

}

@media screen and (max-width: 540px) {
    .note-scheme .bd-table-box .bd-table tr th{ position: sticky; left: 0; top: 0; z-index: 1; box-shadow: 2px 0 5px rgb(0, 0, 0, .1);}
    .note-scheme .bd-table-box{ width: 100%; overflow-x: scroll; overflow-y: hidden; position: relative;}
    .note-scheme .bd-table-box .bd-table{ width: 400px;}
    .doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic img{max-width:80px}
    .doubleplay-container .sec3 .step-flow .step-flow-box .flow-pic .text{ font-size: 1rem;}
.add-workflow-step-box-mobile .add-workflow-step-box-mobile-box img{max-width: 900px; }
.note-scheme .mobile-show.bd-table{ display: block; color: #666; margin-bottom: .25rem; text-align: center;}
}

@media screen and (max-width: 500px) {

.doubleplay-container .sec1 .scheme-table .mobile-show{ display: block; color: #f4f4f4; margin-bottom: .5rem;}
.doubleplay-container .sec1 .scheme-table .broadband-table, .doubleplay-container .sec1 .scheme-table .mobile-table{ width: 100%;}

.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table{ overflow-x: scroll; overflow-y: hidden; position: relative; box-sizing: border-box;}

.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table{ width: 100%;}
.doubleplay-container .sec1 .scheme-table .mobile-table .m-table table{ width: 450px;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table th p, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table th p{ font-size: .85rem;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table td p, .doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table td del, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table td p, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table td del{ font-size: .9rem;}
.doubleplay-container .sec1 .scheme-table .broadband-table .bd-table table .price, .doubleplay-container .sec1 .scheme-table .mobile-table .m-table table .price{ font-size: 130%;}

.doubleplay-container .sec3 .step-point .swiper-wrapper.step-point-box{ margin: 8% 0 10%;}

.add-workflow-step-box-mobile .add-workflow-step-box-mobile-box img{ max-width: 650px;}

}

@media screen and (max-width: 375px) {
.doubleplay-container .sec3 .step-point .step-point-box .item .text{padding: 0 1.5rem;}
}