@charset "UTF-8";
/*250328中萬*/
html {scroll-behavior: smooth;}
/*font size*/
.min20max45 {
    font-weight: 700;
    letter-spacing: -.2px;
    --min-size: 19;
    --max-size: 45;
    --font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (750 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.min11max16 {
    font-weight: 700;
	--min-size: 11;
    --max-size: 16;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (750 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.min10max12 {
	--min-size: 10;
    --max-size: 12;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (750 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.min16max20 {
    font-weight: 700;
    --min-size: 16;
    --max-size: 20;
    --font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (750 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.min20max26 {
    font-weight: 700;
    --min-size: 17;
    --max-size: 26;
    --font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (750 - 320))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.brform{
	display: none;
}


.lp-100-container{ width: 100%; text-align: center; cursor: default; display: flex; flex-direction: column; box-sizing: border-box; color: #333; overflow: hidden;
	background: linear-gradient(to bottom, #ff9f51 0%, #ffe7bf 20%); }
.lp-100-container .wrapper{ padding: 0 10%; width: 100%;}
.lp-100-container .wrapper.smartlife{ padding: 0; width: 100%;}
.lp-100-container a{ color: inherit;}
.lp-100-container small{ color: inherit;}
.lp-100-container em{ font-style: normal;}
.lp-100-container .AD-picture{ margin-bottom: 30px;}
@media screen and (max-width: 768px) {
    .lp-100-container .AD-picture{ margin-bottom: 1rem;}
}

/*btn*/
.lp-100-container .btn-box a{ display: flex; align-items:center;}
.lp-100-container .btn-box .btn.phone{display: none;}
.lp-100-container .btn-box .btn .be-icon-messages:before,.lp-100-container .btn-box .btn .be-icon-phone:before{ font-size: 1.4rem;}

/*查詢頻道表*/
.lp-100-container .note{ font-size: 1.1rem; margin: 20px auto; font-weight: 700;}
.lp-100-container .note a:hover{ text-decoration: underline;}

/*btn*/
.lp-100-container .btn-box{ display: flex; justify-content: space-evenly; margin: 0 auto 50px; flex-wrap:wrap;}

.lp-100-container .title-h1{ font-size: 0; text-indent: -9999; z-index: -1;}
.lp-100-container .title-h2{ font-weight: 700; line-height: 140%; color: #333;text-shadow: 0 1px 10px #ffffff29;}
.lp-100-container .title-h3{ font-weight: 700; line-height: 140%; margin-bottom: 5px;text-shadow: 0 1px 10px #ffffff29; color: #333;}
.lp-100-container .sec-2 h3{ color: #333;}

.lp-100-container .title-h2 .bigger{ font-size: 130%; font-weight: 700; font-style: normal;}

/*0303*/
.lp-100-container .title-h2-box-0303{ display: inline-block; margin: 0 auto 1rem; }
.lp-100-container .title-h2-0303{ text-align: center; align-items: center;}
.lp-100-container .title-h2-0303.pc{color: #2a64b0; text-align: center; text-align: -webkit-center;}
.lp-100-container .title-h2-0303.pc .cht{ display: inline-block; padding: 0 12px; color: #fff; background: #2a64b0; border-radius: 45px; margin-right: 8px;}
.lp-100-container .m-title-h2-s{ display: none;}



@media screen and (max-width: 768px) {
    .lp-100-container .title-h2-box-0303{ margin-bottom: .5rem;}
    .lp-100-container .title-h2-0303{ left: 5%; height: calc(100% - 18px);}
    .lp-100-container .title-h2-0303 .min11max16{ display: none;}
	.lp-100-container .title-h2-0303.pc .cht{ display: block; width: fit-content; margin-bottom: 5px; margin-right: 0;}
    .lp-100-container .m-title-h2-s{ display: flex; color: #000; justify-content:flex-end; width: 100%; text-align: right;}
}

.lp-100-container .main-box-0303{ display: grid; width: 100%; margin: 0 auto; grid-template-columns:repeat(3, 1fr); grid-gap:30px; margin-bottom: 30px;}
.lp-100-container .main-box-0303 .box-3-item{ display: grid; grid-template-rows:200px 150px; align-items:start; grid-gap:10px;}
.lp-100-container .main-box-0303 .box-3-item .box-pic-box img{ width: fit-content; max-height: 200px;}
.lp-100-container .box-text-box{ display: flex; align-items:center; flex-direction:column; justify-content:flex-start;}
.lp-100-container .box-text-box .logos{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-bottom: 10px;}
.lp-100-container .box-text-box .height{ line-height: 80%;}

@media screen and (max-width: 768px) {
.lp-100-container .main-box-0303{ grid-template-columns:1fr; grid-gap:1rem; margin-bottom: 1rem;}
.lp-100-container .box-text-box{align-items:flex-start; text-align: left;}
.lp-100-container .box-text-box .logos{ display: none;}
.lp-100-container .main-box-0303 .box-3-item{grid-template-columns:1fr 2.2fr; grid-template-rows:1fr; align-items:center; grid-gap:10px;} 

}


.lp-100-container table .bigger{ font-size: 200%; font-weight: 700;}

.lp-100-container .green{ color: #63bdb6;}
.lp-100-container .orange{ color: #ff2e3e;}
.lp-100-container .gray{ color: #7a7a7a;}
.lp-100-container .yellow{ color: #ffd74e;}

/*kv*/
.kv-box{ position: relative; width: 100%;}
.kv-box .kv-slogan-1{ position: absolute; left: 0; top: 0; display: flex; align-items: center; width: 100%; justify-content: center;}
.kv-box .kv-slogan-2{ position: absolute; left: 0; top: 0; display: flex; align-items: center; width: 100%; justify-content: center;}
.kv-box .kv-sp{ margin-top: -9%; position: relative; }
.kv-box .sp-tag{ position: absolute; left: 50px; top: 0; display: block; height: fit-content; border-radius: 0 0 10px 10px; background: #2a64b0; z-index: 1;}
.kv-box .sp-tag .sp-tag-text{ font-size: 1.5rem; font-weight: 700; line-height: 100%; color: #fff; padding: 8px 12px;}

.kv-box .kv-text-box{ width: 100%; text-align: center;}
.kv-box .kv-text-box .kv-h2{ font-size: 3rem; font-weight: 700; line-height: 140%; color: #333; text-shadow: 0 1px 10px #ffffff29;}
.kv-box .kv-text-box .kv-p{ font-size: 1.5rem; font-weight: 700; color: #333;}

/*kv aria*/
.kv-box #kv-slogan-title, .kv-box #kv-sp-title{ font-size: 0; z-index: -999; position: relative; line-height: 0;}


/*sec-1*/
.lp-100-container .sec-1{ position: relative; width: 100%;}
.sec-1 .sec1-box .title-h2 em, .sec-1 .sec1-box .title-h3 em{ font-style: normal;}
.sec-1 .sec1-box .title-h3 { font-style: normal;}
.sec-1 .sec1-box .title-h3 .point{ border-bottom: 4px solid #fdf9b7;}
.sec-1 .self-content .title-h2 .point{border-bottom: 4px solid #ffe517; display: inline;}

.ad-soundbox-box{ margin-bottom: 1rem; display: block; }
.ad-soundbox-box a{ display: block; transition: .3s;}
.ad-soundbox-box a:hover{transform: scale(1.02);}
.ad-soundbox-box img{border-radius: 25px;}

/*sec-1 table*/
.electric-box{padding-top: 2rem;}
.sec1-table{margin: 0 auto 30px; padding:0; width: 100%; text-align: center; position: relative;}
.sec1-table table{width: 100%; border-spacing: 0; margin: 0 auto; border-collapse: separate; border-radius: 0; border: 4px solid #2a64b0; background-color: #fff;}
.sec1-table table p{ font-size: 1.1rem;}
.sec1-table table th{ color: #fff; padding: 8px; vertical-align: middle;  text-align: center; font-weight: normal; border-right: solid 1px #fff;}
.sec1-table table td{ border-right: solid 1px #2a64b0; border-top: solid 1px #2a64b0; padding: 8px; font-weight: 500;}
.sec1-table table th .yellow{ font-size: 1.5rem; color: #fdff35; font-weight: 700;}
.sec1-table table th .name{ min-height: 3rem; font-size: 1.1rem;}
.sec1-table table .point-list{ width: 95%; display: flex; flex-wrap: wrap; justify-content: center;}
.sec1-table table .point-list p{ margin-right: 10px; font-weight: 700; text-align: left;}
.sec1-table table .point-list i{ margin-right: 1px;}
.sec1-table table th:last-child, .sec1-table table td:last-child{ border-right: 0px;}
.sec1-table table p em{ font-style: normal;}
.sec1-table table p i{ display: inline-block; vertical-align: text-bottom;}
.sec1-table table p i img{ max-width: 40px;}
.sec1-table table .table-note span{ font-size: .9rem;}
.sec1-table table .table-price{ font-size: 2rem; font-weight: 700;}

.sec1-box .sec1-video{ border: 10px solid #23a7a1; aspect-ratio: 16/9; position: relative; box-shadow: 0 0 20px #33333343; margin-bottom: 5%;}
.sec1-box .sec1-video iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0;}

.sec1-box .table-sp{ display: flex; width: 100%; justify-content:space-between; align-items: center; margin: 1rem 0;}
.sec1-box .table-sp .sp-item{ display: flex; flex-direction: column; background: linear-gradient(to bottom, #ffffd9 0%,#fede9a 7%,#fff8e9 100%); border-radius: 15px; padding: 8px 5px; width: 30%; color: #88000c; font-size: 1.5rem; font-weight: 700; }
.sec1-box .table-sp .sp-item em{ font-style: normal; font-size: 120%;}

.sec1-table .suggest{vertical-align: text-bottom; margin-right: 5px;}
.sec1-table .suggest img{ max-width: 30px;}

.sec1-table .soundbox th, .sec1-table .table-199 th{ border-top: 1px solid #fff;}
.sec1-table .soundbox tr:first-child th, .sec1-table .soundbox tr:first-child td, .sec1-table .table-199 tr:first-child th, .sec1-table .table-199 tr:first-child td{ border-top: 0px;}

/*sec-2*/
.lp-100-container .sec-2{ background-color: #00a198; position: relative; width: 100%;}
.lp-100-container .sec-2 .wrapper{ padding-top: 5%;}
/*智慧電視四選一*/
.electric-box h3 em{ font-style: normal;}

.electric-box .electric-item{ margin:.5rem 0 2rem;}
.electric-box .electric-item .item-tag{ position: relative; display: flex; width: 100%; height: 40px;}
.electric-box .electric-item .item-tag .tag-bg{ position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: 100%; height: auto;}
.electric-box .electric-item .item-tag .tag-title{font-size: 1.5rem; color: #fff; font-weight: 700; position: absolute; left: 50%; top: 0; transform: translate(-50%, 15%); /*z-index: 1;*/}
.electric-box .electric-item .item-tag .tag-title span{ display: inline;}

.electric-box .electric-item .item-box{ background-color: #fff; border: 4px solid #ffdf7e; padding: 2.5rem 1rem 1rem; display: flex; margin-top: -25px; justify-content: space-around;}
.electric-box .electric-item .item-box .item-list{ width: 30%; display: flex; flex-direction: column; align-items:center; }
.electric-box .electric-item .item-box .item-list img{ max-height: 140px; width: auto;}
.electric-box .electric-item .item-box .item-list .product-tag{ background-color: #fb4e31; color: #fff; padding: 2px 12px; border-radius: 20px; font-weight: 700; margin-bottom: 2px; }
.electric-box .electric-item .item-box .item-list .product-name{ color: #fb4e31; font-size: 1.25rem; font-weight: 700;}
.electric-box .electric-item .item-box .item-list .product-price{ font-size: .85rem;}

.electric-box .electric-item .item-box .item-list-last{ width: 20%; display: flex; flex-direction: column; background-color: #e5e5e5; padding: 1rem; border-radius: 10px; align-items:center; justify-content:center;}
.electric-box .electric-item .item-box .item-list-last img{ max-height: 60px; width: auto;}
.electric-box .electric-item .item-box .item-list-last .product-name{ font-size: 1.25rem; font-weight: 700; margin-bottom: 5px;}
.electric-box .electric-item .item-box .item-list-last .product-name span{ display: block;}
.electric-box .electric-item .item-box .item-list-last .product-name .point{ background: linear-gradient(transparent 60%,#fff9b1 61%, #fff9b1 94%,transparent 95%);}
.electric-box .electric-item .item-box .item-list-last .product-price{font-size: .85rem;}

/*智慧家電 table*/
.mobile-show{ display: none; font-size: 12px; margin-bottom: 5px; color: #333;}
.electric-table-box{ margin-bottom: 2rem; position: relative; width: 100%; box-sizing: border-box;}

.electric-table{margin: 0 auto; padding:0; width: 100%; text-align: center; position: relative;}
.electric-table table{width: 100%; border-spacing: 0; margin: 0 auto; border-collapse: separate; border-radius: 0; border: 4px solid #ffdf7e;}
.electric-table table p{ font-size: 1.1rem;}
.electric-table table th{ color: #fff; padding: 8px; vertical-align: middle;  text-align: center; font-weight: normal; border-right: solid 1px #fff;}
.electric-table table td{ border-right: solid 1px #ffdf7e; border-top: solid 1px #ffdf7e; padding: 8px; font-weight: 500;}
.electric-table table th .yellow{ font-size: 1.5rem; color: #fdff35; font-weight: 700;}
.electric-table table th .name{ min-height: 3rem; font-size: 1.1rem;}
.electric-table table .point-list{ width: 80%; display: flex; flex-wrap: wrap;}
.electric-table table .point-list p{ margin-bottom: 5px; margin-right: 20px; display: flex; align-items:center; font-weight: 700;}
.electric-table table .point-list i{ margin-right: 1px;}
.electric-table table th:last-child, .electric-table table td:last-child{ border-right: 0px;}
.electric-table table p em{margin-left: 2px; font-size: 12px; background-color: #fb4e31; line-height: 12px; padding: 1px 5px; vertical-align: middle; border-radius: 10px; color: #fff; font-style: normal;}


/*適用里別*/
.lp-100-container .zone-content{ display: flex; flex-direction: column;}
.lp-100-container .zone-content .title{ width: 100%; font-size: 1.5rem; margin-bottom: .5rem; font-weight: 700; color: #ffdf7e;}
.lp-100-container .zone-box{ display: flex; align-items:center; justify-content:flex-start; width: 90%; margin: 0 auto; padding-bottom: 20px;}
.lp-100-container .zone-box .dist{ font-size: 1rem; font-weight: 700; margin-right: 8px; width: 8%; background-color: #ffdf7e; line-height: 2rem; border-radius: 5px; color: #fff;}
.lp-100-container .zone-box .vil{ display: inline-flex; flex-wrap: wrap; width: 92%;}
.lp-100-container .zone-box .vil span{font-size: 1rem; font-weight: 700; border-right: 1px solid #333; padding-right: 3px; margin:3px 3px 3px 0; line-height: 100%;}
.lp-100-container .zone-box .vil .note{ border-right: 0; margin-right: 0; font-weight: normal; line-height: 120%; font-size: .85rem;}

/*map*/
.lp-100-container .map{ background-color: #fff; display: flex; flex-direction: row; justify-content:space-evenly; margin:0 0 5%; box-shadow: 0 6px 16px rgba(158,164,184,.2);}
.lp-100-container .map .map-info{ width: 60%; padding: 1rem 0 0 2rem; box-sizing: border-box; display: inline-flex; flex-direction: column; justify-content:center; align-items: flex-start; color: #333; background: linear-gradient(180deg, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 85%, rgb(244, 245, 245) 100%); margin: 0;}
.lp-100-container .map .map-info .map-title{ text-align: left; margin-bottom: .5rem;}
.lp-100-container .map .map-info .map-title img{ width: 35%; padding-right: .5rem;}
.lp-100-container .map .map-info li{ position: relative; text-align: left; font-size: .9rem; list-style: disc; margin-left: 1rem;}
.lp-100-container .map .map-info a:hover{ color: #23a7a1;}
.lp-100-container .map figure { width: 40%;}
.lp-100-container .map figure img{width: 100%; margin-bottom: 0;}

/*貼心提醒*/
.lp-100-container .dot-hr{ margin-top: 0;}
.lp-100-container .terms-box{ background-color: #fff; margin: 0 auto; color: #333; margin-bottom: 5%;}
.lp-100-container .accordion-content{ text-align: left; font-size: 100%;}
.lp-100-container .accordion-content p, .lp-100-container .accordion-content .ck-content ol li, .lp-100-container .accordion-content .ck-content ul li{ font-size: .9rem; word-break: break-all;}
.lp-100-container .accordion-content .ck-content ol, .lp-100-container .accordion-content .ck-content ul{ padding-inline-start:0.5rem; -webkit-padding-start:0.5rem; margin-bottom: .5rem;}
.lp-100-container .accordion-content .ck-content .-bracket>li{ position: relative; counter-increment:section; list-style:none;}
.lp-100-container .accordion-content .ck-content .-bracket>li::before{ content: "(" counter(section,decimal) ")"; position: absolute; top: 0; left: -1px; transform:translateX(-100%);}

/*ad 0916新增*/
.lp-100-container .ad-box{ margin: 1rem 0;}
.lp-100-container .ad-box img{ max-width: 100%; height: fit-content; filter: drop-shadow(0 0 5px #0000002d);}
.lp-100-container .ad-box a{ transition: .3s; display: block;}
.lp-100-container .ad-box a:hover{ transform: scale(1.02);}

/*計量100G*/
.lp-100-container .sutitle-s1{ text-align: center; display: block; font-size: 2.6rem; margin: 2rem auto 1rem; color: #fdf9b7;}
.lp-100-container .sutitle-s1 p{ position: relative; display: inline; font-size: inherit; padding: 0 25px;}
.lp-100-container .sutitle-s1 em{ font-style: normal; color: #ffe517;}
.lp-100-container .sutitle-s1 p::before{ content: ""; position: absolute; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/lp-100/sutitle-s1-before-250115.svg); background-repeat: no-repeat; width: 20px; height: 20px; left: 0; top: 0px;}
.lp-100-container .sutitle-s1 p::after{ content: ""; position: absolute; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/lp-100/sutitle-s1-after-250115.svg); background-repeat: no-repeat; width: 20px; height: 20px; right: 0; bottom: 0px;}
.lp-100-container .sutitle-s1 p span span{ color: #ffdf7e;}

.lp-100-container .nb-e3-box{ display: inline-flex; flex-direction: column; align-items: center; width: 100%; margin: 0 auto 20px; padding: 0; box-sizing: border-box; border: 4px solid #ffdf7e; border-radius: 20px; background-color: #fff; position: relative;}
.lp-100-container .nb-e3-box .scenario-content{ width: 100%;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box{ display: flex; flex-wrap:wrap; flex-direction: column; justify-content: center; width: 100%; border-radius: 25px; padding:30px; margin: 0 auto 0; position: relative; text-align: center;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-sutitle{ margin-bottom: 30px;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-sutitle, .lp-100-container .nb-e3-box .piechart-content .piechart-box .piechart-sutitle{ position: relative;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-sutitle p, .lp-100-container .nb-e3-box .piechart-content .piechart-box .piechart-sutitle p{ font-size: 1.8rem; text-align: center; }
.lp-100-container .nb-e3-box .scenario-content .scenario-box .note-box{ width: 90%; margin: 0 auto;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .note-box a{ text-decoration: underline;}

.lp-100-container .nb-e3-box .scenario-content .scenario-box dl{ background-color: #e9f7f5; border-radius: 15px; box-sizing: border-box; padding: 2rem 1rem 1rem; position: relative; text-align: left; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #c3c3c3; box-shadow: 0 5px 0 rgba(191, 191, 191,.5); min-height: 7.5rem; margin-bottom: 0;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box dl dt{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.lp-100-container .nb-e3-box .scenario-content .scenario-box dl dt img{ width: 70%;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box dl dd{ font-size: 1.4rem; line-height: 140%;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario{ display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap:40px; grid-row-gap:40px; margin-bottom: 20px;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-box-1{ box-sizing: border-box; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/lp-100/scenario-box-1.svg); background-repeat: no-repeat; background-position: 95% center; background-size: 30%;}

/*and*/
.lp-100-container .and-icon{ width: 100%; margin: -30px auto; z-index: 2; position: relative;}
.lp-100-container .and-icon img{ width: 100%;}

/*情境 Swiper 0901*/
.swiper-container.scenario{display: inline-flex; flex-direction: row; width:100%; height: 100%; margin: 0 auto; padding: 0; box-sizing: border-box;}
.swiper-wrapper.scenario{width: 100% !important; display: flex; padding: 0!important; margin:0 !important; align-items:stretch; flex-wrap:wrap; justify-content:space-evenly; box-sizing: border-box;}
.swiper-button-prev.scenario{display: inline-flex; left: 0 !important; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/lp-100/swiper-button-prev.svg) !important;}
.swiper-button-next.scenario{display: inline-flex; right: 0 !important; background-image: url(https://www.homeplus.net.tw/cable/images/manual_upload/lp-100/swiper-button-next.svg) !important;}
.swiper-pagination-bullet-active{background: #ffe517 !important;}
.swiper-pagination.scenario{ bottom: 0 !important; display: none;}
.swiper-container.scenario .swiper-slide{ width: 45% !important; margin-top: 4%;}

/*自助申辦*/
/* div-4 線上申辦 流程*/
.self-content{ margin-bottom: 2rem;}
.div-4-step-box{ width: 100%; color: #333; border-radius: 80px 20px 80px 20px; display: inline-flex; background-color: #fff; box-sizing: border-box; box-shadow: 0 6px 16px rgba(158,164,184,.2);}
.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;}
.div-4-step-box .step-main:first-child{ color: #fff; background-color: #00a29a; padding-left: .5rem;}
.div-4-step-box .step-main:last-child{ padding-right: 1rem;}



.div-4-step-box .step-main dl{ margin-bottom: 0; padding: 0 .5rem ;}
.div-4-step-box .step-main dl dt{ font-size: 1.5rem; margin: .5rem 0; font-weight: 700;}
.div-4-step-box .step-main dl dd{ font-size: .9rem;}
.div-4-step-box .step-main dl dd span{ display: block;}
.div-4-step-box .step-pic{ width: 120px; height: auto;}
.div-4-step-box .icon-1, .div-4-step-box .icon-2{ padding-top: 8.4%; width: 8%;}
.div-4-step-box .icon-1 img, .div-4-step-box .icon-2 img, .div-4-step-box .icon-0 img{ position: relative; z-index: 1;}
.div-4-step-box .icon-1{ position: relative;}
.div-4-step-box .icon-1::after{ content: ''; width: 100%; height: 100%; position: absolute; left: -1px; top: 0; z-index: 0;}
.div-4-step-box .icon{ width: 2%; padding-top: 9.5%;}
.div-4-step-box .icon-0{position: relative;width: 2%; padding-top: 9.5%;}
.div-4-step-box .icon-0::after{ background-color: #00a29a; clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%); content: ''; width: 100%; height: 100%; position: absolute; left: -1px; top: 0; z-index: 0;}


.div-4-step-box ol li{ list-style: auto; line-height: 120%;}
.div-4-step-box ul, .div-4-step-box ol{ text-align: left; margin-left: 1rem; display: inline-flex; flex-direction: column;}
.div-4-step-box ul li{ list-style: disc;}
.div-4-step-box ul li::marker{ color: #cf2220;}

/*QA*/
.qa-content{ background-color: #fff; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 6px 16px rgba(158,164,184,.2);}
.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; background-color: #fff; cursor: pointer; font-size: 1.1rem; color: #00968f; line-height: 140%;}
.qa-content .container-accordion .accordion-navigation{ border-bottom: #bfbfbf 1px dotted; width: 100%; text-align: left; margin-bottom: .8rem; padding-bottom: .8rem;}
.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%; padding-top: .5rem;}
input[type=radio]{ display: none;}





@media screen and (max-width: 1300px) {
.sec1-box .table-sp .sp-item{ font-size: 1.1rem;}

}

@media screen and (max-width: 1085px) {
.kv-box .kv-text-box{ width: 90%; margin: 0 auto;}
.kv-box .kv-text-box .kv-h2{ font-size: 2rem;}
.kv-box .kv-text-box .kv-p{ font-size: 1.2rem;}

.lp-100-container .wrapper{ padding: 0 5%;}
/*btn*/
.cta-btn, .phone-btn{ min-width: 12.5rem; }
.cta-btn a, .phone-btn a{ font-size: 1rem;}
.cta-btn p, .phone-btn p{ font-size: 1rem;}

.electric-box .electric-item .item-box .item-list .product-name, .electric-box .electric-item .item-box .item-list-last .product-name{ font-size: 1rem;}

.sec1-box .table-sp .sp-item{ font-size: 1.2rem;}
.lp-100-container .sutitle-s1{font-size: 2rem;}

}

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

/*btn*/
.lp-100-container .btn-box{ width: 100%; margin:0 0 20px; padding: 0; box-sizing: border-box; display: grid; grid-gap:5px; grid-template-columns: repeat(3, 1fr); justify-items: center;}
.lp-100-container .btn-box a{ margin-right: 0; min-width: 100% !important; padding: .15rem .25rem; display: flex; flex-direction: column-reverse;}
.lp-100-container .btn-box a:last-child{flex-direction: row;}

/*sec-1 table*/
.sec1-table{overflow-x: scroll; overflow-y: hidden; margin-bottom: 20px; position: relative;}

/*table*/
.mobile-show{ display: block; }
/*table*scrollbar*/
.lp-100-container .electric-table-box ::-webkit-scrollbar{ height: 8px; -webkit-appearance: none;}
.lp-100-container .electric-table-box ::-webkit-scrollbar-thumb{ background-color: #00a198 !important; border-radius: 0px; outline: 1px solid #00a198;}
.lp-100-container .electric-table-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);}
.lp-100-container .electric-table-box ::-webkit-scrollbar:hover{ height: 12px;}

/*家電table*/
.electric-table{overflow-x: scroll; overflow-y: hidden; position: relative;}
.electric-table table{ width: 850px; border: 0px;}
.lp-100-container .map .map-info li{ font-size: 1rem;}
.lp-100-container .zone-box{ width: 100%;}

.lp-100-container .nb-e3-box .scenario-content .scenario-box dl dd{ font-size: 1.2rem;}

/*自助申辦*/
.self-content{ margin-bottom: 1rem;}
.div-4-step-box{ flex-direction: column; align-items: center;}
.div-4-step-box .step-main{ flex-direction: row; width: 100%; padding:0 3rem; justify-content: flex-start;}
.div-4-step-box .step-main:first-child{ border-radius: 80px 20px 0 0; padding: 2rem 0.5rem 1rem 3rem;}
.div-4-step-box .step-main:last-child{ padding-bottom: .5rem;}
.div-4-step-box .step-main dl{ text-align: left; margin: 0; padding: 0 0 0 2rem;}
.div-4-step-box .step-main dl dt{ margin: 0; font-size: 1rem;}
.div-4-step-box .step-main dl dd{ margin-bottom: 20px;}
.div-4-step-box .icon-1, .div-4-step-box .icon-2{ padding-top: 0; width: 100%;}
.div-4-step-box .icon-1 img, .div-4-step-box .icon-2 img{ width: 12%;}
.div-4-step-box .icon-0{ width: 100%; padding-top: 0;}
.div-4-step-box .icon-0 img{ max-width: 15px;}
.div-4-step-box .icon-0::after{ clip-path: polygon(0 0, 100% 0, 100% 49%, 0 50%); left:0px; top:-1px}
.div-4-step-box .icon{ padding-top: 0; width: 3%;}

}

@media screen and (max-width: 750px) {
.ad-soundbox-box{ margin-bottom: 10px; }
.kv-box .kv-slogan{ width: 135%; left: -17%; top: 1rem;}
.kv-box .sp-tag { left: 20px;}
.kv-box .sp-tag .sp-tag-text{ font-size: .85rem; padding: 6px 10px;}
.kv-box .kv-bg{ padding-bottom: 7%;}
.kv-box .kv-text-box .kv-h2{ font-size: 1.4rem;}
.kv-box .kv-text-box .kv-p{ font-size: .9rem;}

.lp-100-container .smartlife-container .sec-default .swiper-slide-active .combo-card{min-height:550px}

.lp-100-container .wrapper{ padding: 0 1rem;}

.lp-100-container .sutitle-s1{ font-size: 1.5rem;}
.lp-100-container .title-h2 span, .lp-100-container .title-h2 span, .lp-100-container .title-h3 span{ display: block;}

.lp-100-container .title-icon img, .lp-100-container .title-icon img{max-width: 20px;}

.lp-100-container .title-h2 .bigger, .lp-100-container .title-h2 .bigger{ font-size: 120%; }
.lp-100-container table .bigger{ font-size: 160%;}
.sec-1 .sec1-box .sec1-table .table-85{ width: 100%;}

/*kv*/
.kv-box .kv-item{ top: 2.5%; width: 100%; align-items:flex-end;}
.kv-box .kv-sp{ margin-top: -5%; position: relative; /*z-index: 1;*/}
.kv-box .kv-item .kv-model{ margin-top: -1rem;}
.kv-box .kv-item .kv-model img{ max-height: 90vw; width: auto;}
.kv-box .kv-item .kv-slogan{ margin-left: -10%;}

/*sec-1 table*/
.sec1-box, .electric-box{padding-top: 1rem;}
.sec1-table table p{ font-size: .8rem;}
.sec1-table table th{ padding: 5px;}
.sec1-table table td{ padding: 5px;}
.sec1-table table th .name{ min-height: 3rem; font-size: .9rem;}
#sec04 .sec1-table table .point-list p{ width: 100%;}
.sec1-table table p i img{ max-width: 30px; height: auto;}
.sec1-table table .table-note span{font-size: .8rem;}

.sec-1 .sec1-box .sec1-table .table-199{ width: 100%;}/*199*/
.sec-1 .sec1-box .sec1-table .new-broadband{ width: 100%;}/*計量*/
.sec-1 .sec1-box .sec1-table .soundbox{ width: 100%;}/*soundbox*/
.sec1-table table .point-list{ width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; align-content:flex-start !important; text-align: left !important;}
.sec1-table table .point-list p{ text-align: left; margin-right: 0;}
.sec1-table table .point-list i{ vertical-align: middle;}
.sec1-table table .point-list i img{ max-width: 15px;}
.sec-1 .sec1-box  .sec1-table .soundbox .point-list p{ width: fit-content; display: block;}/*soundbox*/


.sec1-box .table-sp{ flex-direction: column;}
.sec1-box .table-sp .sp-item{ width: 100%; border-radius: 15px;}
.sec1-box .table-sp .sp-item-plus{ margin: .5rem 0;}

.sec1-table table .table-price{ font-size: 1.5rem;}

/*智慧電視四選一*/
.electric-box .electric-item .item-tag{ height: 60px;}
.electric-box .electric-item .item-tag .tag-bg{ width: 80%;}
.electric-box .electric-item .item-tag .tag-title{ font-size: 1.1rem; transform: translate(-50%, 5%);}
.electric-box .electric-item .item-tag .tag-title span{display: block;}

.electric-box .electric-item .item-box{ flex-wrap: wrap; margin-top: -51px;}
.electric-box .electric-item .item-box .item-list:first-child{ width: 100%;}
.electric-box .electric-item .item-box .item-list:nth-child(2), .electric-box .electric-item .item-box .item-list:nth-child(3) {width: 50%;}
.electric-box .electric-item .item-box .item-list-last{ width: 100%; padding: .5rem; margin-top: .5rem;}
.electric-box .electric-item .item-box .item-list-last .product-name span{ display: inline;}
.electric-box .electric-item .item-box .item-list-last .product-name{ margin-bottom: 0;}
.electric-box .electric-item .item-box .item-list-last img{ max-height:50px}


/*家電table*/
.electric-table table{ width: 735px;}
.electric-table table p{ font-size: .9rem;}
.electric-table table th{ padding: 5px;}
.electric-table table td{ padding: 5px;}
.electric-table table th .yellow{ font-size: 1.25rem; }
.electric-table table th .name{ min-height: 3rem; font-size: .9rem;}
.electric-table table .point-list{ width: 90%;}
.electric-table table .point-list i img{ max-width: 15px;}


/*btn*/
.lp-100-container .btn-box .btn.phone{display: flex;}
/*貼心提醒*/
.lp-100-container .terms-box{ background-color: #fff; margin-bottom: 20px;}
/*查詢頻道表*/
.lp-100-container .note{ font-size: .85rem;}

/*map*/
.lp-100-container .map{ flex-direction: column; margin:0 0 5%;}
.lp-100-container .map .map-info{ width: 100%; padding: 1rem; align-items:center; border-radius: 10px 10px 0 0;}
.lp-100-container .map figure{ width: 100%;}
.lp-100-container .map .map-info .map-title{ text-align: center;display: flex; flex-direction: column; align-items: center;}
.lp-100-container .map .map-info .map-title img{ padding-bottom: 5px; padding-right: 0; width: 50%;}
.lp-100-container .map figure img{ border-radius: 0 0 5px 5px;}
.lp-100-container .map .map-info li{ font-size: .9rem; width: 100%;}

/*map*/
.lp-100-container .zone-box{ flex-direction: column;  width: 100%;}
.lp-100-container .zone-box .dist{ font-size: 1rem; margin-right: 0; width: fit-content; margin-bottom: 5px; padding: 1px 6px; line-height: 1.6rem;}
.lp-100-container .zone-box .dist span{ display: block;}
.lp-100-container .zone-box .vil{ width: 100%; justify-content:center;}
.lp-100-container .zone-box .vil span{ font-size: .85rem; margin-bottom: 5px;}
.lp-100-container .accordion-content p, .lp-100-container .accordion-content .ck-content ol li, .lp-100-container .accordion-content .ck-content ul li{ font-size: .85rem;}

/*計量100G*/
.lp-100-container .nb-e3-box .scenario-content .scenario-box, .lp-100-container .nb-e3-box .piechart-content .piechart-box{ padding: 20px 10px; border-radius: 15px; box-sizing: border-box;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box dl{ border-radius: 15px; padding-top: 2.5rem;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-box-1, .lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-box-2, .lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-box-3, .lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-box-4{ background-position: 90% center; background-size: 25%;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-sutitle p{ font-size: 1.1rem;}

/*情境*/
.swiper-wrapper.scenario{ flex-wrap: nowrap; justify-content: flex-start; margin-bottom: 10px !important;}
.new-broadband-container .new-broadband-element-03 .nb-e3-box .scenario-content .scenario-box dl{ width: 100%; height: auto;}
.swiper-wrapper.scenario .swiper-slide{width: 100% !important; margin: 7% 0 0; box-sizing:border-box;}
.new-broadband-container .new-broadband-element-03 .nb-e3-box .scenario-content .scenario-box dl dt img{ width: 70%;}
.swiper-pagination.scenario{ display: block;}

/*QA*/
.qa-content .container-accordion label, input[type=radio]:checked+.container-accordion-content, .container-accordion .container-accordion-content{ font-size: .9rem; line-height: 140%;}
.qa-content{ margin-bottom: 1rem; padding: 1rem; }
.qa-content .container-accordion .accordion-navigation{ margin-bottom: .5rem; padding-bottom: .5rem;}
}
@media screen and (max-width: 650px) {
.lp-100-container .nb-e3-box .scenario-content .scenario-box dl{ min-height: 6rem; padding-top: 1.5rem;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box dl dd{ font-size: 1.1rem;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box dl dt img{ width: 70%;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario-sutitle{ margin-bottom: 10px;}
.lp-100-container .and-icon{ margin-top: -20px;}

/*自助申辦*/
.div-4-step-box .step-main dl{ padding: 0 0 0 .5rem;}
.div-4-step-box .step-pic{ width:70px;}
.div-4-step-box .step-main{ padding:0 2rem 0 2rem; }
.div-4-step-box .step-main:first-child{ padding: 1rem 0.5rem 0rem 2rem;}
.div-4-step-box .step-main dl dd{ margin-bottom: 0; line-height: 120%; font-size: .85rem;}

.lp-100-container .nb-e3-box .scenario-content .scenario-box .scenario{ grid-template-columns: repeat(1, 1fr); grid-row-gap:30px; margin-bottom: 10px; margin-top: 20px;}

.brform{
	display: block;
}

}

@media screen and (max-width: 500px) {
.sec-1 .sec1-box .sec1-table .new-broadband .point-list p{ margin-right: 0;}
.lp-100-container .nb-e3-box .scenario-content .scenario-box dl dt img{ width: 80%;}
.kv-box .kv-bg{ padding-bottom: 10%;}
.sec-1 .sec1-box .sec1-table .table-499{ width: 550px;}
.sec-1 .sec1-box .sec1-table .table-85{ width: 560px;}


}