.text-hidden-1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; 
	-webkit-box-orient: vertical;
}


.button,
input[type=button],
.button-sm {
	display: inline-block;
	color: #e6423e;
	font-weight: 600;
	border-radius: 20rem;
	transition-duration: .5s;
}

.button , input[type=button] {	
	background-color: #fff;
	font-size: 1.25rem;
	border: solid 0.125rem #e6423e;
	padding: 0.5rem 2rem;
	margin-bottom: 1.5rem;
}
.button:hover ,
input[type=button]:hover {
	color: #fff;
	background-color: #e6423e;
}

.btn-sm {
	border-radius: 1rem;
	padding: 0.25rem 1rem;
}

.bt-red {
	border-top: 0.5rem solid #e6423e;
}
.bt-green {
	border-top: 0.5rem solid #198754;
}
.full-height {
	height: 100vh;
}
.tdn {
	text-decoration: none;
}
.ls-1 {
	letter-spacing: 1px;
}
.bg01 {
	background: url('../img/bg01.png');
}
.bg-danger-1 {
	background-color: #cd3f3f;
}
.bg-danger-2 {
	background-color: #FDF0C4;
}
.text-danger-1 {
	color: #cd3f3f;
}
.text-blue {
	color: #007bc7;
}






.login {
	min-height: 100vh;
}


.login form i,
#ChangePassword1 form i,
#SecurityCode1 form i,
#SaveSetting1 form i {
	position: absolute;
	top: 1.7rem;
	right: 0.75rem;
	cursor: pointer;
	width: 4rem;
	height: 3rem;
	font-size: 1.25rem;
	line-height: 3rem;
	text-align: center;
}




.login-left {
	/*background: url('../img/rBg.jpg') center/cover no-repeat;	*/
	background-color: #e6423e;
	flex-direction: column;
	min-height: 100vh;
}
.login-left img {
	width: 25rem;
}
.login-left h1 {
	font-size: 2.75rem;
	letter-spacing: 3px;
	margin-top: 1rem;
}
@media (max-width: 992px) {
	.login-left {
		flex-direction: row;
		padding: 0.5rem;
		min-height: 78px;
		background-size: 992px auto;
	}
	.login-left img {
		width: 12rem;
		margin-right: 0.5rem;
	    margin-bottom: 0.25rem;
	}
	.login-left h1 {
		font-size: 1.5rem;
	}
}




.login-right {
	border-radius: 20px;
	padding: 3rem;
	margin: 3rem 0;	
	max-width: 35rem;
}
@media (max-width: 992px) {
	.login-right {
		padding: 1.5rem;
		max-width: 28rem;
	}
}
@media (max-width: 768px) {
	.login-right {
		max-width: 30rem;
	}
}
.login-right li {
	margin-bottom: 0.25rem;
}
.login-right ul,
.login-right li:last-child {
	margin-bottom: 0;
}
.login-right li a {
	color: #6c757d;
	text-decoration: none;
}






.was-validated .form-control:valid,
.form-control.is-valid {
	border-color: #ced4da;
	background-image: none;
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
	border-color: #ced4da;
	box-shadow: none;
}
.was-validated .form-select:valid, .form-select.is-valid {
	border-color: #ced4da;
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
	border-color: #ced4da;
	-webkit-box-shadow: none;
	box-shadow: none;
}





.navbar {
	/*background: url('../img/rBg.jpg') center no-repeat;*/
	background-color: #e6423e;
}
.navbar .navbar-brand {
	font-size: 1.65rem;
	color: #fff;
	font-weight: bolder;
}
.navbar .navbar-brand:hover {
	color: #fff;
}
.navbar .navbar-brand img {
	width: 120px;
}
.breadcrumb-fixed {
	position: fixed;
	width: 100%;
	z-index:999;
}
.breadcrumb-item a {
	color: #212529;
}



.borderR20 {
	border-radius: 20px;
}






.welcome,
.settingPage {
	min-height: calc(100vh - 199px);
}

.welcome .userName h5 {
	color: #007bc7;
}
.welcome .setting01 {
	margin-bottom: 3rem;
}
.welcome .setting01:hover img {
	transform: rotate(-15deg);
}
.welcome .setting01 a {
	color: #212529;
	letter-spacing: 1px;
	font-size: 1.25rem;
}
.welcome .setting01 a:hover {
	color: #e6423e;
}
.welcome .setting01 img {
	width: 7.5rem;
	transition: 1s;
}
@media (max-width: 992px) {
	.welcome .setting01 {
		margin-bottom: 1.5rem;
	}
	.welcome .setting01 img {
		width: 5.5rem;
	}
	.navbar .navbar-brand {
		font-size: 1.5rem;
	}
	.navbar .navbar-brand img {
		width: 115px;
	}
}








.welcome .plans {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 20px;
}
.welcome .plan img {
	max-width: 100%;
	width: 20rem;
	filter: contrast(0.9);
	transition: 0.3s;
}
.welcome .plan:hover img {
	filter: contrast(1);
}
.welcome .plan a {
	color: #212529;
}
.welcome .plan h6 {
	max-width: 20rem;
}




.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
	background: rgba(164, 0, 0, .6);
}





.settingPage .main-title {
	padding: 1rem 0.5rem 0;
	letter-spacing: 1px;
	font-weight: bold;
	color: #007bc7;
} 
.settingPage .pageInfo {
	padding: 0.5rem 0.75rem;
}
.settingPage .pageInfo2 {
	padding: 0 0.6rem;
	margin-bottom: 1rem;
}
@media (max-width: 768px) {
	.settingPage .main-title {
		padding: 1rem 0.225rem 0;
	} 
	.settingPage .pageInfo {
		padding: 0.5rem 0.2rem 0;
	}
	.settingPage .pageInfo2 {
		padding: 0 0.3rem;
	}
}






.setTime {
	width: 98%;
	margin: 1rem auto 0;
}
.setTime th,
.setTime tr {
	vertical-align: middle;
}
@media (max-width: 576px) {
	.setTime td {
		font-size: 0.85rem;
		text-align: left;
	}
}





.rwd-table {
	border-collapse: collapse;
	width: 98%;
	/*letter-spacing: 1px;*/
	font-size: 1rem;
	line-height: 2;
	background-color: #fff;
	vertical-align: middle;
	margin: 0 auto;
	margin-bottom: 1.5rem;
}
.rwd-table th {
	font-size: 1.1rem;
}
.rwd-table th,
.rwd-table td {
	padding: 0.5rem;
	text-align: center;
	min-height: 3.5rem;
}
.payment .rwd-table td {
	padding: 1rem 0.5rem;
}
@media (max-width: 576px) {
	.payment .rwd-table td {
		padding: 0.1rem 0.75rem;
	}
}
.rwd-table tr,
.paymentRec.rwd-table tr,
.payment .rwd-table thead tr {
	height: 3rem;
	width: 100%;
}
.rwd-table tbody tr:nth-child(2n),
.setTime tbody tr:nth-child(2n) {
	background-color: rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 576px) {  
	.rwd-table tr {
		border: 1px solid #dbdbdb;
	}  
	.rwd-table thead {
		display: none;
	}  
	.rwd-table td {
		display: block;
		border: none;
		min-height: 1.5rem;
		text-align: left;
	}
	.rwd-table td:before {
		content: attr(data-th) "";
		text-align: left;
		font-weight: bold;
		color: #007bc7;
	}
	.rwd-table th,
	.rwd-table td {
		padding: 0.15rem 1rem;
	}
	.rwd-table tr td:first-child {
		margin-top: 0.5rem;
	}
	.rwd-table tr td:last-child {
		margin-bottom: 0.5rem;
	}
}
.rwd-table ul,
.rwd-table ol {
	margin-bottom: 0;
	padding-left: 0;
}
.payment .rwd-table ul {
	list-style: none;
}
.payment .li-red {
	list-style-type: none;
	line-height: 1.5;
	text-indent: -0.5rem;
	padding-left: 2.25rem;
}
.payment .li-red li {
	margin-bottom: 0.25rem;
}
.payment .li-red li:last-child {
	margin-bottom: 0;
}
.payment .li-red li:before {
	width: 0.5rem;
	content: '•';
	color: #007bc7;
	display: inline-block;		
}
.payment .PayByCreditcard {
	justify-content: end;
}
@media screen and (max-width: 1200px) {	 
	.payment .li-red, .mb-pe-0 {
		padding-left: 0;
	}
	.payment .address {
		padding-left: 5em;
		text-indent: -5em;
		line-height: 1.5;
	}
	.payment .li-red li {
		text-indent: -0.5rem;
		padding-left: 1rem;
	}
	.payment .PayByCreditcard {
		justify-content: start;
	}
}

.li-red {
	list-style-type: none;
	text-indent: -0.5rem;
	padding-left: 1.2rem;
}

	.li-red li::before {
		width: 0.5rem;
		content: "•";
		color: rgb(205, 63, 63);
		display: inline-block;
	}

.li-none {
	list-style-type: none;
	text-indent: -2rem;
	padding-left: 1.5rem;
}

.li-none li::before {
	content: "";
}


.way a {
	color: #212529;
}

	.way h5,
	.way img {
		transition: .5s;
	}

	.way img {
		/* width: 150px; */
		width: 12.5rem;
		max-width: 100%;
	}

	.way a:hover img {
		transform: translateY(10px);
	}

	#linepay:hover h5 {
		color: #00913A;
	}

	#creditcard:hover h5 {
		color: #F39800;
	}

	#cvs:hover h5 {
		color: #C30D23;
	}

	#atm:hover h5 {
		color: #00A0E9;
	}



	.barcode img {
		display: block;
		margin: 1.75rem auto;
	}

	.barcode img,
	.cvsLogo img {
		max-width: 100%;
	}

	.cvsLogo img {
		width: 25rem;
	}





	.PayByCreditcard td:first-child {
		width: 12%;
	}

	.PayByCreditcard .form-check-inline {
		margin-right: 0.25rem;
	}

	@media (max-width: 1200px) {
		.PayByCreditcard td:first-child {
			width: 15%;
		}
	}

	@media (max-width: 576px) {
		.PayByCreditcard td:first-child {
			width: 30%;
		}
	}

	.PayByCreditcard .CreditCardInfo {
		position: relative;
		border: dotted 2px #e6423e;
	}

		.PayByCreditcard .CreditCardInfo h5 {
			position: absolute;
			top: -20px;
			left: -2px;
			background-color: #e6423e;
			width: auto;
		}

	.PayByCreditcard form {
		margin-top: 0.15rem;
	}






	.PaymentResult {
		position: relative;
		margin: 6rem 0 1rem;
	}

		.PaymentResult .resultImg {
			position: absolute;
			width: 150px;
			top: -12%;
			left: 50%;
			transform: translateX(-50%);
		}

		.PaymentResult .main-title {
			margin-top: 3.5rem;
		}

		.PaymentResult ul {
			list-style: none;
		}





	#EinvoiceQA ul {
		list-style: none;
		padding: 1rem 1.75rem 0rem;
	}






	/* 上網時間管理Checkbox */
	input[type='checkbox'].checkbox-time {
		opacity: 0;
		z-index: -1;
	}

		input[type='checkbox'].checkbox-time + label {
			width: 1.5rem;
			height: 1.5rem;
			display: block;
			position: relative;
			margin: auto;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			text-indent: -999px;
			overflow: hidden;
			border: 0.125rem solid #dbdbdb;
			cursor: pointer;
			background: transparent;
		}

			input[type='checkbox'].checkbox-time + label:before,
			input[type='checkbox'].checkbox-time + label:after {
				content: '';
				width: 20px;
				height: 4px;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				position: absolute;
				margin: auto;
				background: transparent;
				transition: 0.2s ease all;
				-moz-transition: 0.2s ease all;
				-webkit-transition: 0.2s ease all;
			}

		input[type='checkbox'].checkbox-time:checked + label:before,
		input[type='checkbox'].checkbox-time:checked + label:after {
			transition: 0.4s ease all;
			-moz-transition: 0.4s ease all;
			-webkit-transition: 0.4s ease all;
			background: #e6423e;
		}

		input[type='checkbox'].checkbox-time:checked + label:before {
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}

		input[type='checkbox'].checkbox-time:checked + label:after {
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
		}






	.main-footer {
		padding: 2rem 0;
	}

		.main-footer .company {
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			padding-left: 0;
		}

			.main-footer .company a {
				color: #fff;
			}

			.main-footer .company li::after {
				content: "｜";
				color: #fff;
				margin: 0px 0.25rem;
			}

			.main-footer .company li:last-child::after {
				content: "";
			}

		.main-footer .tel {
			display: flex;
			align-items: center;
			justify-content: end;
		}

	@media (max-width: 576px) {
		.main-footer p {
			text-align: center;
			margin-bottom: 0;
		}

		.main-footer .row {
			flex-direction: column-reverse;
		}

		.main-footer .company {
			justify-content: center;
		}

			.main-footer .company li {
				margin-bottom: 0.5rem;
			}

		.main-footer .tel {
			justify-content: center;
			margin-bottom: 1rem;
		}
	}








	#back-to-top {
		position: fixed;
		bottom: 25px;
		right: 25px;
		color: #e6423e;
		background-color: #fff;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 2;
		border: solid 0.188rem #e6423e;
		border-radius: 50%;
		z-index: 999;
	}