@charset "UTF-8";

/*
Theme Name:   ABC Child
Description:  Child Theme base on twenty-nineteen
Template:     twentynineteen
Version:      1.0.0
Text Domain:  twentynineteenchild
*/
:root {
	--lolo-header-bg-color: #3B3B37;
	--lolo-header-text-color: #F2C873;
	--lolo-grey-bg-color: #A5A4A2;
	--lolo-black-bg-color: #000000;
	--lolo-bg-radius: 25px;
	--lolo-grey-bg-tab-active-color: #774E16;
	--lolo-grey-bg-tab-color: #333333;
	--lolo-black-bg-tab-active-color: #F2C97F;
	--lolo-black-bg-tab-color: #E5E5E5;
	--lolo-status-bg-color: #EAEAEA;
	--lolo-btn-color: linear-gradient(90deg, rgba(255, 236, 198, 1) 0%, rgba(255, 221, 152, 1) 32%, rgba(242, 200, 115, 1) 61%, rgba(222, 183, 103, 1) 90%, rgba(229, 188, 106, 1) 100%);
	--lolo-btn-text-color: #333333;
	--lolo-banner-radius: 0 0 0 60px;
	--lolo-country-box-radius: 25px 25px 12px 12px;
	--lolo-country-image-radius: 25px 25px 0 30px;
	--csl-header-bg-color: #FAA61A;
	--csl-header-text-color: #FFFFFF;
	--csl-grey-bg-color: #EFEFEF;
	--csl-white-bg-color: #FFFFFF;
	--csl-bg-radius: 25px;
	--csl-grey-bg-tab-active-color: #FAA61A;
	--csl-grey-bg-tab-color: #B2B2B2;
	--csl-black-bg-tab-active-color: #FAA61A;
	--csl-black-bg-tab-color: #B2B2B2;
	--csl-status-bg-color: #EAEAEA;
	--csl-btn-color: linear-gradient(90deg, rgba(255, 236, 198, 1) 0%, rgba(255, 221, 152, 1) 32%, rgba(242, 200, 115, 1) 61%, rgba(222, 183, 103, 1) 90%, rgba(229, 188, 106, 1) 100%);
	--csl-btn-text-color: #333333;
	--csl-banner-radius: 0 0 60px 60px;
	--csl-country-box-radius: 25px 25px 12px 12px;
	--csl-country-image-radius: 25px 25px 12px 12px;
	--card-bg-color: #faa61a;
	--card-text-color: #FFFFFF;
	--checkbox-checked-bg-color: #faa61a;
	--checkbox-checked-color: white;
	--dp-card-header-bg-color: #92c64c;
	--qp-card-header-bg-color: #29abe2;
	--tag-bg-color: #faa61a;
	--tag-text-color: #ffffff;
	--text-color: #faa61a;
	--text-price-color: #faa61a;
	--btn-bg-color: #faa61a;
	--btn-text-color: white;
	--usersChoice--text-color: #c942ce;
	--option-bg-color: #faa61a;
	--option-text-color: white;
	--reset-btn-bg-color: #f4f4f4;
	--reset-btn-text-color: black;
	--apply-btn-bg-color: #faa61a;
	--apply-btn-text-color: white;
}

:root body.brand-1010 {
	--card-bg-color: #444441;
	--card-text-color: #FFFFFF;
	--checkbox-checked-bg-color: linear-gradient(to bottom, #debb74, #efcd8a 38%, #daaf69 81%, #c8a061);
	--checkbox-checked-color: black;
	--dp-card-header-bg-color: #488351;
	--qp-card-header-bg-color: #2c72ad;
	--tag-bg-color: #f2c97f;
	--tag-text-color: #000000;
	--text-color: #444441;
	--text-price-color: #724d20;
	--btn-bg-color: linear-gradient(to bottom, #debb74, #efcd8a 38%, #daaf69 81%, #c8a061);
	--btn-text-color: #333333;
	--usersChoice--text-color: #ce3731;
	--option-bg-color: #333333;
	--option-text-color: white;
	--reset-btn-bg-color: #eaeaea;
	--reset-btn-text-color: black;
	--apply-btn-bg-color: #f2c97f;
	--apply-btn-text-color: black;
	--title-color: white;
	--header-title-color: #F2C97F;
	--confirm-btn-disabled-bg-color: #8c7751;
	--btn-close-color: black;
}

:root body.brand-csl {
	--card-bg-color: #faa61a;
	--card-text-color: #FFFFFF;
	--checkbox-checked-bg-color: #faa61a;
	--checkbox-checked-color: white;
	--dp-card-header-bg-color: #92c64c;
	--qp-card-header-bg-color: #29abe2;
	--tag-bg-color: #faa61a;
	--tag-text-color: #ffffff;
	--text-color: #333333;
	--text-price-color: #faa61a;
	--btn-bg-color: #faa61a;
	--btn-text-color: white;
	--usersChoice--text-color: #c942ce;
	--option-bg-color: #faa61a;
	--option-text-color: white;
	--reset-btn-bg-color: #f4f4f4;
	--reset-btn-text-color: black;
	--apply-btn-bg-color: #faa61a;
	--apply-btn-text-color: white;
	--title-color: black;
	--header-title-color: #ffffff;
	--confirm-btn-disabled-bg-color: #f5ca85;
	--btn-close-color: #faa61a;
}

:root body.brand-cs_postpaid {
	--card-bg-color: #be81ef;
	--card-text-color: #FFFFFF;
	--checkbox-checked-bg-color: #be81ef;
	--checkbox-checked-color: white;
	--dp-card-header-bg-724d20color: #92c64c;
	--qp-card-header-bg-color: #29abe2;
	--tag-bg-color: #be81ef;
	--tag-text-color: #ffffff;
	--text-color: #333333;
	--text-price-color: #024283;
	--btn-bg-color: #bf81f0;
	--btn-text-color: white;
	--usersChoice--text-color: #c942ce;
	--option-bg-color: #bf81f0;
	--option-text-color: white;
	--reset-btn-bg-color: #f4f4f4;
	--reset-btn-text-color: black;
	--apply-btn-bg-color: linear-gradient(to right, #5e2d8d, #323783 51%, #2f3882 55%, #09417a);
	--apply-btn-text-color: white;
	--title-color: black;
	--header-title-color: #09417a;
	--confirm-btn-disabled-bg-color: #d8baf1;
	--btn-close-color: #c942ce;
}

.flex {
	display: flex;
}

.flex-center {
	justify-content: center;
	align-items: center;
}

html {
	width: 100%;
}

body {
	width: 100%;
	height: 100%;
	max-width: 1125px;
	margin: 0 auto;
	font-family: "Helvetica Neue", "Roboto", "Noto Sans TC", Segoe UI, sans-serif;
}

code {
	font-family: "Helvetica Neue", "Roboto", "Noto Sans TC", Segoe UI, sans-serif;
}

body .en-us,
body .zh-hk,
body .brand-csl,
body .brand-1010,
body .brand-cs_postpaid,
body .brand-cs_prepaid,
body .user-mass,
body .user-corp,
body .service-ABC,
body .service-DRDP,
body .plan-1C1D,
body .plan-198,
body .sim-H,
body .sim-C {
	display: none;
}

body.en-us .zh-hk,
body.zh-hk .en-us,
body.brand-csl .brand-1010,
body.brand-csl .brand-cs_postpaid,
body.brand-csl .brand-cs_prepaid,
body.brand-1010 .brand-csl,
body.brand-1010 .brand-cs_postpaid,
body.brand-1010 .brand-cs_prepaid,
body.brand-cs_postpaid .brand-csl,
body.brand-cs_postpaid .brand-1010,
body.brand-cs_postpaid .brand-cs_prepaid,
body.brand-cs_prepaid .brand-csl,
body.brand-cs_prepaid .brand-1010,
body.brand-cs_prepaid .brand-cs_postpaid,
body.user-mass .user-corp,
body.user-corp .user-mass,
body.service-ABC .service-DRDP,
body.service-DRDP .service-ABC,
body.plan-1C1D .plan-198,
body.plan-198 .plan-1C1D,
body.sim-H .sim-C,
body.sim-C .sim-H {
	display: none !important;
}

body.en-us .en-us,
body.zh-hk .zh-hk,
body.brand-csl .brand-csl,
body.brand-1010 .brand-1010,
body.brand-cs_postpaid .brand-cs_postpaid,
body.brand-cs_prepaid .brand-cs_prepaid,
body.user-mass .user-mass,
body.user-corp .user-corp,
body.service-ABC .service-ABC,
body.service-DRDP .service-DRDP,
body.plan-1C1D .plan-1C1D,
body.plan-198 .plan-198,
body.sim-H .sim-H,
body.sim-C .sim-C {
	display: block;
}

body.en-us span.en-us,
body.zh-hk span.zh-hk,
body.brand-csl span.brand-csl,
body.brand-1010 span.brand-1010,
body.brand-cs_postpaid span.brand-cs_postpaid,
body.brand-cs_prepaid span.brand-cs_prepaid,
body.user-mass span.user-mass,
body.user-corp span.user-corp,
body.service-ABC span.service-ABC,
body.service-DRDP span.service-DRDP,
body.plan-1C1D span.plan-1C1D,
body.plan-198 span.plan-198,
body.sim-H span.sim-H,
body.sim-C span.sim-C {
	display: inline;
}

body.en-us mark.en-us,
body.zh-hk mark.zh-hk,
body.brand-csl mark.brand-csl,
body.brand-1010 mark.brand-1010,
body.brand-cs_postpaid mark.brand-cs_postpaid,
body.brand-cs_prepaid mark.brand-cs_prepaid,
body.user-mass mark.user-mass,
body.user-corp mark.user-corp,
body.service-ABC mark.service-ABC,
body.service-DRDP mark.service-DRDP,
body.plan-1C1D mark.plan-1C1D,
body.plan-198 mark.plan-198,
body.sim-H mark.sim-H,
body.sim-C mark.sim-C {
	display: inline;
}

body.brand-csl {
	background: #EFEFEF;
	color: #333333;
}

body.brand-cs_postpaid {
	background: #f2f2f2;
	color: #16171c;
}

body.brand-1010 {
	background: #262522;
	color: white;
}

body.brand-cs_prepaid {
	background: #151515;
	color: white;
}

a {
	color: #333333;
}

.brand-1010 a {
	color: white;
}

.brand-cs_postpaid a {
	color: #16171c;
}

.remark a,
#tnc-csl a {
	color: #faa61a;
}

.brand-1010 .remark a,
#tnc-1010 a {
	color: #cb9c57;
}

.brand-cs_postpaid .remark a,
#tnc-cs_postpaid a {
	color: #BE81EF;
}

button {
	font: 400 3.5vw "Helvetica Neue", "Roboto", "Noto Sans TC", Segoe UI, sans-serif;
}

button:focus {
	outline: none !important;
}

content button,
content .wp-block-button {
	border-radius: 3vw;
	color: white;
	background-color: #faa61a;
	text-align: center;
	font-size: 4vw;
	font-weight: bold;
	line-height: 8vw;
	margin: 1vw 0;
}

.brand-1010 content button,
.brand-1010 content .wp-block-button {
	background: linear-gradient(to bottom, #debb74, #efcd8a 38%, #daaf69 81%, #c8a061);
	color: #333333;
}

.brand-1010 content #coupon.statusBox button {
	background: #f15a24;
}

.brand-1010 content #passStatus.statusBox button {
	background: #f15a24;
}

.brand-cs_postpaid content .wp-block-button {
	color: #BE81EF;
}

.brand-cs_postpaid offerlist#pre-purchase-offerlist button.item-button {
	background: linear-gradient(90deg, #622E90 0%, #0E407B 100%);
}

.brand-cs_postpaid button.item-button {
	color: #ffffff;
}

.wp-block-button.grey-btn {
	background-color: #ededed;
}

.wp-block-button.grey-btn a {
	color: #333333;
}

content .wp-block-button a {
	text-decoration: none;
	color: #ffffff;
}

#tnc-1010,
#tnc-csl,
#tnc-cs_postpaid {
	display: none;
	font-size: 5vw;
	padding: 0 4vw 2vw 3vw;
	line-height: 1.2;
}

#tnc-1010 p,
#tnc-csl p,
#tnc-cs_postpaid p,
#tnc-1010 li,
#tnc-csl li,
#tnc-cs_postpaid li {
	font-size: 2.5vw;
}

#macau-csl,
#macau-1010,
#macau-cs_postpaid {
	display: none;
	font-size: 5vw;
	padding: 0 4vw;
	line-height: 1.2;
}

/* #smartbanner{
	display: none;
} */
#mask {
	display: none;
	z-index: 1000;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #000000;
	opacity: 0.1;
}

header {
	width: 100%;
	height: 2rem;
	/* display: flex; */
	justify-content: space-between;
	align-items: center;
	max-width: 1125px;
	position: relative;
	top: 0;
	z-index: 999;
	display: none;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

body.brand-csl header {
	background: #faa61a;
}

body.brand-cs_postpaid header {
	background: #ffffff;
}

body.brand-1010 header {
	background: #000000;
}

body.brand-cs_prepaid header {
	background: #000000;
}

header div,
header button {
	height: 100%;
	display: flex;
	margin: 0 10px;
	text-align: center;
	background: none;
	border: 0;
	color: var(--header-title-color);
}

header button#back {
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	visibility: hidden;
	width: 13%;
	background-position: center center;
	height: 65%;
}

.brand-1010 header button#back {
	background-image: url("../../uploads/2024/03/back_arrow_icon_1010.png");
}

.brand-csl header button#back {
	background-image: url("../../uploads/2024/03/back_arrow_icon_csl-e1710379763161.png");
}

.brand-cs_postpaid header button#back {
	height: 50%;
	background-image: url("../../uploads/2024/03/back_arrow_icon_cs_postpaid.png");
}

header button#back.hasBack {
	visibility: visible;
}

header button#back.changetoMore {
	background-image: url("../../uploads/2020/12/icon_menu.png");
	visibility: visible;
}

.brand-cs_postpaid header button#back.changetoMore {
	background-image: url("../../uploads/2024/03/icon_menu_cs_postpaid.png");
}

header div#title {
	width: auto;
	align-items: center;
	font-size: 4.4vw;
	font-weight: bold;
	white-space: nowrap;
}

header div#title img {
	max-width: 100%;
	height: 1.5rem;
	margin-top: 0.35rem;
	margin-bottom: 0.2rem;
}

header button#lang {
	font-size: 3vw;
	cursor: pointer;
	width: 13%;
	align-items: center;
}

header button#lang::before {
	min-width: 40px;
	width: auto;
	text-align: center;
}

body.zh-hk header button#lang::before {
	content: "EN";
}

body.en-us header button#lang::before {
	content: "中文";
}

content {
	display: block;
	padding: 0 2vw;
	margin-bottom: 10%;
	font-size: 3.5vw;
	line-height: 1.5;
}

content[class*=pre-purchase-offer-] {
	font-size: 5vw;
}

footer {
	height: 10%;
	width: 100%;
	max-width: 1125px;
	position: fixed;
	bottom: 0;
	display: flex;
	z-index: 999;
}

body.brand-csl footer,
body.brand-cs_postpaid footer {
	background: #ffffff;
}

body.brand-1010 footer {
	background: #333333;
	color: #ffffff;
}

footer button {
	display: flex;
	height: 100%;
	width: 100%;
	align-items: flex-end;
	justify-content: center;
	cursor: pointer;
	border: 0;
	background: center 0px no-repeat;
	color: #b3b3b3;
	background-size: auto 65%;
	position: relative;
}

footer button::after {
	/* margin-top: 75px; */
	font-size: 3vw;
	line-height: 1;
	position: absolute;
	bottom: 10%;
	white-space: nowrap;
	width: 100%;
	text-align: center;
	margin-left: -50%;
	left: 50%;
}

footer button.on::after {
	color: #f7931e;
}

.brand-1010 footer button.on::after {
	color: #f9e05c;
}

footer button.dim:focus {
	outline: none !important;
}

footer button#footer-offer {
	background-image: url("../../uploads/2019/10/offer_icon_1.png");
}

footer button#footer-offer.on {
	background-image: url("../../uploads/2019/11/offer_icon_2.png");
}

.brand-1010 footer button#footer-offer.on {
	background-image: url("../../uploads/2019/10/offer_icon_2.png");
}

body.zh-hk footer button#footer-offer::after {
	content: "特別優惠";
}

body.en-us footer button#footer-offer::after {
	content: "Special Offer";
}

footer button#footer-daypass {
	background-image: url("../../uploads/2019/12/land_Offer_icon_disable.png");
}

footer button#footer-daypass.on {
	background-image: url("../../uploads/2019/12/land_Offer_icon_csl.png");
}

.brand-1010 footer button#footer-daypass.on {
	background-image: url("../../uploads/2019/12/land_Offer_icon_1010.png");
}

body.zh-hk footer button#footer-daypass::after {
	content: "數據漫遊";
}

body.en-us footer button#footer-daypass::after {
	content: "Data Roaming";
}

footer button#footer-myaccount {
	background-image: url("../../uploads/2019/10/my_account_icon_1.png");
}

footer button#footer-myaccount.on {
	background-image: url("../../uploads/2019/11/my_account_icon_2.png");
}

.brand-1010 footer button#footer-myaccount.on {
	background-image: url("../../uploads/2019/10/my_account_icon_2.png");
}

body.zh-hk footer button#footer-myaccount::after {
	content: "帳戶";
}

body.en-us footer button#footer-myaccount::after {
	content: "Account";
}

footer button#footer-coupons {
	background-image: url("../../uploads/2019/10/coupon_icon_1.png");
}

footer button#footer-coupons.on {
	background-image: url("../../uploads/2019/11/coupon_icon_2.png");
}

.brand-1010 footer button#footer-coupons.on {
	background-image: url("../../uploads/2019/10/coupon_icon_2.png");
}

body.zh-hk footer button#footer-coupons::after {
	content: "我的通行證";
}

body.en-us footer button#footer-coupons::after {
	content: "My Roaming Pass";
}

footer button#footer-86easy {
	background-image: url("../../uploads/2019/10/86_easy_icon_1.png");
}

footer button#footer-86easy.on {
	background-image: url("../../uploads/2019/11/86_easy_icon_2.png");
}

.brand-1010 footer button#footer-86easy.on {
	background-image: url("../../uploads/2019/10/86_easy_icon_2.png");
}

body.zh-hk footer button#footer-86easy::after {
	content: "86-易";
}

body.en-us footer button#footer-86easy::after {
	content: "86-Easy";
}

footer button#footer-tips {
	background-image: url("../../uploads/2019/10/tips_icon_1.png");
}

footer button#footer-tips.on {
	background-image: url("../../uploads/2019/11/tips_icon_2.png");
}

.brand-1010 footer button#footer-tips.on {
	background-image: url("../../uploads/2019/10/tips_icon_2.png");
}

body.zh-hk footer button#footer-tips::after {
	content: "漫遊提示";
}

body.en-us footer button#footer-tips::after {
	content: "Roaming Tips";
}

#sidebar {
	left: -80%;
	width: 80%;
	display: inline-block;
	position: fixed;
	background: white;
	height: 100%;
	z-index: 1;
	font-size: 3.2vw;
	color: #333333;
}

.brand-1010 #sidebar {
	background: #333333;
	color: white;
}

.brand-cs_postpaid #sidebar {
	background: white;
	color: #16171C;
}

#sidebar>div {
	margin: 10px;
	font-size: 4vw;
	font-weight: bold;
}

#sidebar>span {
	margin: 10px;
}

hr {
	width: 96%;
	margin: 0 auto;
	border: none;
	border-top: #d8d8d8 1px solid;
}

.brand-cs_postpaid hr {
	border-top: #ececec 1px solid;
}

#sidebar a {
	padding-left: 11%;
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
	display: block;
	position: relative;
	height: 4vh;
	line-height: 4vh;
	margin: 10px;
}

.brand-csl #sidebar a#sidebar-prepurchase {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-prepurchase.png);
}

.brand-1010 #sidebar a#sidebar-prepurchase {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-prepurchase-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-prepurchase {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-prepurchase.png);
}

.brand-csl #sidebar a#sidebar-my-account,
.brand-csl #sidebar a#sidebar-my-account-v1 {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-usage.png);
}

.brand-1010 #sidebar a#sidebar-my-account,
.brand-1010 #sidebar a#sidebar-my-account-v1 {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-usage-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-my-account,
.brand-cs_postpaid #sidebar a#sidebar-my-account-v1 {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-usage.png);
}

.brand-csl #sidebar a#sidebar-usage-history {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-usage.png);
}

.brand-1010 #sidebar a#sidebar-usage-history {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-usage-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-usage-history {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-usage.png);
}

.brand-csl #sidebar a#sidebar-roaming-option {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-landing.png);
}

.brand-1010 #sidebar a#sidebar-roaming-option {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-landing-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-roaming-option {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-landing.png);
}

.brand-csl #sidebar a#sidebar-setting,
.brand-csl #sidebar a#sidebar-roam-preference,
.brand-csl #sidebar a#sidebar-setting-v1 {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-setting.png);
}

.brand-1010 #sidebar a#sidebar-setting,
.brand-1010 #sidebar a#sidebar-roam-preference,
.brand-1010 #sidebar a#sidebar-setting-v1 {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-setting-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-setting,
.brand-cs_postpaid #sidebar a#sidebar-roam-preference,
.brand-cs_postpaid #sidebar a#sidebar-setting-v1 {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-setting.png);
}

.brand-csl #sidebar a#sidebar-86-easy {
	background-image: url(/abc_cms/wp-content/uploads/2022/05/sidebar-csl-86e.png);
}

.brand-1010 #sidebar a#sidebar-86-easy {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-86e-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-86-easy {
	background-image: url(/abc_cms/wp-content/uploads/2022/05/sidebar-cs-postpaid-86e.png);
}

.brand-csl #sidebar a#sidebar-1c2n,
.brand-csl #sidebar a#sidebar-1c2n-visitor {
	background-image: url(/abc_cms/wp-content/uploads/2022/05/sidebar-csl-1c2n-visitor.png);
}

.brand-1010 #sidebar a#sidebar-1c2n,
.brand-1010 #sidebar a#sidebar-1c2n-visitor {
	background-image: url(/abc_cms/wp-content/uploads/2022/05/sidebar-1010-1c2n-visitor.png);
}

.brand-cs_postpaid #sidebar a#sidebar-1c2n,
.brand-cs_postpaid #sidebar a#sidebar-1c2n-visitor {
	background-image: url(/abc_cms/wp-content/uploads/2022/05/sidebar-cs-postpaid-1c2n-visitor.png);
}

.brand-csl #sidebar a#sidebar-86-easy {
	background-image: url(/abc_cms/wp-content/uploads/2022/05/sidebar-csl-86e.png);
}

.brand-1010 #sidebar a#sidebar-86-easy {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-86e-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-86-easy {
	background-image: url(/abc_cms/wp-content/uploads/2022/05/sidebar-cs-postpaid-86e.png);
}

.brand-csl #sidebar a#sidebar-tariff-price {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-tariff.png);
}

.brand-1010 #sidebar a#sidebar-tariff-price {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-tariff-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-tariff-price {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-tariff.png);
}

.brand-csl #sidebar a#sidebar-idd {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-idd.png);
}

.brand-1010 #sidebar a#sidebar-idd {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-idd-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-idd {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-idd.png);
}

#sidebar a#sidebar-whatsapp {
	height: 6vh;
	background-size: 4vh;
	line-height: 2vh;
}

#sidebar a#sidebar-whatsapp .brand-1010 {
	color: #fffdfd;
}

#sidebar a#sidebar-whatsapp .brand-csl {
	color: #faa61a;
}

#sidebar a#sidebar-whatsapp .brand-cs_postpaid {
	color: #be81ef;
}

.brand-csl #sidebar a#sidebar-whatsapp {
	background-image: url(/abc_cms/wp-content/uploads/2022/12/sidebar-whatsapp.png);
}

.brand-1010 #sidebar a#sidebar-whatsapp {
	background-image: url(/abc_cms/wp-content/uploads/2022/12/sidebar-whatsapp.png);
}

.brand-cs_postpaid #sidebar a#sidebar-whatsapp {
	background-image: url(/abc_cms/wp-content/uploads/2022/12/sidebar-whatsapp.png);
}

#sidebar a#sidebar-overseas-emergency-hotline {
	height: 6vh;
	background-size: 4vh;
	line-height: 2vh;
}

#sidebar a#sidebar-overseas-emergency-hotline .brand-1010 {
	color: #cb9c57;
}

#sidebar a#sidebar-overseas-emergency-hotline .brand-csl {
	color: #faa61a;
}

#sidebar a#sidebar-overseas-emergency-hotline .brand-cs_postpaid {
	color: #be81ef;
}

.brand-csl #sidebar a#sidebar-overseas-emergency-hotline {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-toll-free.png);
}

.brand-1010 #sidebar a#sidebar-overseas-emergency-hotline {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-toll-free-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-overseas-emergency-hotline {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-toll-free.png);
}

/*#sidebar #sidebar-toll-free-hotline {
	height: 9vh;
	background-size: 4vh;
	line-height: 2vh;
}
#sidebar #sidebar-toll-free-hotline .brand-1010 span.zh-hk,
#sidebar #sidebar-toll-free-hotline .brand-1010 span.en-us,
#sidebar #sidebar-toll-free-hotline .brand-csl span.zh-hk,
#sidebar #sidebar-toll-free-hotline .brand-csl span.en-us {
	position: relative;
}
#sidebar #sidebar-toll-free-hotline a {
	line-height: unset;
	margin: unset;
	padding: unset;
	display: inline;
}*/
.brand-csl #sidebar a#sidebar-toll-free-hotline {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/sidebar-csl-toll-free.png);
}

.brand-1010 #sidebar a#sidebar-toll-free-hotline {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-1010-toll-free-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-toll-free-hotline {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-cs-postpaid-toll-free.png);
}

.brand-csl #sidebar a#sidebar-volte {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-volte-csl.png);
}

.brand-1010 #sidebar a#sidebar-volte {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-volte-1010-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-volte {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-volte-csim-postpaid.png);
}

.brand-csl #sidebar a#sidebar-volte {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-volte-csl.png);
}

.brand-1010 #sidebar a#sidebar-volte {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/sidebar-volte-1010-v2.png);
}

.brand-cs_postpaid #sidebar a#sidebar-volte {
	background-image: url(/abc_cms/wp-content/uploads/2022/07/sidebar-volte-csim-postpaid.png);
}

#sidebar a#sidebar-lang {
	padding-left: 0px;
}

#sidebar a span {
	margin: 0 auto;
	position: absolute;
	font-weight: 500;
}

.cardboard {
	background: white;
	padding: 20px;
	border-radius: 25px 25px 0px 0px;
	color: #333333;
}

.cardboard.whole {
	border-radius: 25px;
	margin-top: 45px;
}

.brand-cs_postpaid .cardboard.whole {
	border-radius: 8px;
}

.cardboard.tariff_coverage {
	margin-top: 45px;
}

.brand-cs_postpaid .cardboard.tariff_coverage {
	border-radius: 8px;
}

.cardboard.bottom {
	margin-top: -3vh;
	border-radius: 0 0 25px 25px;
}

.cardboard.bottom.oval {
	border-radius: 25px;
}

.brand-cs_postpaid .cardboard.bottom.oval {
	border-radius: 8px;
}

.cardboard.bottom.packList {
	border-radius: 25px;
	margin-top: 0;
}

.cardboard.bottom.detail-content {
	border-radius: 25px;
	margin-top: -7vh;
	box-shadow: 0 4px 0 var(--tag-bg-color);
}

.brand-cs_postpaid .cardboard.bottom.detail-content {
	border-radius: 8px;
}

.pre-purchase-success .cardboard:nth-child(4) {
	margin-top: -20px;
	color: #faa61a;
}

.brand-1010 .pre-purchase-success .cardboard:nth-child(4) {
	margin-top: -20px;
	color: #9f8c15;
}

.brand-cs_postpaid .pre-purchase-success .cardboard:nth-child(4) {
	margin-top: -20px;
	color: #be81ef;
}

.brand-1010 .cardboard {
	background: #444441;
	color: white;
}

.brand-cs_postpaid .cardboard {
	background: white;
	color: #16171c;
}

.cardboard#setting_tnc_title {
	margin-top: 40px;
}

.cardboard.detail-title {
	background-color: var(--tag-bg-color);
	color: var(--tag-text-color);
	padding: 15px 20px 2px 20px;
}

.brand-cs_postpaid .cardboard.detail-title {
	border-radius: 8px 8px 0 0;
}

.cardboard.detail-title #pre-purchase-offer-title {
	color: var(--tag-text-color);
	font-size: 4.5vw;
}

.cardboard.detail-bottom {
	border-radius: 0 0 25px 25px;
	height: 13vw;
	padding: 0;
	background-color: var(--tag-bg-color);
	z-index: -1;
	position: relative;
	top: -12vw;
	margin-bottom: -12vw;
}

tabs#districtList {
	overflow: hidden;
}

tabs#districtList container {
	display: flex;
	width: 90%;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow-x: scroll;
	overflow-y: hidden;
	font-size: 1rem;
	margin: 0.75rem auto;
}

tabs#districtList container::-webkit-scrollbar {
	width: 1px;
}

tabs#offerList {
	overflow: hidden;
}

tabs#offerList container {
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-around;
	overflow-x: scroll;
	overflow-y: hidden;
	font-size: 1.1rem;
	margin-top: 0.75rem;
	padding-left: min(5px, 10%);
	padding-right: min(10px, 10%);
}

tabs#offerList container::-webkit-scrollbar {
	width: 1px;
}

.pre-purchase-top-tag {
	width: auto;
	display: flex;
	color: #999999;
	margin-right: 20px;
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	margin-bottom: -1px;
	font-weight: bold;
}

.pre-purchase-top-tag.active {
	color: #faa61a !important;
	border-bottom: 5px solid #faa61a;
	font-weight: bold;
	padding-bottom: 2px;
}

.brand-cs_postpaid .pre-purchase-top-tag.active {
	color: #be81bf !important;
	border-color: #be81bf;
}

.pre-purchase-offerlist-top-tag {
	width: 400px;
	max-width: 45%;
	height: 65px;
	display: flex;
	color: #999999;
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: 1px solid #faa61a;
	background-color: transparent;
	border-radius: 5px;
}

.brand-1010 .pre-purchase-offerlist-top-tag {
	width: 400px;
	max-width: 45%;
	height: 65px;
	display: flex;
	color: #999999;
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: 1px solid #ffdd00;
	background-color: transparent;
	border-radius: 5px;
}

.brand-cs_postpaid .pre-purchase-offerlist-top-tag {
	width: 400px;
	max-width: 45%;
	height: 65px;
	display: flex;
	color: #999999;
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: 1px solid #be81bf;
	background-color: transparent;
	border-radius: 5px;
}

.pre-purchase-offerlist-top-tag.active {
	color: #ffffff !important;
	background-color: #faa61a;
	border: 1px solid #faa61a;
	font-size: 16px;
	font-weight: bold;
	border-radius: 5px;
}

.brand-1010 .pre-purchase-offerlist-top-tag.active {
	color: #000000 !important;
	background-color: #ffdd00;
	border-color: #ffdd00;
}

.brand-cs_postpaid .pre-purchase-offerlist-top-tag.active {
	color: #ffffff !important;
	background-color: #be81bf;
	border-color: #be81bf;
}

msisdn {
	display: none;
	width: 100%;
	height: 60px;
	line-height: 60px;
	font-size: 6vw;
	background-color: #faa61a;
	border-radius: 20px;
	margin-top: 11vw;
	margin-bottom: 3vw;
}

msisdn.plain {
	text-align: center;
}

.brand-csl msisdn {
	background-color: #faa61a;
	color: #ffffff;
}

.brand-1010 msisdn {
	background-color: #f2c97f;
	color: #333333;
}

.brand-cs_postpaid msisdn {
	background-color: #be81ef;
	color: white;
}

msisdn.using {
	text-align: center;
}

msisdn.apply {
	color: var(--tag-text-color);
	font-size: 4.5vw;
	margin: 0;
	background-color: var(--tag-bg-color);
	margin: 0;
	border-radius: 25px 25px 0 0;
	padding-bottom: 5vw;
}

.brand-1010 msisdn.apply {
	background-color: #333333;
}

.brand-cs_postpaid msisdn.apply {
	background-color: white;
}

body.en-us msisdn.apply::before {
	content: "Apply to: ";
	padding-left: 20px;
}

body.zh-hk msisdn.apply::before {
	content: "適用於：";
	padding-left: 20px;
}

banner {
	/* display: flex; */
	width: calc(100% + 4vw);
	/* height: 100%; */
	overflow: hidden;
	position: relative;
	margin-left: -2vw;
	display: none;
}

banner #banner-container {
	transition: all 750ms ease;
	transform: translateX(0px);
}

banner #banner-container div {
	/* position: relative; */
	list-style: none;
	height: 100%;
	width: 100vw;
	padding: 0;
	margin: 0;
	/* transition: all 750ms ease; */
	left: 20px;
	display: inline-block;
}

banner div a {
	position: relative;
	height: 100%;
	float: left;
}

banner img {
	width: 100%;
	border-radius: 0px 0px 60px 60px;
}

.brand-cs_postpaid banner img {
	border-radius: 0;
}

banner button {
	/* background-color: rgb(0,0,0,0.2) !important; */
	background-color: unset !important;
	background-position: center;
	background-repeat: no-repeat;
	border: 0px;
	border-radius: 50%;
	height: 24px;
	width: 24px;
	position: absolute;
	top: 40%;
	z-index: 1;
	display: none;
	font-size: 20px;
	line-height: 1;
	color: black;
	background-size: 25px 25px;
	margin: 5px;
	display: inline-block;
}

#banner-left-button {
	height: 35px;
	width: 35px;
	background: no-repeat center/100% url("../../uploads/2024/10/banner-left-arrow-csl.png");
	left: 0;
	background-size: contain;
}

.brand-1010 #banner-left-button {
	height: 35px;
	width: 35px;
	background: no-repeat center/100% url("../../uploads/2024/10/banner-left-arrow-1010.png");
}

.brand-cs_postpaid #banner-left-button {
	height: 35px;
	width: 35px;
	background: no-repeat center/100% url("../../uploads/2024/10/banner-left-arrow-cs_postpaid.png");
}

#banner-right-button {
	height: 35px;
	width: 35px;
	background: no-repeat center/100% url("../../uploads/2024/10/banner-right-arrow-csl.png");
	right: 0;
	background-size: contain;
}

.brand-1010 #banner-right-button {
	height: 35px;
	width: 35px;
	background: no-repeat center/100% url("../../uploads/2024/10/banner-right-arrow-1010.png");
}

.brand-cs_postpaid #banner-right-button {
	height: 35px;
	width: 35px;
	background: no-repeat center/100% url("../../uploads/2024/10/banner-right-arrow-cs_postpaid.png");
}

banner a div {
	position: absolute;
	top: 3%;
	left: 1%;
	color: #ffffff;
	font-size: 6vw;
	font-weight: 700;
}

banner a .landing::before {
	display: block;
}

body.zh-hk banner a .landing::before {
	content: "你現在身處：";
}

body.en-us banner a .landing::before {
	content: "You are in: ";
}

banner a .rate-plan {
	bottom: 20%;
}

.page_indicator_funcBlock {
	width: 100%;
	height: 25vw;
	position: absolute;
	display: flex;
}

.page_indicator_funcBlock div {
	width: 33%;
	height: 100%;
}

.page_indicator_funcBlock div .on {
	cursor: pointer;
}

.page_indicator_funcBlock div .off {
	cursor: none;
}

packlist#pre-purchase-packlist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 0 1 auto;
	justify-content: space-between;
}

.pre-purchase-packlist-item {
	width: 48%;
	height: 60vw;
	margin: 2vw 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #f4f4f4;
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 25px 25px 12px 12px;
	overflow: hidden;
}

.pre-purchase-packlist-item.hot::before {
	background-image: url("../../uploads/2023/12/hot_ribbon_csl_r4.png");
	background-repeat: no-repeat;
	background-size: 95% 75%;
	background-position: left center;
	font-size: 4vw;
	position: absolute;
	left: 5%;
	top: 5%;
	padding: 0 2.5% 1% 2.5%;
	width: 22.5%;
	line-height: 2;
	color: #ffffff;
}

.brand-1010 .pre-purchase-packlist-item {
	background-color: #f4f4f4;
}

.brand-1010 .pre-purchase-packlist-item.hot::before {
	background-image: url("../../uploads/2023/12/hot_ribbon_1010_r4.png");
	color: #333333;
	font-weight: bold;
}

.brand-cs_postpaid .pre-purchase-packlist-item.hot::before {
	background-image: url("../../uploads/2021/12/hot_ribbon_cs_postpaid_r3.png");
}

body.zh-hk .pre-purchase-packlist-item.hot::before {
	content: "熱門";
}

body.en-us .pre-purchase-packlist-item.hot::before {
	content: "HOT";
}

.pre-purchase-packlist-item-img {
	height: 46vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	border-radius: 0px 0px 12px 12px;
}

.brand-1010 .pre-purchase-packlist-item-img {
	border-radius: 0px 0px 0px 30px;
}

.pre-purchase-packlist-item-text {
	width: 100%;
	height: 12vw;
	background-color: #f4f4f4;
	padding: 1vw 0;
}

.brand-1010 .pre-purchase-packlist-item-text {
	background-color: #f4f4f4;
}

.brand-cs_postpaid .pre-purchase-packlist-item-text {
	background-color: white;
}

.pre-purchase-packlist-item-title {
	font-size: 4.4vw;
	color: #333333;
	padding-left: 10px;
	font-weight: bold;
}

.brand-cs_postpaid .pre-purchase-packlist-item-title {
	color: #16171c;
}

.pre-purchase-packlist-item-title-price {
	color: #f7931e;
	font-weight: bold;
	font-size: 4.5vw;
	padding: 0 2vw;
}

.brand-1010 .pre-purchase-packlist-item-title-price {
	color: #ffdd00;
}

.brand-cs_postpaid .pre-purchase-packlist-item-title-price {
	color: #BE81EF;
}

.pre-purchase-packlist-item-title-price {
	display: block;
	white-space: nowrap;
	text-align: right;
}

.pre-purchase-packlist-item-title-price span::before,
.pre-purchase-packlist-item-title-price span::after {
	font-size: 2.6vw;
	color: #999999;
}

.brand-1010 .pre-purchase-packlist-item-title-price span::before,
.brand-1010 .pre-purchase-packlist-item-title-price span::after {
	color: #ffffff;
}

.brand-cs_postpaid .pre-purchase-packlist-item-title-price span::before,
.brand-cs_postpaid .pre-purchase-packlist-item-title-price span::after {
	color: #BBBCC7;
}

body.zh-hk .pre-purchase-packlist-item-title-price span::before {
	content: "平均 ";
}

body.en-us .pre-purchase-packlist-item-title-price span::before {
	content: "Avg ";
}

body.zh-hk .pre-purchase-packlist-item-title-price span::after {
	content: "/張";
}

body.en-us .pre-purchase-packlist-item-title-price span::after {
	content: "/Pass";
}

#pre-purchase-offer-title {
	font-size: 5vw;
	font-weight: 700;
}

#pre-purchase-offer-title.landing {
	color: #000000;
	text-align: center;
}

.brand-1010 #pre-purchase-offer-title.landing {
	color: #ffffff;
}

.brand-cs_postpaid #pre-purchase-offer-title {
	color: #be81ef;
}

.brand-cs_postpaid #pre-purchase-offer-title.prepurchase {
	color: white;
}

body.zh-hk #pre-purchase-offer-title.landing.DP::before,
body.zh-hk #pre-purchase-offer-title.landing.DPC::before,
body.zh-hk #pre-purchase-offer-title.landing.DPM::before {
	content: "數據漫遊通行證";
}

body.en-us #pre-purchase-offer-title.landing.DP::before,
body.en-us #pre-purchase-offer-title.landing.DPC::before,
body.en-us #pre-purchase-offer-title.landing.DPM::before {
	content: "Data Roaming Pass";
}

body.zh-hk #pre-purchase-offer-title.landing.QP::before,
body.zh-hk #pre-purchase-offer-title.landing.QPC::before {
	content: "數據流量組合";
}

body.en-us #pre-purchase-offer-title.landing.QP::before,
body.en-us #pre-purchase-offer-title.landing.QPC::before {
	content: "Volume Pass";
}

body.zh-hk #pre-purchase-offer-title.landing.MDP::before {
	content: "多次通行證組合";
}

body.en-us #pre-purchase-offer-title.landing.MDP::before {
	content: "Multi Passes Package";
}

offerlist#pre-purchase-offerlist {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.highlight .pre-purchase-offerlist-item-title,
.highlight .pre-purchase-offerlist-item-title-fee,
.highlight .pre-purchase-offerlist-item-title-destination {
	color: #333333 !important;
}

.pre-purchase-offerlist-item.highlight {
	background-color: #f4f4f4;
}

.pre-purchase-offerlist-item.Special,
.pre-purchase-offerlist-item.BestSell {
	position: relative;
}

.pre-purchase-offerlist-item.Special::before {
	background-image: linear-gradient(to bottom, #ff7a60, #e35d43);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #ffffff;
	font-size: 11px;
	position: absolute;
	left: 4%;
	top: 4%;
	padding: 0 3%;
	width: auto;
	line-height: 2;
	text-align: center;
	border-radius: 5px;
}

body.zh-hk .pre-purchase-offerlist-item.Special::before {
	content: "限時";
}

body.en-us .pre-purchase-offerlist-item.Special::before {
	content: "Flash";
	font-size: 11px;
	width: auto;
	text-align: left;
}

.pre-purchase-offerlist-item.BestSell::before {
	background-image: linear-gradient(to bottom, #ff7a60, #e35d43);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #ffffff;
	font-size: 11px;
	position: absolute;
	left: 4%;
	top: 4%;
	padding: 0 3%;
	width: auto;
	line-height: 2.2;
	text-align: center;
	border-radius: 5px;
}

body.zh-hk .pre-purchase-offerlist-item.BestSell::before {
	content: "優惠";
}

body.en-us .pre-purchase-offerlist-item.BestSell::before {
	content: "Promotion";
}

.pre-purchase-offerlist-item-title {
	width: 45%;
	font-size: 4vw;
	font-weight: bold;
	padding: 8px 0px 0px 0px;
	text-align: center;
	margin-top: 2vw;
	color: #faa61a;
}

.brand-1010 .pre-purchase-offerlist-item.highlight .pre-purchase-offerlist-item-title {
	color: #333333;
}

.brand-1010 .pre-purchase-offerlist-item:not(.highlight) .pre-purchase-offerlist-item-title {
	color: #774e16;
}

.brand-cs_postpaid .pre-purchase-offerlist-item-title {
	color: #be81ef;
}

body.zh-hk .landing .DPA .pre-purchase-offerlist-item-title span:before {
	content: "正在使用24小時通行證";
}

body.en-us .landing .DPA .pre-purchase-offerlist-item-title span:before {
	content: "Roaming Pass in use now";
}

body.zh-hk .landing .QPM .pre-purchase-offerlist-item-title span:before {
	content: "正在使用數據流量組合";
}

body.en-us .landing .QPM .pre-purchase-offerlist-item-title span:before {
	content: "Volume Data Roaming Pass in use now";
}

body.zh-hk .landing .DP .pre-purchase-offerlist-item-title span:before,
body.zh-hk .landing .DPC .pre-purchase-offerlist-item-title span:before,
body.zh-hk .landing .DPM .pre-purchase-offerlist-item-title span:before,
body.zh-hk .landing .RT .pre-purchase-offerlist-item-title span:before,
body.zh-hk .landing .RTC .pre-purchase-offerlist-item-title span:before,
body.zh-hk .landing .RTM .pre-purchase-offerlist-item-title span:before {
	content: "數據漫遊通行證";
}

body.en-us .landing .DP .pre-purchase-offerlist-item-title span:before,
body.en-us .landing .DPC .pre-purchase-offerlist-item-title span:before,
body.en-us .landing .DPM .pre-purchase-offerlist-item-title span:before,
body.en-us .landing .RT .pre-purchase-offerlist-item-title span:before,
body.en-us .landing .RTC .pre-purchase-offerlist-item-title span:before,
body.en-us .landing .RTM .pre-purchase-offerlist-item-title span:before {
	content: "Data Roaming Pass";
}

body.zh-hk .landing .MDP .pre-purchase-offerlist-item-title span:before,
body.zh-hk .landing .MRT .pre-purchase-offerlist-item-title span:before {
	content: "多次通行證組合";
}

body.en-us .landing .MDP .pre-purchase-offerlist-item-title span:before,
body.en-us .landing .MRT .pre-purchase-offerlist-item-title span:before {
	content: "Multi Passes Package";
}

body.zh-hk .landing .QP .pre-purchase-offerlist-item-title span:before,
body.zh-hk .landing .QPC .pre-purchase-offerlist-item-title span:before {
	content: "數據流量組合";
}

body.en-us .landing .QP .pre-purchase-offerlist-item-title span:before,
body.en-us .landing .QPC .pre-purchase-offerlist-item-title span:before {
	content: "Volume Pass";
}

.pre-purchase-offerlist-item-title-passRemark {
	width: 100%;
	text-align: center;
	color: #999999 !important;
	text-decoration: line-through;
	font-size: 3vw;
}

body.en-us .DPC .pre-purchase-offerlist-item-title-passRemark span::after,
body.en-us .DPM .pre-purchase-offerlist-item-title-passRemark span::after,
body.en-us .RTC .pre-purchase-offerlist-item-title-passRemark span::after,
body.en-us .RTM .pre-purchase-offerlist-item-title-passRemark span::after {
	content: "Day";
}

body.zh-hk .DPC .pre-purchase-offerlist-item-title-passRemark span::after,
body.zh-hk .DPM .pre-purchase-offerlist-item-title-passRemark span::after,
body.zh-hk .MDP .pre-purchase-offerlist-item-title-passRemark span::after,
body.zh-hk .RTC .pre-purchase-offerlist-item-title-passRemark span::after,
body.zh-hk .RTM .pre-purchase-offerlist-item-title-passRemark span::after,
body.zh-hk .MRT .pre-purchase-offerlist-item-title-passRemark span::after {
	content: "日";
}

body.en-us .MDP .pre-purchase-offerlist-item-title-passRemark span::after,
body.en-us .MRT .pre-purchase-offerlist-item-title-passRemark span::after {
	content: "Days";
}

body.zh-hk .MDP .pre-purchase-offerlist-item-title-passRemark span::before,
body.zh-hk .MRT .pre-purchase-offerlist-item-title-passRemark span::before {
	content: "連續";
}

body.en-us .QPC .pre-purchase-offerlist-item-title-passRemark span::after {
	content: "Valid Days";
}

body.zh-hk .QPC .pre-purchase-offerlist-item-title-passRemark span::after {
	content: "日有效期";
}

.pre-purchase-offerlist-item-title-fee {
	font-size: 5vw;
	text-align: center;
	width: 100%;
}

.pre-purchase-offerlist-item-title-fee::before {
	content: "HK$ ";
}

.DPC .pre-purchase-offerlist-item-title-fee::before,
.DPA .pre-purchase-offerlist-item-title-fee::before,
.MDP .pre-purchase-offerlist-item-title-fee::before,
.QPC .pre-purchase-offerlist-item-title-fee::before,
.QPM .pre-purchase-offerlist-item-title-fee::before,
.DPM .pre-purchase-offerlist-item-title-fee::before,
.RTC .pre-purchase-offerlist-item-title-fee::before,
.MRT .pre-purchase-offerlist-item-title-fee::before,
.RTM .pre-purchase-offerlist-item-title-fee::before {
	content: "";
}

.pre-purchase-offerlist-item-title-price {
	font-size: 10vw;
	font-weight: bold;
}

body.en-us .DPC .pre-purchase-offerlist-item-title-price span::before,
body.en-us .DPM .pre-purchase-offerlist-item-title-price span::before,
body.en-us .RTC .pre-purchase-offerlist-item-title-price span::before,
body.en-us .RTM .pre-purchase-offerlist-item-title-price span::before {
	content: "Deduct 1 Day (HK$0)";
}

body.zh-hk .DPC .pre-purchase-offerlist-item-title-price span::before,
body.zh-hk .DPM .pre-purchase-offerlist-item-title-price span::before,
body.zh-hk .RTC .pre-purchase-offerlist-item-title-price span::before,
body.zh-hk .RTM .pre-purchase-offerlist-item-title-price span::before {
	content: "扣減1日 (HK$0)";
}

body.en-us .MDP .pre-purchase-offerlist-item-title-price span::before,
body.en-us .MRT .pre-purchase-offerlist-item-title-price span::before {
	content: "Deduct 1 set (HK$0)";
}

body.zh-hk .MDP .pre-purchase-offerlist-item-title-price span::before,
body.zh-hk .MRT .pre-purchase-offerlist-item-title-price span::before {
	content: "扣減1組 (HK$0)";
}

body.en-us .QPC .pre-purchase-offerlist-item-title-price span::before {
	content: "Deduct 1 Pass (HK$0)";
}

body.zh-hk .QPC .pre-purchase-offerlist-item-title-price span::before {
	content: "扣減1張 (HK$0)";
}

.pre-purchase-offerlist-item-title-priceRemark {
	width: 80%;
	text-align: center;
	color: #faa61a;
}

body.en-us .pre-purchase-offerlist-item-title-priceRemark {
	font-size: 3vw;
}

.brand-1010 .DPC .pre-purchase-offerlist-item-title-priceRemark,
.brand-1010 .MDP .pre-purchase-offerlist-item-title-priceRemark,
.brand-1010 .DPM .pre-purchase-offerlist-item-title-priceRemark,
.brand-1010 .QPC .pre-purchase-offerlist-item-title-priceRemark,
.brand-1010 .RTC .pre-purchase-offerlist-item-title-priceRemark,
.brand-1010 .MRT .pre-purchase-offerlist-item-title-priceRemark,
.brand-1010 .RTM .pre-purchase-offerlist-item-title-priceRemark {
	color: #fbdf00;
}

body.en-us .DPC .pre-purchase-offerlist-item-title-priceRemark span::before,
body.en-us .MDP .pre-purchase-offerlist-item-title-priceRemark span::before,
body.en-us .QPC .pre-purchase-offerlist-item-title-priceRemark span::before,
body.en-us .RTC .pre-purchase-offerlist-item-title-priceRemark span::before,
body.en-us .MRT .pre-purchase-offerlist-item-title-priceRemark span::before {
	content: "From your account";
}

body.zh-hk .DPC .pre-purchase-offerlist-item-title-priceRemark span::before,
body.zh-hk .MDP .pre-purchase-offerlist-item-title-priceRemark span::before,
body.zh-hk .QPC .pre-purchase-offerlist-item-title-priceRemark span::before,
body.zh-hk .RTC .pre-purchase-offerlist-item-title-priceRemark span::before,
body.zh-hk .MRT .pre-purchase-offerlist-item-title-priceRemark span::before {
	content: "從帳戶中扣減";
}

body.en-us .DPM .pre-purchase-offerlist-item-title-priceRemark span::before,
body.en-us .RTM .pre-purchase-offerlist-item-title-priceRemark span::before {
	content: "From other member’s account";
}

body.zh-hk .DPM .pre-purchase-offerlist-item-title-priceRemark span::before,
body.zh-hk .RTM .pre-purchase-offerlist-item-title-priceRemark span::before {
	content: "從其他成員帳戶中扣減";
}

.pre-purchase-offerlist-item-title-destination {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1.5;
	color: #f7931e;
	width: 90%;
	font-size: 4vw;
	text-align: center;
	display: none;
}

body.en-us .pre-purchase-offerlist-item-title-destination {
	font-size: 3vw;
}

body.zh-hk .pre-purchase-offerlist-item-title-destination::before {
	content: "包括";
	color: #666666;
	font-weight: normal;
}

body.en-us .pre-purchase-offerlist-item-title-destination::before {
	content: "includes";
	color: #666666;
	font-weight: normal;
}

body.zh-hk .landing .pre-purchase-offerlist-item-title-destination::before {
	content: "適用地區:";
	color: #666666;
	font-weight: normal;
}

body.en-us .landing .pre-purchase-offerlist-item-title-destination::before {
	content: "Applicable Destination(s):";
	color: #666666;
	font-weight: normal;
}

.pre-purchase-offerlist-item-title-destination::after {
	content: " ";
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 5vw;
	height: 5vw;
}

.pre-purchase-offerlist-item-title-destination.expand::after {
	background-image: url("../../uploads/2019/12/up_black.png");
}

/* .brand-1010 .pre-purchase-offerlist-item-title-destination.expand::after {
	background-image: url('../../uploads/2019/12/up_white.png');
} */
.brand-cs_postpaid .pre-purchase-offerlist-item-title-destination.expand::after {
	background-image: url("../../uploads/2019/12/up_black.png");
}

.pre-purchase-offerlist-item-title-destination.collapse::after {
	background-image: url("../../uploads/2019/12/down_arrow_black_r2.png");
}

/* .brand-1010 .pre-purchase-offerlist-item-title-destination.collapse::after {
	background-image: url('../../uploads/2019/12/down_arrow_white_r2.png');
} */
.brand-cs_postpaid .pre-purchase-offerlist-item-title-destination.collapse::after {
	background-image: url("../../uploads/2019/12/down_arrow_black_r2.png");
}

/* .pre-purchase-offerlist-item-destination-prefix {
	color: #666666;
	font-weight: normal;
}
body.zh-hk .pre-purchase-offerlist-item-destination-prefix::after {
	content: '個適用地區:';
	content: '包括:';
	color: #666666;
	font-weight: normal;
}
body.en-us .pre-purchase-offerlist-item-destination-prefix::after {
	content: ' applicable destinations:';
	content: ' Includes:';
	color: #666666;
	font-weight: normal;
} */
.pre-purchase-offerlist-item-destination {
	overflow: hidden;
}

offerlist .item-button {
	width: 80%;
	border-width: 0px;
	color: white;
	margin-bottom: 4vw;
}

body.zh-hk offerlist .item-button::before {
	content: "立即購買";
}

body.en-us offerlist .item-button::before {
	content: "Buy Now";
}

body.zh-hk offerlist.landing .item-button::before {
	content: "立即啟用";
}

body.en-us offerlist.landing .item-button::before {
	content: "Activate Now";
}

body.zh-hk .DP .pre-purchase-offerlist-item-button span::before,
body.zh-hk .QP .pre-purchase-offerlist-item-button span::before,
body.zh-hk .RT .pre-purchase-offerlist-item-button span::before {
	content: "立即啟用";
}

body.zh-hk .MSP .pre-purchase-offerlist-item-button span::before {
	content: "立即購買";
}

body.en-us .DP .pre-purchase-offerlist-item-button span::before,
body.en-us .QP .pre-purchase-offerlist-item-button span::before,
body.en-us .RT .pre-purchase-offerlist-item-button span::before {
	content: "Activate Now";
}

body.en-us .MSP .pre-purchase-offerlist-item-button span::before {
	content: "Buy Now";
}

body.zh-hk .DPC .pre-purchase-offerlist-item-button span::before,
body.zh-hk .DPM .pre-purchase-offerlist-item-button span::before,
body.zh-hk .MDP .pre-purchase-offerlist-item-button span::before,
body.zh-hk .QPC .pre-purchase-offerlist-item-button span::before,
body.zh-hk .RTC .pre-purchase-offerlist-item-button span::before,
body.zh-hk .RTM .pre-purchase-offerlist-item-button span::before,
body.zh-hk .MRT .pre-purchase-offerlist-item-button span::before {
	content: "立即啟用";
}

body.en-us .DPC .pre-purchase-offerlist-item-button span::before,
body.en-us .DPM .pre-purchase-offerlist-item-button span::before,
body.en-us .MDP .pre-purchase-offerlist-item-button span::before,
body.en-us .QPC .pre-purchase-offerlist-item-button span::before,
body.en-us .RTC .pre-purchase-offerlist-item-button span::before,
body.en-us .RTM .pre-purchase-offerlist-item-button span::before,
body.en-us .MRT .pre-purchase-offerlist-item-button span::before {
	content: "Activate Now";
}

body.zh-hk .DPA .pre-purchase-offerlist-item-button span::before,
body.zh-hk .QPM .pre-purchase-offerlist-item-button span::before {
	content: "確定";
}

body.en-us .DPA .pre-purchase-offerlist-item-button span::before,
body.en-us .QPM .pre-purchase-offerlist-item-button span::before {
	content: "OK";
}

.offer-labal {
	width: 50%;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	margin: 8px 0;
}

.offer-value {
	width: 50%;
	display: inline-block;
	text-align: right;
	margin: 8px 0;
}

#offer-title,
#offer-detail,
#offer-price-box,
#offer-valid,
#offer-lastfor,
#offer-priceRemark,
#offer-purchase-remark {
	display: none;
}

#offer-title {
	color: #f7931e;
}

.brand-1010 #offer-title {
	color: #ffdd00;
}

#offer-title.landing {
	text-align: center;
	color: #000000;
}

.brand-1010 #offer-title.landing {
	color: #ffffff;
}

.detail-row {
	width: 100%;
	text-align: right;
	float: right;
	display: block;
	margin: 3vw 0;
}

.detail-row::before {
	display: block;
	float: left;
	width: 55%;
	text-align: left;
}

.clear-detail-row-style {
	clear: both;
}

body.zh-hk #offer-detail.detail-row.prepurchase::before {
	content: "已選項目";
}

body.en-us #offer-detail.detail-row.prepurchase::before {
	content: "Selected item";
}

body #offer-detail.detail-row.prepurchase::before {
	width: 100%;
}

body #offer-detail.detail-row.prepurchase .offer-title {
	text-align: left;
}

#offer-detail.prepurchase .offer-title,
#offer-detail.prepurchase .offer-destination,
#offer-detail.prepurchase .offer-destination span,
#offer-price {
	color: #faa61a;
	font-weight: bold;
}

.brand-1010 #offer-detail.prepurchase .offer-title,
.brand-1010 #offer-detail.prepurchase .offer-destination,
.brand-1010 #offer-detail.prepurchase .offer-destination span,
.brand-1010 #offer-price {
	color: #ffdd00;
}

.brand-cs_postpaid #offer-detail.prepurchase .offer-title,
.brand-cs_postpaid #offer-detail.prepurchase .offer-destination,
.brand-cs_postpaid #offer-detail.prepurchase .offer-destination span,
.brand-cs_postpaid #offer-price {
	color: #be81ef;
}

#offer-detail .offer-destination {
	width: 100%;
	text-align: left;
	margin-top: 6vw;
}

#offer-detail.detail-row.landing .offer-destination {
	text-align: center;
}

.offer-destination {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

body.zh-hk #offer-detail .offer-destination>div::before {
	font-weight: normal;
	content: "適用地區:";
}

body.en-us #offer-detail .offer-destination>div::before {
	font-weight: normal;
	content: "Applicable destinations:";
}

#offer-detail.prepurchase .offer-destination>div::before {
	color: var(--title-color);
}

body.zh-hk #offer-price-box.detail-row:not(.landing)::before {
	content: "價錢:";
}

body.en-us #offer-price-box.detail-row:not(.landing)::before {
	content: "Price:";
}

.landing #offer-price {
	text-align: center;
}

#offer-price::before {
	content: "$ ";
}

body.en-us .landing.DP #offer-price::before,
body.en-us .landing.QP #offer-price::before,
body.en-us .landing.RT #offer-price::before {
	content: "Price: HK$ ";
}

body.zh-hk .landing.DP #offer-price::before,
body.zh-hk .landing.QP #offer-price::before,
body.zh-hk .landing.RT #offer-price::before {
	content: "價錢: HK$ ";
}

body.en-us .landing.DPC #offer-price::before,
body.en-us .landing.RTC #offer-price::before {
	content: "Deduct 1 Roaming Pass from your account";
}

body.zh-hk .landing.DPC #offer-price::before,
body.zh-hk .landing.RTC #offer-price::before {
	content: "從帳戶可使用的通行證中扣減1日";
}

body.en-us .landing.QPC #offer-price::before {
	content: "Deduct 1 Volume Pass from your account";
}

body.zh-hk .landing.QPC #offer-price::before {
	content: "從帳戶可使用的數據流量組合中扣減1張";
}

body.en-us .landing.QPM #offer-price::before {
	content: "Deduct 1 Roaming Pass from another member's account";
}

body.zh-hk .landing.QPM #offer-price::before {
	content: "由其他成員可使用的通行證中扣減1日";
}

body.en-us .landing.MDP #offer-price::before,
body.en-us .landing.MRT #offer-price::before {
	content: "Deduct 1 Multi Passes Package from your account";
}

body.zh-hk .landing.MDP #offer-price::before,
body.zh-hk .landing.MRT #offer-price::before {
	content: "從帳戶可使用的多次通行證組合中扣減1組";
}

#offer-clubpoint {
	display: none;
	position: relative;
}

#offer-clubpoint::before {
	content: " ";
	background-image: url("../../uploads/2019/12/clubpoint_black.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40% 80%;
	position: absolute;
	height: 100%;
	width: 10vw;
	margin-left: -8vw;
}

.brand-1010 #offer-clubpoint::before {
	background-image: url("../../uploads/2019/12/clubpoint_white.png");
}

.pre-purchase-offer-MSP #offer-valid.detail-row {
	display: none;
}

body.zh-hk #offer-valid.detail-row::before {
	content: "使用有效期";
}

body.en-us #offer-valid.detail-row::before {
	content: "Valid for use until";
}

body.zh-hk #offer-lastfor.detail-row.valid-date::before {
	content: "有效期";
}

body.en-us #offer-lastfor.detail-row.valid-date::before {
	content: "Valid Period";
}

#offer-priceRemark {
	text-align: center;
	margin: 8px 0;
}

msisdn.detail-row {
	font-size: inherit;
	height: inherit;
	line-height: inherit;
	background-color: white;
	color: #16171C;
	margin-top: -20px;
	padding: 20px;
	width: -webkit-fill-available;
}

msisdn.detail-row#pre-purchase-msisdn {
	border-radius: 0 0 25px 25px;
}

.brand-cs_postpaid .detail-row#pre-purchase-msisdn {
	background-color: white;
}

body.zh-hk msisdn.detail-row::before {
	content: "適用於";
}

body.en-us msisdn.detail-row::before {
	content: "Applicable to";
}

body.en-us msisdn.detail-row text {
	padding-right: 20px;
}

body.zh-hk .RT #offer-daypass-expiry-tips::before,
body.zh-hk .RTC #offer-daypass-expiry-tips::before,
body.zh-hk .RTM #offer-daypass-expiry-tips::before {
	content: "按下確定後，閣下於以下地區已啟用之通行證將被取消:";
}

body.en-us .RT #offer-daypass-expiry-tips::before,
body.en-us .RTC #offer-daypass-expiry-tips::before,
body.en-us .RTM #offer-daypass-expiry-tips::before {
	content: "Once you have confirmed, your activated Roaming Pass in below destination(s) will be cancelled:";
}

#offer-purchase-remark {
	text-align: center;
	margin: 8px 0;
	font-size: 3vw;
}

.offer-tnc {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 14px;
	user-select: none;
	text-align: left;
}

/* Hide the browser's default checkbox */
.offer-tnc input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.offer-tnc input:disabled~span {
	background-color: #e3e3e3;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #ffffff;
	box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.4), inset 0px 2px 5px rgba(0, 0, 0, 0.4);
	border-radius: 50px;
}

/* On mouse-over, add a grey background color */
.offer-tnc:hover input~.checkmark {
	box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.4), inset 0px 2px 5px rgba(0, 0, 0, 0.4);
}

.brand-cs_postpaid .offer-tnc:hover input~.checkmark {
	box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.4), inset 0px 2px 5px rgba(0, 0, 0, 0.4);
}

/* When the checkbox is checked, add a color background */
.offer-tnc input:checked~.checkmark {
	background: var(--checkbox-checked-bg-color);
	box-shadow: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.offer-tnc input:checked~.checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.offer-tnc .checkmark:after {
	left: 8px;
	top: 3px;
	width: 10px;
	height: 15px;
	transform: rotate(45deg);
	border-bottom-right-radius: 3px;
	background:
		radial-gradient(farthest-side at top left, transparent 97%, var(--checkbox-checked-color) 100%) bottom 3px left calc(100% - 2px)/2px 2px,
		radial-gradient(farthest-side, var(--checkbox-checked-color) 99%, transparent 100%) top right /3px 3px,
		radial-gradient(farthest-side, var(--checkbox-checked-color) 99%, transparent 100%) bottom left/3px 3px,
		linear-gradient(var(--checkbox-checked-color), var(--checkbox-checked-color)) right bottom/3px 88%,
		linear-gradient(var(--checkbox-checked-color), var(--checkbox-checked-color)) right bottom/88% 3px;
	background-repeat: no-repeat;
}

.offer-tnc.prepurchase {
	display: flex;
	align-items: center;
	line-height: 25px;
	text-align: left;
}

.offer-tnc.landing {
	display: none;
}

.offer-tnc a,
.tnc_title a {
	color: #faa61a;
}

body.brand-1010 .offer-tnc a,
body.brand-1010 .tnc_title a {
	color: #cb9c57;
}

body.brand-cs_postpaid .offer-tnc a,
body.brand-cs_postpaid .tnc_title a {
	color: #09417A;
}

#tnc-list {
	background-color: white;
	border-radius: 25px;
	padding-top: 20px;
	color: #333333;
	margin-top: 40px;
}

.brand-1010 #tnc-list {
	color: #ffffff;
	background-color: #444441;
}

.pre-purchase-offer-button-group {
	display: flex !important;
	justify-content: space-around;
	align-items: center;
	width: 100%;
}

.pre-purchase-offer-button#cancel {
	margin: 8px 10px;
	color: #000000;
	background: #f4f4f4;
	text-align: center;
	border: 1px solid #D5D5D5;
	border-radius: 20px;
	font-size: 4vw;
	font-weight: normal;
	width: 175px;
	height: 42px;
	line-height: 2;
}

body.zh-hk .pre-purchase-offer-button#cancel::before {
	content: "取消";
}

body.en-us .pre-purchase-offer-button#cancel::before {
	content: "Cancel";
}

.brand-cs_postpaid .pre-purchase-offer-button#cancel {
	background: #e1e1e8;
	border-radius: 8px;
}

.pre-purchase-offer-button#price {
	margin: 8px 10px;
	text-align: center;
	border-radius: 20px;
	font-size: 4vw;
	font-weight: normal;
	width: 175px;
	height: 42px;
	line-height: 2;
	border-width: 0px;
}

.brand-cs_postpaid .pre-purchase-offer-button#price {
	background: var(--apply-btn-bg-color);
	color: #ffffff;
	border-radius: 8px;
}

.pre-purchase-offer-button#price:disabled {
	opacity: 0.6;
}

body.zh-hk .pre-purchase-offer-button#price::before {
	content: "確定";
}

body.en-us .pre-purchase-offer-button#price::before {
	content: "Confirm";
}

body.zh-hk .pre-purchase-offer-button#price.has-clubpoint::before {
	content: "以 $";
}

body.en-us .pre-purchase-offer-button#price.has-clubpoint::before {
	content: "Pay by $";
}

body.zh-hk .pre-purchase-offer-button#price.has-clubpoint::after {
	content: " 購買";
}

.pre-purchase-offer-button#clubpoint {
	display: none;
	margin: 8px 10px;
	border-radius: 12px;
	background-color: inherit;
	width: 100%;
	text-align: center;
	font-size: 4vw;
	line-height: 3;
	border-width: 0px;
}

.brand-1010 .pre-purchase-offer-button#clubpoint {
	background: #ffdd00;
}

body.zh-hk .pre-purchase-offer-button#clubpoint.login::before {
	content: "以Club積分兌換";
}

body.en-us .pre-purchase-offer-button#clubpoint.login::before {
	content: "Redeem with Clubpoints";
}

.pre-purchase-offer-button#clubpoint.auth::before {
	background-image: url("../../uploads/2019/12/clubpoint_black.png");
	background-repeat: no-repeat;
	background-position: 4.5vw center;
	background-size: 50% 95%;
	padding-right: 5vw;
}

body.zh-hk .pre-purchase-offer-button#clubpoint.auth::before {
	content: "以 ";
}

body.en-us .pre-purchase-offer-button#clubpoint.auth::before {
	content: "Pay by";
	background-position: 13vw center;
	background-size: 30% 95%;
	padding-right: 8vw;
}

body.zh-hk .pre-purchase-offer-button#clubpoint.auth::after {
	content: " 購買";
}

.pre-purchase-success-button {
	margin: 10px 10%;
	background: #faa61a;
	width: 80%;
	/* height: 10vw;
  text-align: center;
  line-height: 1px; */
	border-radius: 20px;
	font-size: 4vw;
	font-weight: normal;
	display: none;
	border-width: 0px;
	padding: 9px 32px 9px 32px;
	line-height: 6vw;
}

.brand-1010 .pre-purchase-success-button {
	background: linear-gradient(to bottom, #debb74, #efcd8a 38%, #daaf69 81%, #c8a061);
	font-weight: 500;
}

.brand-cs_postpaid .pre-purchase-success-button {
	background: #be81ef;
	color: #ffffff;
}

body.zh-hk .pre-purchase-success-button::before {
	content: "按此查詢漫遊數據通行證結餘";
}

body.en-us .pre-purchase-success-button::before {
	content: "Click to check the balance of Data Roaming Pass";
}

#pre-purchase-offer-success,
.pre-purchase-success .wp-block-image.brand-csl,
.pre-purchase-success .wp-block-image.brand-cs_postpaid,
.pre-purchase-success .wp-block-image.brand-1010 {
	display: none;
}

#pre-purchase-offer-success {
	font-size: 4.5vw;
	margin-top: unset;
}

body.en-us .pre-purchase-offer-success-thanks::before {
	content: "Thank you for purchasing the ";
}

body.en-us .pre-purchase-offer-success-thanks::after {
	content: ".";
}

body.zh-hk .pre-purchase-offer-success-thanks::before {
	content: "多謝你選購";
}

body.zh-hk .pre-purchase-offer-success-thanks::after {
	content: "。";
}

body.en-us .pre-purchase-offer-success-usage::after {
	content: " can be used in different destinations and days separately.";
}

body.zh-hk .pre-purchase-offer-success-usage::after {
	content: "可以分別在不同的地區和日子使用。";
}

body.en-us .MDP .pre-purchase-offer-success-usage::after {
	content: " can be used for consecutive days in single destination only.";
}

body.zh-hk .MDP .pre-purchase-offer-success-usage::after {
	content: "只可於單一地區連續多天使用。";
}

body.en-us .pre-purchase-offer-success-sms::before {
	content: "Once the service is activated, you will receive a confirmatory SMS.";
}

body.zh-hk .pre-purchase-offer-success-sms::before {
	content: "此服務生效後，你將收到確認短訊通知。";
}

body.en-us .DP .pre-purchase-offer-success-thanks span.en-us::before {
	content: "Data Roaming Pass Package";
}

body.zh-hk .DP .pre-purchase-offer-success-thanks span.zh-hk::before {
	content: "數據漫遊通行證組合";
}

body.en-us .QP .pre-purchase-offer-success-thanks span.en-us::before {
	content: "Volume Pass";
}

body.zh-hk .QP .pre-purchase-offer-success-thanks span.zh-hk::before {
	content: "數據流量組合";
}

body.en-us .MDP .pre-purchase-offer-success-thanks span.en-us::before {
	content: "Data Roaming Multi Passes Package";
}

body.zh-hk .MDP .pre-purchase-offer-success-thanks span.zh-hk::before {
	content: "數據漫遊多次通行證組合";
}

body.en-us .MSP .pre-purchase-offer-success-thanks span.en-us::before {
	content: "Data Roaming Pass Package";
}

body.zh-hk .MSP .pre-purchase-offer-success-thanks span.zh-hk::before {
	content: "數據漫遊通行證組合";
}

body.en-us .DP .pre-purchase-offer-success-usage span.en-us::before {
	content: "Roaming Pass Package";
}

body.zh-hk .DP .pre-purchase-offer-success-usage span.zh-hk::before {
	content: "通行證組合";
}

body.en-us .QP .pre-purchase-offer-success-usage span.en-us::before {
	content: "Volume Pass";
}

body.zh-hk .QP .pre-purchase-offer-success-usage span.zh-hk::before {
	content: "數據流量組合";
}

body.en-us .MDP .pre-purchase-offer-success-usage span.en-us::before {
	content: "Multi Passes Package";
}

body.zh-hk .MDP .pre-purchase-offer-success-usage span.zh-hk::before {
	content: "多次通行證組合";
}

body.en-us .MSP .pre-purchase-offer-success-usage span.en-us::before {
	content: "Data Roaming Pass Package";
}

body.zh-hk .MSP .pre-purchase-offer-success-usage span.zh-hk::before {
	content: "數據漫遊通行證組合";
}

body.en-us .msp-reapply-message span.en-us::before {
	content: "Each mobile number can subscribe";
}

body.en-us .msp-reapply-message span.en-us::after {
	content: "once only.";
}

body.zh-hk .msp-reapply-message span.zh-hk::before {
	content: "每個電話號碼最多可申請一次";
}

#login-container {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

#login-container>div {
	width: 80%;
	position: fixed;
	top: 24%;
	left: 10%;
	background: #ffffff;
	padding: 16px;
}

.brand-1010 #login-container>div {
	color: #000000;
}

.theclub-icon {
	width: 50%;
	height: 100px;
	background-image: url("../../uploads/2019/12/TheClub_logo.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-color: #000000;
}

.clubpoint-payment {
	margin: 24px 0;
}

.clubpoint-payment::before {
	background-image: url("../../uploads/2019/12/clubpoint_black.png");
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: 9%;
	padding-right: 8%;
}

body.zh-hk .clubpoint-payment::before {
	content: "Clubpoints 繳付 - ";
	font-weight: 700;
}

body.en-us .clubpoint-payment::before {
	content: "Clubpoints payment - ";
	font-weight: 700;
}

#login-form label {
	font-size: 6vw;
}

body.zh-hk .login-label-id::before {
	content: "登入賬號/會員編號:";
}

body.en-us .login-label-id::before {
	content: "Login ID/Menbership Number:";
}

body.zh-hk .login-label-password::before {
	content: "密碼:";
}

body.en-us .login-label-password::before {
	content: "Password:";
}

#username,
#password {
	height: 12%;
	width: 72%;
	margin: 24px 0;
	font-size: 5vw;
	padding: 0 8px;
}

.button-container {
	width: 100%;
	justify-content: space-around;
	display: flex;
	margin-top: 16px;
}

.button-container button {
	width: 40%;
	font-size: 5vw;
	border: 2px solid;
	padding: 4px 0;
}

body.zh-hk .redeem span::before {
	content: "兌換";
}

body.en-us .redeem span::before {
	content: "Redeem";
}

body.zh-hk .cancel span::before {
	content: "取消";
}

body.en-us .cancel span::before {
	content: "Cancel";
}

/* #my-account-tabs {
	display: none;
} */
/* #my-account-tabs container {
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid #808080;
	margin: 16px 0;
} */
/* #my-account-tabs button {
	background-color: transparent;
	border: 0px;
	color: #b2b2b2;
	font-size: 4vw;
	margin-bottom: -1px;
	width: 50%;
	border-radius: 0;
} */
/* #my-account-tabs button.active {
	color: #faa61a;
	border-bottom: 3px solid #faa61a;
} */
#my-account-tabs container {
	display: flex;
	justify-content: space-around;
	background: transparent;
	margin: 16px 0;
}

#my-account-tabs button {
	background-color: transparent;
	border: 0px;
	color: #b2b2b2;
	font-size: 4vw;
	margin-bottom: -1px;
	width: 50%;
	border-radius: 0;
}

#my-account-tabs button.active {
	color: #faa61a;
	border-bottom: 3px solid #faa61a;
}

/* .brand-1010 #my-account-tabs button.active {
	color: #f2c97f;
	border-bottom: 3px solid #f2c97f;
} */
body.zh-hk #my-account-tab::after {
	content: "我的帳號";
}

body.en-us #my-account-tab::after {
	content: "My Account";
}

#setting-tab {
	display: none;
}

body.zh-hk #setting-tab::after {
	content: "多人共享偏好";
}

body.en-us #setting-tab::after {
	content: "Sharing Preference";
}

#roam-preference-tab {
	display: none;
}

body.zh-hk.user-corp #roam-preference-tab::after {
	content: "設定";
}

body.zh-hk.user-mass #roam-preference-tab::after {
	content: "如何使用";
}

body.en-us.user-corp #roam-preference-tab::after {
	content: "Settings";
}

body.en-us.user-mass #roam-preference-tab::after {
	content: "How to use";
}

/* #sharing-tabs container {
	display: flex;
	justify-content: space-around;
	margin: 16px 0;
	background: transparent;
} */
/* #sharing-tabs button {
	background-color: transparent;
	border: 0px;
	color: #b2b2b2;
	font-size: 4vw;
	margin-bottom: -1px;
	width: 50%;
	border-radius: 0;
} */
/* #sharing-tabs button.active {
	color: #faa61a;
	border-bottom: 3px solid #faa61a;
}
.brand-1010 #sharing-tabs button.active {
	color: #f2c97f;
	border-bottom: 3px solid #f2c97f;
} */
#sharing-tabs container {
	display: flex;
	justify-content: space-around;
	background: transparent;
	margin: 16px 0;
}

#sharing-tabs button {
	background-color: transparent;
	border: 0px;
	color: #b2b2b2;
	font-size: 4vw;
	margin-bottom: -1px;
	width: 50%;
	border-radius: 0;
}

.brand-cs_postpaid #sharing-tabs button {
	color: #82838c;
}

#sharing-tabs button.active {
	color: #faa61a;
	border-bottom: 3px solid #faa61a;
}

.brand-1010 #sharing-tabs button.active {
	color: #f2c97f;
	border-bottom: 3px solid #f2c97f;
}

.brand-cs_postpaid #sharing-tabs button.active {
	color: #0b417b;
	border-bottom: 3px solid #0b417b;
}

body.zh-hk #sharing-tab::after {
	content: "我的帳號";
}

body.en-us #sharing-tab::after {
	content: "My Account";
}

#daypass {
	border: 2px solid #8cc63f;
	border-radius: 2vmax;
	color: #ffffff;
	width: 100%;
	min-height: 15vmax;
	height: auto;
	margin: 2vw auto;
	font-size: 3.5vw;
	display: none;
}

body.en-us #daypass {
	min-height: calc(15vmax - 2vw - 2vw);
	height: auto;
}

#daypass>div {
	background-image: url("../../uploads/2019/12/day_pass_banner_r2.png");
	background-repeat: no-repeat;
	background-size: 82% 100%;
	background-position-x: right;
	display: flex;
	height: 100%;
	border-radius: 2vmax;
	padding: 2vw 0;
	min-height: calc(15vmax - 2vw - 2vw);
}

body.en-us #daypass>div {
	padding: 2vw 0;
	min-height: calc(15vmax - 2vw - 2vw);
}

#daypass>div::before {
	content: "";
	background-image: url("../../uploads/2019/11/day_pass_banner_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 1.5vw;
	width: 14%;
}

#daypass .title {
	padding-left: 5%;
	width: 46%;
	align-self: center;
}

body.zh-hk #daypass .title::before {
	content: "數據漫遊通行證";
	font-weight: 700;
}

body.en-us #daypass .title::before {
	content: "Data Roaming Pass";
	font-weight: 700;
}

#daypass .content {
	width: 28%;
	/* height: 100%; */
	align-self: center;
}

#daypass .amount,
#daypass .inhk {
	display: none;
}

body.zh-hk #passStatus.inhk .content::before {
	content: "有關查詢數據流量組合餘額，可參考上方紅色數據流量組合";
}

body.en-us #passStatus.inhk .content::before {
	content: "Please reference to above volume pass section to check your volume pass balance";
}

body.zh-hk #daypass .amount::before {
	content: "於此地區可用: ";
}

body.en-us #daypass .amount::before {
	content: "Applicable for this destination: ";
}

body.zh-hk #daypass .amount::after {
	content: " 日";
}

body.en-us #daypass .amount::after {
	content: " Day(s)";
}

.daypass-amount,
.multi-daypass-amount {
	display: none;
}

body.zh-hk #daypass .daypass-amount::before {
	content: "- 通行證: ";
}

body.en-us #daypass .daypass-amount::before {
	content: "- Roaming Pass: ";
}

body.zh-hk #daypass .daypass-amount::after {
	content: " 日";
}

body.en-us #daypass .daypass-amount::after {
	content: " day(s)";
}

body.zh-hk #daypass .multi-daypass-amount::before {
	content: "- 多次通行證組合: ";
}

body.en-us #daypass .multi-daypass-amount::before {
	content: "- Multi-day pass: ";
}

body.zh-hk #daypass .multi-daypass-amount::after {
	content: "組";
}

body.en-us #daypass .multi-daypass-amount::after {
	content: "pack(s)";
}

#daypass button {
	background-color: #009245;
	border: 0px;
	border-radius: 3vw;
	color: #ffffff;
	padding: 0 1vw;
	width: 70%;
	height: 5vw;
	position: relative;
	font-size: 4vw;
	margin: 5% 0% 5% 10%;
}

#daypass button.disabled {
	color: #cccccc;
	background-color: #f2f2f2;
}

body.zh-hk #daypass button.active::before {
	content: "使用中";
}

body.en-us #daypass button.active::before {
	content: "In use";
}

body.zh-hk #daypass button.standby::before {
	content: "續用";
}

body.en-us #daypass button.standby::before {
	content: "Resume";
}

body.zh-hk #daypass button.turnon::before {
	content: "開啟";
}

body.en-us #daypass button.turnon::before {
	content: "Turn on";
}

/* #daypass .content button::after {
	background-image: url('../../uploads/2019/11/arrow_icon.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: '';
	height: 200%;
	top: -50%;
	position: absolute;
	width: 50%;
	left: 92%;
} */
#daypass .expiry {
	color: #ffffff;
	font-size: 2.5vw;
	font-weight: bold;
	margin-left: 10%;
}

/* body.brand-1010 #daypass .expiry {
	color: #ffdd00;
} */
#quotapass {
	border: 2px solid #29abe2;
	border-radius: 2vmax;
	color: #ffffff;
	width: 100%;
	min-height: 15vmax;
	height: auto;
	margin: 2vw auto;
	font-size: 3.5vw;
	display: none;
}

#quotapass>div {
	background-image: url("../../uploads/2019/12/top_up_banner_r2.png");
	background-repeat: no-repeat;
	background-size: 82% 100%;
	background-position-x: right;
	display: flex;
	height: 100%;
	border-radius: 2vmax;
	padding: 2vw 0;
	min-height: calc(15vmax - 2vw - 2vw);
}

#quotapass>div::before {
	content: "";
	background-image: url("../../uploads/2019/11/top_up_banner_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 1.5vw;
	width: 14%;
}

#quotapass .title {
	padding-left: 5%;
	width: 46%;
	align-self: center;
}

body.zh-hk #quotapass .title::before {
	content: "數據流量組合";
	font-weight: 700;
}

body.en-us #quotapass .title::before {
	content: "Volume Data Roaming Pass";
	font-weight: 700;
}

#quotapass .content {
	width: 28%;
	align-self: center;
}

#quotapass .amount,
#quotapass .inhk {
	display: none;
}

body.zh-hk #quotapass .inhk span::before {
	content: "數據流量組合只適用於身處香港境外地區時使用";
}

body.en-us #quotapass .inhk span::before {
	content: "Can only be used outside Hong Kong.";
}

body.brand-csl.zh-hk #quotapass .amount::before,
body.brand-cs_postpaid.zh-hk #quotapass .amount::before {
	content: "你有 ";
}

body.brand-1010.zh-hk #quotapass .amount::before {
	content: "您有 ";
}

body.en-us #quotapass .amount::before {
	content: "You have ";
}

body.zh-hk #quotapass .amount::after {
	content: " 張優惠券";
}

body.en-us #quotapass .amount::after {
	content: " Voucher(s) for this Dest.";
}

#quotapass button {
	background-color: #0071bc;
	border: 0px;
	border-radius: 3vw;
	color: #ffffff;
	padding: 0 1vw;
	width: 70%;
	height: 5vw;
	position: relative;
	font-size: 4vw;
	margin: 5% 0% 5% 10%;
}

#quotapass button.disabled {
	color: #cccccc;
	background-color: #f2f2f2;
}

body.zh-hk #quotapass button.active::before {
	content: "使用中";
}

body.en-us #quotapass button.active::before {
	content: "In use";
}

body.zh-hk #quotapass button.standby::before {
	content: "續用";
}

body.en-us #quotapass button.standby::before {
	content: "Resume";
}

body.zh-hk #quotapass button.turnon::before {
	content: "開啟";
}

body.en-us #quotapass button.turnon::before {
	content: "Turn on";
}

/* #quotapass button::after {
	background-image: url('../../uploads/2019/11/arrow_icon.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: '';
	height: 200%;
	top: -50%;
	position: absolute;
	width: 50%;
	left: 92%;
} */
#quotapass .remaining {
	color: #ffffff;
	font-size: 2.5vw;
	font-weight: bold;
	margin-left: 10%;
	display: none;
}

body.en-us #quotapass .remaining span::before {
	content: "Remaining: ";
}

body.zh-hk #quotapass .remaining span::before {
	content: "尚餘: ";
}

#quotapass .expiry {
	color: #ffffff;
	font-size: 2.5vw;
	font-weight: bold;
	margin-left: 10%;
}

/* body.brand-1010 #quotapass .expiry {
	color: #ffdd00;
} */
#passStatus {
	border: 2px solid #8cc63f;
	border-radius: 2.5vmax;
	color: #ffffff;
	width: auto;
	min-height: 15vmax;
	height: auto;
	margin: 2vw auto;
	font-size: 3.5vw;
	display: none;
}

body.en-us #passStatus {
	min-height: calc(15vmax - 2vw - 2vw);
	height: auto;
}

#passStatus::before {
	content: "";
	background-image: url("../../uploads/2019/11/day_pass_banner_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 1.5vw;
	width: 17%;
}

#passStatus>div {
	background-image: url("../../uploads/2019/12/day_pass_banner_r2.png");
	background-repeat: no-repeat;
	background-size: 100% 15vmax;
	background-position-x: right;
	background-position-y: bottom;
	display: flex;
	height: 100%;
	border-radius: 2vmax/50% 2vmax 2vmax 50%;
	padding: 2vw 0;
	min-height: calc(15vmax - 2vw - 2vw);
	width: 100%;
	background-color: rgb(140, 198, 63);
}

body.en-us #passStatus>div {
	padding: 2vw 0;
	min-height: calc(15vmax - 2vw - 2vw);
}

#passStatus .title>div {
	padding: 3% 0;
}

body.zh-hk #passStatus .content::before {
	content: "數據漫遊通行證";
	font-weight: 700;
}

body.en-us #passStatus .content::before {
	content: "Data Roaming Pass";
	font-weight: 700;
}

body.zh-hk #passStatus .content.DP::before {
	content: "日數通行證";
}

body.zh-hk #passStatus .content.QP::before {
	content: "數據流量組合";
}

body.zh-hk .content.quotapass::before {
	content: "數據流量組合";
	font-weight: 700;
}

body.en-us .content.quotapass::before {
	content: "Volume Data Roaming Pass";
	font-weight: 700;
}

#passStatus .inhk,
#passStatus .daypass,
#passStatus .quotapass,
.daypass .noneOfCoupon,
.daypass .amount,
.daypass-amount,
.multi-daypass-amount,
.qoutapass .amount {
	display: none;
}

body.zh-hk #passStatus .inhk span::before {
	content: "數據漫遊通行證/增值服務只適用於身處香港境外地區時使用";
}

body.en-us #passStatus .inhk span::before {
	content: "Data Roaming Pass / Volume Data Roaming Pass Can only be used outside Hong Kong.";
}

F body.zh-hk.brand-csl .daypass .noneOfCoupon::before,
body.zh-hk.brand-cs_postpaid .daypass .noneOfCoupon::before {
	content: "你沒有剩餘的數據漫遊通行證通行證。";
}

body.zh-hk.brand-1010 .daypass .noneOfCoupon::before {
	content: "您沒有剩餘的數據漫遊通行證通行證。";
}

body.en-us .daypass .noneOfCoupon::before {
	content: "You do not have remaining Data Roaming Pass left.";
}

body.zh-hk .daypass .amount::before {
	content: "於此地區可用: ";
}

body.en-us .daypass .amount::before {
	content: "Applicable for this destination: ";
}

body.zh-hk .daypass .amount::after {
	content: " 日";
}

body.en-us .daypass .amount::after {
	content: " Day(s)";
}

body.zh-hk .daypass .daypass-amount::before {
	content: "- 通行證: ";
}

body.en-us .daypass .daypass-amount::before {
	content: "- Roaming Pass: ";
}

body.zh-hk .daypass .daypass-amount::after {
	content: " 日";
}

body.en-us .daypass .daypass-amount::after {
	content: " day(s)";
}

body.zh-hk .daypass .multi-daypass-amount::before {
	content: "- 多次通行證組合: ";
}

body.en-us .daypass .multi-daypass-amount::before {
	content: "- Multi-day pass: ";
}

body.zh-hk .daypass .multi-daypass-amount::after {
	content: "組";
}

body.en-us .daypass .multi-daypass-amount::after {
	content: "pack(s)";
}

.daypass .arrow {
	position: relative;
	height: 2vw;
	margin-top: 1vw;
}

.daypass .arrow:after {
	content: " ";
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
}

.daypass .arrow.expand::after {
	background-image: url("../../uploads/2019/12/up_white.png");
	height: 140%;
}

.daypass .arrow.collapse::after {
	background-image: url("../../uploads/2019/12/down_arrow_white_r2.png");
}

body.brand-csl.zh-hk .quotapass .amount::before,
body.brand-cs_postpaid.zh-hk .quotapass .amount::before {
	content: "你有 ";
}

body.brand-1010.zh-hk .quotapass .amount::before {
	content: "您有 ";
}

body.en-us .quotapass .amount::before {
	content: "You have ";
}

body.zh-hk .quotapass .amount::after {
	content: " 張優惠券";
}

body.en-us .quotapass .amount::after {
	content: " Voucher(s) for this Dest.";
}

#passStatus button {
	background-color: #009245;
	border: 0px;
	border-radius: 3vw;
	color: #ffffff;
	padding: 0 1vw;
	width: 70%;
	height: 5vw;
	line-height: 5vw;
	position: relative;
	font-size: 4vw;
	margin: 5% 0% 5% 10%;
}

#passStatus button.turnon {
	background-color: #f15a24;
}

#passStatus button.more {
	background-color: #f15a24;
}

#passStatus button.active,
#passStatus button.standby {
	background-color: #009245;
}

body.zh-hk #passStatus button.active::before {
	content: "使用中";
}

body.en-us #passStatus button.active::before {
	content: "In use";
}

body.zh-hk #passStatus button.standby::before {
	content: "續用";
}

body.en-us #passStatus button.standby::before {
	content: "Resume";
}

body.zh-hk #passStatus button.turnon::before {
	content: "啟用";
}

body.en-us #passStatus button.turnon::before {
	content: "Activate";
}

body.zh-hk #passStatus button.more::before {
	content: "更多";
}

body.en-us #passStatus button.more::before {
	content: "More";
}

#passStatus .remaining {
	color: #ffffff;
	font-size: 2.5vw;
	font-weight: bold;
	margin-left: 10%;
	display: none;
}

body.en-us #passStatus .remaining span::before {
	content: "Remaining: ";
}

body.zh-hk #passStatus .remaining span::before {
	content: "尚餘: ";
}

#passStatus .expiry {
	color: #ffffff;
	font-size: 2.5vw;
	font-weight: bold;
	margin-left: 10%;
}

#bonus {
	border: 2px solid #f15a24;
	border-radius: 2.5vmax;
	color: #ffffff;
	width: auto;
	height: auto;
	min-height: 15vmax;
	margin: 2vw auto;
	font-size: 3.5vw;
	display: none;
}

#bonus::before {
	content: "";
	background-image: url("../../uploads/2019/11/bonus_banner_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 1.5vw;
	width: 17%;
	height: 15vmax;
}

#bonus>div {
	width: 100%;
}

#bonus>div>div:first-child {
	height: 90px;
	display: flex;
	background-image: url("../../uploads/2019/12/bonus_banner_r2.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position-x: right;
	min-height: calc(15vmax - 2vw - 2vw);
	padding: 2vw 0;
	border-radius: 2vmax/50% 2vmax 2vmax 50%;
}

#bonus.expand>div>div:first-child {
	border-bottom-right-radius: 0;
}

body.zh-hk #bonus .content::before {
	content: "數據漫遊組合";
	font-weight: 700;
	display: block;
}

body.en-us #bonus .content::before {
	content: "Data Roaming Package";
	font-weight: 700;
	display: block;
}

body.zh-hk #bonus .remain::before {
	content: "尚餘: ";
}

body.en-us #bonus .remain::before {
	content: "Remaining: ";
}

#bonus button {
	background: transparent;
	border: 0px;
	border-radius: 3vw;
	color: #ffffff;
	padding: 0 1vw;
	width: 70%;
	height: 5vw;
	line-height: 5vw;
	position: relative;
	font-size: 3.5vw;
	margin: 0;
	display: none;
}

#bonus button::after {
	background-image: url("../../uploads/2019/11/arrow_icon.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	height: 200%;
	top: -50%;
	position: absolute;
	width: 50%;
	left: 95%;
}

#bonus button .zh-hk {
	width: 10vw;
}

#bonus.expand .content button::after {
	transform: rotate(90deg);
}

.bonusPack {
	background-image: url("../../uploads/2019/12/bonus_banner_r2.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position-x: right;
	height: 90px;
	min-height: calc(15vmax - 2vw - 2vw);
	padding: 2vw 0;
	margin-top: 3%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	border-radius: 2vmax 0 0 2vmax/50% 2vmax 2vmax 50%;
}

#bonus.expand>div>.bonusPack:last-child {
	border-bottom-right-radius: 2vmax;
}

.bonusTitle,
.bonusRemain {
	padding-left: 5%;
	width: 75%;
}

body.zh-hk #bonus .bonusRemain::before {
	content: "尚餘: ";
}

body.en-us #bonus .bonusRemain::before {
	content: "Remaining: ";
}

body.zh-hk #bonus .share::after {
	content: " (可共享)";
}

body.en-us #bonus .share::after {
	content: " (share)";
}

.vpPack {
	background-image: url("/abc_cms/wp-content/uploads/2019/12/bonus_banner_r2.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position-x: right;
	height: auto;
	min-height: calc(15vmax - 2vw - 2vw);
	padding: 2vw 0;
	margin-top: 3%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	border-radius: 2vmax 0 0 2vmax/50% 2vmax 2vmax 50%;
}

.vpPack:last-child {
	border-bottom-right-radius: 2vmax;
}

.vpTitle,
.vpRemain,
.vpExpiry {
	padding-left: 5%;
	width: 75%;
}

body.zh-hk #bonus .vpRemain::before {
	content: "尚餘: ";
}

body.en-us #bonus .vpRemain::before {
	content: "Remaining: ";
}

#coupon {
	border: 2px solid #faa61a;
	border-radius: 2.5vmax;
	color: #ffffff;
	width: auto;
	min-height: 15vmax;
	height: auto;
	margin: 2vw auto;
	font-size: 3.5vw;
	display: none;
}

#coupon::before {
	content: "";
	background-image: url("../../uploads/2019/11/coupon_banner_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 1.5vw;
	width: 17%;
}

#coupon>div {
	background-image: url("../../uploads/2019/12/coupon_banner_r2.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position-x: right;
	display: flex;
	height: 100%;
	border-radius: 2vmax/50% 2vmax 2vmax 50%;
	padding: 2vw 0;
	min-height: calc(15vmax - 2vw - 2vw);
	width: 100%;
}

body.zh-hk #coupon .content::before {
	content: "戶口尚餘:";
	font-weight: 700;
	display: block;
}

body.en-us #coupon .content::before {
	content: "Remaining:";
	font-weight: 700;
	display: block;
}

#coupon .amount.zero,
#coupon .amount.qp,
#coupon .amount.dp,
#coupon .amount.mdpset,
#coupon .amount.mdp {
	display: none;
}

body.zh-hk #coupon .amount.zero::before {
	content: "沒有結餘";
}

body.en-us #coupon .amount.zero::before {
	content: "No remaining";
}

#coupon .amount.qp::before {
	content: "- ";
}

body.zh-hk #coupon .amount.qp::after {
	content: " GB 數據流量組合";
}

body.en-us #coupon .amount.qp::after {
	content: " GB of Volume Data Roaming Pass ";
}

#coupon .amount.dp::before {
	content: "- ";
}

body.zh-hk #coupon .amount.dp::after {
	content: " 日數據漫遊通行證";
}

body.en-us #coupon .amount.dp::after {
	content: " day(s) of  Data Roaming Pass";
}

#coupon .amount.mdpset::before {
	content: "- ";
}

body.zh-hk #coupon .amount.mdpset::after {
	content: " 組數據漫遊多次通行證組合";
}

body.en-us #coupon .amount.mdpset::after {
	content: " set(s) of Data Roaming Multi Passes Package";
}

body.zh-hk #coupon .amount.mdp::before {
	content: "(共 ";
}

body.en-us #coupon .amount.mdp::before {
	content: "( ";
}

body.zh-hk #coupon .amount.mdp::after {
	content: " 天)";
}

body.en-us #coupon .amount.mdp::after {
	content: " Days in Total)";
}

#coupon button {
	background-color: #f15a24;
	border: 0px;
	border-radius: 3vw;
	color: #ffffff;
	padding: 0 1vw;
	width: 70%;
	height: 5vw;
	line-height: 5vw;
	position: relative;
	font-size: 4vw;
	margin: 5% 0% 5% 10%;
}

body.zh-hk #coupon button::before {
	content: "更多";
}

body.en-us #coupon button::before {
	content: "More";
}

.statusBox .content {
	padding-left: 5%;
	width: 63%;
	align-self: center;
}

.statusBox .content:before {
	display: block;
	font-weight: 700;
}

.statusBox .buttonArea {
	width: 35%;
	align-self: center;
}

.tnc_title {
	width: 86%;
	margin: 3vw auto;
	font-size: 4vw;
	line-height: 1.5;
}

#setting {
	display: flex;
	width: 86%;
	margin: -3vw auto;
	font-size: 4vw;
}

#setting p {
	font-size: 4vw;
	margin-top: 0;
}

body.zh-hk #setting .content span:before {
	content: "開啟 / 關閉共享數據漫遊通行證:(只供主SIM客戶設定)";
}

body.en-us #setting .content span:before {
	content: "Turn on / off Data Roaming Pass entitlement sharing:(primary user only)";
}

.setting-button {
	position: relative;
	display: inline-block;
	width: 14vw;
	height: 100%;
	margin-left: 15%;
	align-self: center;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 4vw;
	height: 7vw;
}

.brand-1010 .slider {
	background-color: #EAEAEA;
}

.slider:before {
	position: absolute;
	content: "";
	height: 88%;
	width: 44%;
	left: 5%;
	bottom: 7%;
	background-color: white;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 50%;
}

.brand-1010 .slider:before {
	background-color: #262522;
	filter: drop-shadow(0 1px 2px black);
}

#setting.on .setting-button input+.slider {
	background-color: #4cd964;
}

.brand-1010 #setting.on .setting-button input+.slider {
	background-color: #F2C97F;
}

#setting.on .setting-button input:focus+.slider {
	box-shadow: 0 0 1px #4cd964;
}

#setting.on .setting-button input+.slider:before {
	-webkit-transform: translateX(108%);
	-ms-transform: translateX(108%);
	transform: translateX(108%);
}

.setting-button input {
	opacity: 0;
	width: 0;
	height: 0;
}

#mup_list_title {
	width: 86%;
	margin: 8px auto;
	font-size: 4vw;
	display: none;
}

body.brand-csl.zh-hk #mup_list_title span::before,
body.brand-cs_postpaid.zh-hk #mup_list_title span::before {
	content: "你可以跟以下成員共享數據漫遊通行證:";
}

body.brand-1010.zh-hk #mup_list_title span::before {
	content: "您可以跟以下成員共享數據漫遊通行證:";
}

body.en-us #mup_list_title span::before {
	content: "You can share Data Roaming Pass with following members:";
}

#mup_list {
	border-collapse: collapse;
	border: 1px solid #ffffff;
	margin: 0 auto;
	text-align: center;
	width: 100%;
	font-size: 4vw;
	display: none;
}

body.zh-hk #mup_list .mobile_number span::before {
	content: "電話號碼";
}

body.en-us #mup_list .mobile_number span::before {
	content: "Mobile Number";
}

body.zh-hk #mup_list .mup_role span::before {
	content: "角色";
}

body.en-us #mup_list .mup_role span::before {
	content: "MUP Role";
}

#mup_list th {
	background-color: #faa61a;
	border: 1px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	color: #ffffff;
	height: 6vw;
}

.brand-1010 #mup_list th {
	background-color: #ffdd00;
	color: #000000;
}

#mup_list tr:nth-child(even) {
	background-color: #fcddcf;
}

#mup_list tr:nth-child(odd) {
	background-color: #fdefe9;
}

#mup_list td {
	border: 1px solid #ffffff;
	font-weight: 700;
	width: 50%;
	height: 3vw;
}

#preference-list,
.preference-description {
	font-size: 4vw;
}

/* .brand-1010 #preference-list {
	border-color: #ffffff;
} */
.preference-header {
	text-align: center;
	margin: 1em 0;
	font-weight: bold;
}

.brand-csl .preference-header {
	color: #faa61a;
}

.brand-1010 .preference-header {
	color: #cb9c57;
}

.brand-cs_postpaid .preference-header {
	color: #09417A;
}

.currentDescription {
	display: none;
}

body.zh-hk .preference-header span::before {
	content: "漫遊通行證啟動偏好";
}

body.en-us .preference-header span::before {
	content: "Roaming Pass Activation Preference";
}

.preference {
	display: flex;
	padding: 2vmax 2vmax;
}

.brand-1010 .preference {
	border-color: #ffffff;
}

.currentDescription>div {
	padding: 2vmax 0;
}

.speedType input[type=radio],
.preference input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	outline: none;
	transition: all 0.3s ease;
	color: white;
	vertical-align: bottom;
	border-radius: 50%;
	line-height: 20px;
	box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.4), inset 0px 2px 5px rgba(0, 0, 0, 0.4);
	margin-right: 5px;
	position: relative;
	background-color: white;
}

.speedType input[type="radio"]:checked,
.preference input[type="radio"]:checked {
	background: var(--checkbox-checked-bg-color);
	border: var(--checkbox-checked-bg-color);
	box-shadow: none;
}

.speedType input[type="radio"]:checked::after,
.preference input[type="radio"]:checked::after {
	position: absolute;
	content: "";
	left: 6px;
	top: 3px;
	width: 8px;
	height: 12px;
	transform: rotate(45deg);
	display: block;
	border-bottom-right-radius: 3px;
	background: radial-gradient(farthest-side at top left, transparent 97%, var(--checkbox-checked-color) 100%) bottom 2.5px left calc(100% - 2px) / 2px 2px, radial-gradient(farthest-side, var(--checkbox-checked-color) 99%, transparent 100%) top right / 2.5px 2.5px, radial-gradient(farthest-side, var(--checkbox-checked-color) 99%, transparent 100%) bottom left / 2.5px 2.5px, linear-gradient(var(--checkbox-checked-color), var(--checkbox-checked-color)) right bottom / 2.5px 88%, linear-gradient(var(--checkbox-checked-color), var(--checkbox-checked-color)) right bottom / 88% 2.5px;
	background-repeat: no-repeat;
}

/* .preference .name {
	width: 100%;
} */
/*.preference .desc {
	width: 75%;
}*/
body.zh-hk .Basic .name span::before {
	content: "手動";
}

body.en-us .Basic .name span::before {
	content: "Manual";
}

body.zh-hk .Basic .current span::before {
	content: "你已選擇: 手動";
}

body.en-us .Basic .current span::before {
	content: "You have selected: Manual";
}

/* body.zh-hk .Basic .desc span::before {
	content: '- 由客戶自行確認每次通行證之使用';
}
body.en-us .Basic .desc span::before {
	content: '- Require confirmation every time before roaming Pass activation';
} */
body.zh-hk .Regular .name span::before {
	content: "半自動";
}

body.en-us .Regular .name span::before {
	content: "Semi-auto";
}

body.zh-hk .Regular .current span::before {
	content: "你已選擇: 半自動";
}

body.en-us .Regular .current span::before {
	content: "You have selected: Semi-auto";
}

/* body.zh-hk .Regular .desc span::before {
	content: '- 首次通行證之使用由客戶自行確認,確認後在同一漫遊地區自動啟用(包括已付款及需額外付款之通行證)';
}
body.en-us .Regular .desc span::before {
	content: '- Require first time confirmation. Once confirmed, will automatic activate new roaming Pass within the same roaming destination (including both paid and require charge roaming Pass)';
} */
body.zh-hk .Automatic .name span::before {
	content: "自動";
}

body.en-us .Automatic .name span::before {
	content: "Automatic";
}

body.zh-hk .Automatic .current span::before {
	content: "你已選擇: 自動";
}

body.en-us .Automatic .current span::before {
	content: "You have selected: Automatic";
}

/* body.zh-hk .Automatic .desc span::before {
	content: '- 漫遊時會自動啟用, 首先扣除已付款之通行證, 其後自動需額外付款之通行證';
}
body.en-us .Automatic .desc span::before {
	content: '- Activate roaming Pass automatically. Paid roaming Pass will be consumed first, chargeable roaming Pass if there are no more applicable paid roaming Pass';
} */
body.zh-hk .Advanced .name span::before {
	content: "高階自動";
}

body.en-us .Advanced .name span::before {
	content: "Advance";
}

body.zh-hk .Advanced .current span::before {
	content: "你已選擇: 高階自動";
}

body.en-us .Advanced .current span::before {
	content: "You have selected: Advance";
}

/* body.zh-hk .Advanced .desc span::before {
	content: '- 基於自動模式, 於E區及F區時, 會自動選用數據流量組合,最多20次';
}
body.en-us .Advanced .desc span::before {
	content: '- Addition to Automatic mode, activate at most 20 Volume Data Roaming Passes when you roaming to Zone E & F';
} */
#speed-list {
	font-size: 4vw;
}

.speed-header {
	text-align: center;
	margin: 1em 0;
	font-weight: bold;
}

.brand-csl .speed-header {
	color: #faa61a;
}

.brand-1010 .speed-header {
	color: #cb9c57;
}

.brand-cs_postpaid .speed-header {
	color: #09417A;
}

body.zh-hk .speed-header span::before {
	content: "漫遊選項";
}

body.en-us .speed-header span::before {
	content: "Roaming option";
}

.speedType {
	display: flex;
	padding: 2vmax 0;
	border-bottom: 1px solid #000000;
}

.brand-1010 .speedType {
	border-color: #ffffff;
}

body.zh-hk .L1 .name span::before {
	content: "數據漫遊通行證 Silver";
}

body.en-us .L1 .name span::before {
	content: "Data Roaming Pass Silver";
}

body.zh-hk .L2 .name span::before {
	content: "數據漫遊通行證 Gold";
}

body.en-us .L2 .name span::before {
	content: "Data Roaming Pass Gold";
}

#coupon-tabs container {
	display: flex;
	justify-content: space-around;
	margin: 2vw 0;
}

#coupon-tabs button {
	background-color: transparent;
	border: 0px;
	color: #b2b2b2;
	font-size: 4vw;
	margin-bottom: -1px;
	border-radius: 0;
	margin-right: 12px;
	margin-left: 12px;
}

body.en-us #coupon-tabs button::after {
	/* white-space: nowrap; */
	font-size: 3.8vw;
}

#coupon-tabs button.active {
	color: #faa61a;
	border-bottom: 3px solid #faa61a;
}

.brand-1010 #coupon-tabs button.active {
	color: #f2c97f;
	border-bottom: 3px solid #f2c97f;
}

.brand-cs_postpaid #coupon-tabs button.active {
	color: #be81ef;
	border-bottom: 3px solid #be81ef;
}

body.zh-hk #coupon-tab::after {
	/* content: '未使用'; */
	content: "我的通行證";
}

body.en-us #coupon-tab::after {
	/* content: 'Un-used'; */
	content: "My Roaming Pass";
}

body.zh-hk #purchase-history-tab::after {
	/* content: '購買記錄'; */
	content: "收費記錄";
}

body.en-us #purchase-history-tab::after {
	/* content: 'Purchase History'; */
	content: "Charged Records";
}

body.zh-hk #usage-history-tab::after {
	content: "使用記錄";
}

body.en-us #usage-history-tab::after {
	content: "Usage History";
}

body.zh-hk #self-usage-history-tab::after {
	content: "我的使用記錄";
}

body.en-us #self-usage-history-tab::after {
	content: "My Usage History";
}

body.zh-hk #mup-usage-history-tab::after {
	content: "其他號碼使用記錄";
}

body.en-us #mup-usage-history-tab::after {
	content: "Other Number Usage History";
}

.coupon-filter {
	margin: 4vw 0;
}

.coupon-filter input {
	margin: 2%;
	width: 90%;
	display: block;
	padding: 0 2vw;
	border: none;
	background: none;
}

/* body.en-us .coupon-total-remaining{
	width: 90%;
} */
.brand-1010 .coupon-total-remaining {
	color: #ffffff;
}

.brand-cs_postpaid .coupon-total-remaining {
	color: #be81ef;
}

body.zh-hk .coupon-total-remaining:before {
	content: "戶口尚餘: ";
}

body.en-us .coupon-total-remaining:before {
	content: "Remaining: ";
}

.coupon-total-remaining-dp-display {
	display: none;
}

/* .coupon-total-remaining-dp-display:before {
	content: '(';
}
.coupon-total-remaining-dp-display:after {
	content: ')';
}
body.en-us .coupon-total-remaining-dp-display:after {
	content: ']';
}
.coupon-total-remaining-dp-display.and:after {
	content: ') 及';
}
body.en-us .coupon-total-remaining-dp-display:before {
	content: '[';
}
body.en-us .coupon-total-remaining-dp-display.and:after {
	content: '] and';
} */
.coupon-type-list {
	background: white;
	width: 100%;
	display: flex;
	justify-content: space-around;
	border-radius: 25px 25px 0px 0px;
	margin-top: 5%;
}

.coupon-type-list button {
	background-color: transparent !important;
	border: 0px;
	color: #808080;
	font-size: 4vw;
	font-weight: 700;
	display: none;
	flex: 1;
}

body.zh-hk .coupon-type-list button {
	white-space: nowrap;
}

body.en-us .coupon-type-list button span {
	/* white-space: nowrap; */
	font-size: 3.8vw;
}

body.brand-1010 .coupon-type-DP,
body.brand-1010 .coupon-type-MDP,
body.brand-1010 .coupon-type-QP,
body.brand-1010 .coupon-type-AP {
	color: #808080;
}

.coupon-type-list button.active {
	color: #faa61a;
	border-bottom: 3px solid #faa61a;
	margin-bottom: -1px;
}

body.brand-cs_postpaid .coupon-type-list button.active {
	color: #be81ef;
	border-bottom: 3px solid #be81ef;
}

.coupon-item {
	margin: 4% 3% 4% 6%;
	border-bottom: 2px solid #808080;
	padding-bottom: 4%;
	font-size: 4vw;
}

.coupon-item:last-child {
	border-bottom: 0px;
}

.coupon-name {
	font-size: 5vw;
	font-weight: 700;
	width: 100%;
}

.coupon-dest {
	margin-bottom: 4%;
	/* word-spacing: 7px; */
	line-height: 120%;
	position: relative;
}

body.zh-hk .coupon-dest:before {
	content: "覆蓋地區: ";
}

body.en-us .coupon-dest:before {
	content: "Covered Destination: ";
}

.coupon-dest::after {
	content: " ";
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 5vw;
	height: 5vw;
	right: -5vw;
	position: absolute;
	top: 5vw;
}

.coupon-dest.collapse::after {
	background-image: url("../../uploads/2019/12/down_arrow_black_r2.png");
}

.brand-1010 .coupon-dest.collapse::after {
	background-image: url("../../uploads/2019/12/down_arrow_white_r2.png");
}

.coupon-dest.expand::after {
	background-image: url("../../uploads/2019/12/up_black.png");
}

.brand-1010 .coupon-dest.expand::after {
	background-image: url("../../uploads/2019/12/up_white.png");
}

.coupon-dest-desc {
	overflow: hidden;
	font-size: 12px;
}

body.zh-hk .coupon-expiry:before {
	content: "最早到期日: ";
}

body.en-us .coupon-expiry:before {
	content: "Earliest Expiry Date: ";
}

body.zh-hk .sub-coupon-expiry:before {
	content: "到期日 ";
}

body.en-us .sub-coupon-expiry:before {
	content: "Expiry Date";
}

.coupon-item button {
	border: 0px;
	background-color: #eeaa41;
	border-radius: 8px;
	float: right;
	margin-top: 1%;
	width: 18%;
	height: 6vw;
	text-align: center;
}

.brand-1010 .coupon-item button {
	background-color: #ffdd00;
}

body.zh-hk .coupon-item button:before {
	content: "詳情";
}

body.en-us .coupon-item button:before {
	content: "Details";
}

.coupon-expiry {
	width: 75%;
}

.sub-coupon-expiry {
	width: 75%;
}

/* .individual-coupon-expiry {
	width: 75%
} */
#mup_list {
	display: none;
}

body.zh-hk .coupon-detail-type span:before {
	content: "種類";
}

body.en-us .coupon-detail-type span:before {
	content: "Type";
}

.coupon-detail-number:before {
	content: "#";
}

body.zh-hk .coupon-detail-status span:before {
	content: "狀態";
}

body.en-us .coupon-detail-status span:before {
	content: "Status";
}

body.zh-hk .coupon-detail-expiry span:before {
	content: "到期日";
}

body.en-us .coupon-detail-expiry span:before {
	content: "Expiry Date";
}

body.zh-hk .coupon-detail-consumed span:before {
	content: "使用日期";
}

body.en-us .coupon-detail-consumed span:before {
	content: "Consumed Date";
}

body.zh-hk .VALID:before {
	content: "有效";
}

body.en-us .VALID:before {
	content: "VALID";
}

body.zh-hk .EXPIRED:before {
	content: "已過期";
}

body.en-us .EXPIRED:before {
	content: "EXPIRED";
}

body.zh-hk .USED:before {
	content: "已使用";
}

body.en-us .USED:before {
	content: "USED";
}

body.zh-hk .VOID:before {
	content: "無效";
}

body.en-us .VOID:before {
	content: "VOID";
}

#history-list,
#mup-list,
.coupon-list {
	background-color: white;
	border-radius: 8px;
	padding-top: 20px;
	color: #333333;
}

.order-item {
	padding: 2% 0;
	margin: 0 4%;
	line-height: 1.5;
	font-size: 4vw;
}

.order-item>div:first-of-type {
	color: #999999;
	width: 65%;
}

.order-item>div:nth-last-of-type(2) {
	width: 65%;
}

.brand-1010 .pre-purchase-offerlist-item.Special::before {
	background-image: linear-gradient(to bottom, #ef6a65, #de4343);
	font-weight: bold;
	font-size: 11px;
}

.brand-1010 .pre-purchase-offerlist-item.BestSell::before {
	background-image: linear-gradient(to bottom, #ef6a65, #de4343);
	font-weight: bold;
	font-size: 11px;
}

.brand-cs_postpaid .pre-purchase-offerlist-item.Special::before {
	background-image: url("../../uploads/2021/12/ribbon_cs_postpaid_r2.png");
}

.brand-cs_postpaid .pre-purchase-offerlist-item.BestSell::before {
	background-image: url("../../uploads/2021/12/ribbon_cs_postpaid_r2.png");
}

.brand-1010 .pre-purchase-offerlist-item-title-destination,
.brand-1010 .pre-purchase-offerlist-item-title-priceRemark,
.brand-1010 .pre-purchase-offerlist-item-title-promoteInfo {
	color: #ffdd00;
}

.brand-1010 .highlight .pre-purchase-offerlist-item-title-passRemark,
.brand-1010 .highlight .pre-purchase-offerlist-item-title-fee,
.brand-1010 .highlight .pre-purchase-offerlist-item-title-destination,
.brand-1010 .highlight .pre-purchase-offerlist-item-title-priceRemark,
.brand-1010 .highlight .pre-purchase-offerlist-item-title-promoteInfo {
	color: #ffffff;
}

.brand-1010 .pre-purchase-offerlist-item {
	background: #f4f4f4;
	box-shadow: none;
	color: #333333;
}

.brand-1010 .highlight.pre-purchase-offerlist-item {
	background-color: #f4f4f4;
}

.brand-1010 #my-account-tabs button.active {
	color: #f2c97f;
	border-bottom: 3px solid #f2c97f;
}

.brand-cs_postpaid #my-account-tabs button.active {
	color: #be81ef;
	border-bottom: 3px solid #be81ef;
}

.brand-cs_postpaid .pre-purchase-offerlist-item-title-destination,
.brand-cs_postpaid .pre-purchase-offerlist-item-title-promoteInfo {
	color: #be81ef;
}

.brand-cs_postpaid .pre-purchase-offerlist-item-title-priceRemark {
	color: #09417A;
}

.brand-cs_postpaid .pre-purchase-offerlist-item {
	box-shadow: #cccccc 0px 2px 6px;
}

.brand-cs_postpaid .highlight.pre-purchase-offerlist-item {
	background-color: white;
}

#tips-tariff,
#tips-other,
#tips-roaming {
	border-top: 1px solid #808080;
	line-height: 2.5;
	padding: 2vw 0;
}

.tips-title {
	font-weight: 700;
	font-size: 5vw;
}

.tips-content {
	font-size: 4vw;
}

#tips-roaming .tips-content {
	line-height: normal;
}

.tips-data,
.tips-idd,
.tips-hotline {
	position: relative;
	padding: 0 9%;
}

.tips-data::before {
	content: "";
	background-image: url("../../uploads/2019/12/icon_roaming_csl.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 8%;
	height: 100%;
	position: absolute;
	left: 0%;
}

body.brand-1010 .tips-data::before {
	background-image: url("../../uploads/2019/12/icon_roaming_1010.png");
}

.tips-idd::before {
	content: "";
	background-image: url("../../uploads/2019/12/icon_idd_csl.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 8%;
	height: 100%;
	position: absolute;
	left: 0%;
}

body.brand-1010 .tips-idd::before {
	background-image: url("../../uploads/2019/12/icon_idd_1010.png");
}

.tips-hotline::before {
	content: "";
	background-image: url("../../uploads/2019/12/icon_hotline_csl.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 8%;
	height: 100%;
	position: absolute;
	left: 0%;
}

body.brand-1010 .tips-hotline::before {
	background-image: url("../../uploads/2019/12/icon_hotline_1010.png");
}

.tips-data::after,
.tips-idd::after,
.tips-hotline::after {
	content: "";
	background-image: url("../../uploads/2020/01/icon_arrow_csl.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 8%;
	height: 100%;
	position: absolute;
	right: 0%;
}

.brand-1010 .tips-data::after,
.brand-1010 .tips-idd::after,
.brand-1010 .tips-hotline::after {
	background-image: url("../../uploads/2020/01/icon_arrow_1010.png");
}

.tips-roaming-activate,
.tips-roaming-end,
.tips-roaming-reminder {
	position: relative;
	padding-left: 9%;
	margin-top: 4vw;
}

.tips-roaming-activate::before {
	content: "";
	background-image: url("../../uploads/2020/02/02-icon_smg_csl_v2.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 8%;
	height: 100%;
	position: absolute;
	left: 0%;
}

body.brand-1010 .tips-roaming-activate::before {
	background-image: url("../../uploads/2020/02/02-icon_smg_1010.png");
}

.tips-roaming-end::before {
	content: "";
	background-image: url("../../uploads/2020/02/03-icon_refresh_csl.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 8%;
	height: 100%;
	position: absolute;
	left: 0%;
}

body.brand-1010 .tips-roaming-end::before {
	background-image: url("../../uploads/2020/02/03-icon_refresh_1010.png");
}

.tips-roaming-reminder::before {
	content: "";
	background-image: url("../../uploads/2020/02/04-icon_click-confirm_csl.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 8%;
	height: 100%;
	position: absolute;
	left: 0%;
}

body.brand-1010 .tips-roaming-reminder::before {
	background-image: url("../../uploads/2020/02/04-icon_click-confirm._1010.png");
}

.tips-content .Basic,
.tips-content .Regular,
.tips-content .Automatic,
.tips-content .Advanced {
	display: none;
}

.hotline {
	display: none;
}

.tariff-data,
.tariff-idd {
	display: none;
	height: 85vh;
}

.tariff-data iframe,
.tariff-idd iframe,
.tariff-idd embed {
	width: 100%;
	height: 85vh;
}

.tariff-idd embed {
	background-color: #ffffff;
}

/* The following is used to change style from Wordpress*/
figure {
	margin: 0;
}

figure img {
	width: 100%;
	height: 100%;
	border-radius: 25px;
}

h1 {
	font-size: 50px;
	font-size: 5vw;
}

h2 {
	font-size: 45px;
	font-size: 4.5vw;
}

h3 {
	font-size: 40px;
	font-size: 4vw;
}

p {
	font-size: 35px;
	font-size: 3.5vw;
	line-height: 1.5;
}

small {
	font-size: 30px;
	font-size: 3vw;
}

.grey {
	color: #666666;
}

table {
	border-radius: 25px;
	border-spacing: 0;
	width: 100%;
	border: 1px solid #e1e1e8;
	margin: 5% 0;
	color: #333333;
}

th,
td {
	border: 1px solid #d7d7d7;
	padding: 7px;
	border-left: none;
	border-top: none;
	background: white;
}

.brand-1010 table,
.brand-1010 th,
.brand-1010 td {
	border-color: #909090;
	color: white;
	background: #444441;
}

.brand-1010 table {
	border: unset;
}

.brand-cs_postpaid table,
.brand-cs_postpaid th,
.brand-cs_postpaid td {
	border-color: #e1e1e8;
	background: white;
}

.brand-cs_postpaid table {
	border-radius: 8px;
	box-shadow: 0px 2px 6px #cccccc;
}

table> :first-child>tr:first-child> :first-child {
	border-top-left-radius: 25px;
}

table> :first-child>tr:first-child> :last-child {
	border-top-right-radius: 25px;
}

.brand-cs_postpaid table> :first-child>tr:first-child> :first-child {
	border-top-left-radius: 8px;
}

.brand-cs_postpaid table> :first-child>tr:first-child> :last-child {
	border-top-right-radius: 8px;
}

table tr> :last-child {
	border-right: none;
}

table> :last-child>tr:last-child>th,
table> :last-child>tr:last-child>td {
	border-bottom: none;
}

table> :last-child>tr:last-child> :first-child {
	border-bottom-left-radius: 25px;
}

table> :last-child>tr:last-child> :last-child {
	border-bottom-right-radius: 25px;
	border-right: none;
}

.brand-cs_postpaid table> :last-child>tr:last-child> :first-child {
	border-bottom-left-radius: 8px;
}

.brand-cs_postpaid table> :last-child>tr:last-child> :last-child {
	border-bottom-right-radius: 8px;
	border-right: none;
}

mark {
	background: none;
	color: #faa61a;
}

.brand-1010 mark {
	color: #cb9c57;
}

.brand-cs_postpaid mark {
	color: #be81ef;
}

.hotline-block {
	border-radius: 5px;
	padding: 2% 5%;
	margin-left: auto;
	margin-right: auto;
}

.hotline-block {
	background: linear-gradient(to right, #faa61a, #f98412);
	margin: 5% 0;
	font-weight: bold;
}

.brand-1010 .hotline-block {
	background: #ffdd00;
	color: #333333;
	font-weight: normal;
}

.brand-cs_postpaid .hotline-block {
	background: linear-gradient(90deg, #662D91 0%, #2E3192 100%);
	font-weight: normal;
	color: white;
}

.hotline-block .hotline-block-head {
	font-size: 4vw;
	font-weight: bold;
}

.hotline-block .hotline-block-content {
	width: 80%;
	margin-left: 15%;
	position: relative;
}

p.hotline-block-content:before {
	content: "";
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(/abc_cms/wp-content/uploads/2022/07/hotline-block-csl-icon.png);
	width: 15%;
	display: block;
	height: 100%;
	left: -20%;
}

.brand-1010 p.hotline-block-content:before {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/hotline-block-1010-icon.png);
}

.brand-cs_postpaid p.hotline-block-content:before {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/hotline-block-cs-postpaid-icon.png);
}

.white-block {
	background-color: #ffffff;
	color: #000000;
	text-align: center;
	border-radius: 25px;
	font-weight: bold;
	padding: 2% 5%;
}

.white-block .has-text-align-left {
	text-align: left;
}

.brand-csl .white-block {
	background-color: #ffffff;
	box-shadow: 0 0 8px #949494;
}

.brand-1010 .white-block {
	color: #ffffff;
	background-color: #444441;
}

.brand-cs_postpaid .white-block {
	border-radius: 8px;
}

.white-block mark {
	font-size: 5vw;
}

.white-block span mark {
	font-size: 3.5vw;
}

.coverage-link {
	margin: 5% 0;
	border-radius: 25px;
	padding: 10px 0;
	position: relative;
	background: #faa61a;
}

.brand-1010 .coverage-link {
	background: #f2c97f;
}

.brand-cs_postpaid .coverage-link {
	background: linear-gradient(90deg, #662D91 0%, #2E3192 100%);
	border-radius: 8px;
}

.coverage-link a {
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	width: 80%;
	margin: 2% 0 2% 15%;
}

.brand-1010 .coverage-link a {
	color: #333333;
	font-weight: normal;
}

.brand-cs_postpaid .coverage-link a {
	color: #ffffff;
	font-weight: normal;
}

.coverage-link a:before {
	content: "";
	display: block;
	position: absolute;
	width: 10%;
	height: 80%;
	top: 10%;
	left: 2%;
	background-image: url(/abc_cms/wp-content/uploads/2022/07/tariff-csl-link-icon.png);
	background-position-x: left;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.brand-1010 .coverage-link a:before {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/tariff-1010-link-icon.png);
}

.brand-cs_postpaid .coverage-link a:before {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/tariff-cs-postpaid-link-icon.png);
}

.tariff-filter input {
	background: none;
	width: 96%;
	color: #333333;
	margin: 2%;
	border: none;
}

figure.wp-block-table {
	margin-left: 0;
	width: 100%;
	font-weight: bold;
}

.wp-block-table.country {
	display: none;
}

.wp-block-table.country.init {
	display: block;
}

.wp-block-table.country .filter-out {
	display: none !important;
}

.wp-block-table.country thead tr {
	display: none;
}

.wp-block-table.country.show thead tr,
.wp-block-table.country.single thead tr,
.wp-block-table.country thead tr:first-child {
	display: table-row;
}

figure.wp-block-table.country thead tr:first-child th:first-child {
	position: relative;
}

figure.wp-block-table.country thead tr:first-child th:first-child:after {
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	position: absolute;
	width: 4%;
	height: 30%;
	top: 35%;
	right: 3%;
}

figure.wp-block-table.country.show thead tr:first-child th:first-child:after {
	transform: rotate(180deg);
	right: 2.8%;
}

.brand-csl figure.wp-block-table.country thead tr:first-child th:first-child:after {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/tariff-arrow-csl.png);
}

.brand-1010 figure.wp-block-table.country thead tr:first-child th:first-child:after {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/tariff-arrow-1010.png);
}

.brand-cs_postpaid figure.wp-block-table.country thead tr:first-child th:first-child:after {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/arrow-cs-postpaid.png);
	background-size: contain;
}

figure.wp-block-table.country.single-country thead tr:first-child th:first-child:after {
	display: none;
}

.wp-block-table.country tbody {
	display: none;
}

.wp-block-table.country.show tbody,
.wp-block-table.country.single tbody {
	display: table-row-group;
}

.wp-block-table.country.single-country tbody {
	display: none !important;
}

.wp-block-table.country td {
	width: 50%;
}

.wp-block-table.country tfoot tr:last-child td {
	text-align: center;
}

.wp-block-table.country thead th code {
	color: #AAAAAA;
	border-radius: 5px;
	border: 1px solid #AAAAAA;
	float: left;
	padding: 5px;
	margin: 5px;
}

.brand-csl .wp-block-table.country thead th code {
	color: #000000;
	border-color: #000000;
}

.wp-block-table.country thead th code.on {
	color: #ffffff;
}

.brand-csl .wp-block-table.country thead th code.on {
	background-color: #faa61a;
}

.brand-1010 .wp-block-table.country thead th code.on {
	background-color: #ffdd00;
}

.brand-cs_postpaid .wp-block-table.country thead th code.on {
	background-color: #be81ef;
}

.wp-block-table.country tbody td code {
	display: none;
}

.wp-block-table.country tbody td.sub-filter-out {
	display: none;
}

.top-dest-button-group {
	width: 100%;
	margin-left: 1%;
}

.top-dest-button-group:after {
	content: "";
	display: block;
	width: 100%;
	clear: both;
}

.top-dest-button-group a {
	text-align: center;
	display: block;
	padding: 1%;
	margin: 2%;
	border: 1px solid;
	border-radius: 25px;
	float: left;
}

.brand-csl .top-dest-button-group a {
	border-color: #faa61a;
	color: #999999;
}

.brand-1010 .top-dest-button-group a {
	border-color: #cb9c57;
	color: #ffffff;
}

.brand-cs_postpaid .top-dest-button-group a {
	border-color: #be81ef;
	color: #333333;
}

.top-dest-button-group.button-full a {
	width: 87%;
}

.top-dest-button-group.button-1-3 a {
	width: 25%;
}

select.tariff-dest,
button.tariff-dest,
.tariff-dest.select-title {
	width: 95%;
	padding: 3%;
	margin: 0 auto;
	border-radius: 5px;
	position: relative;
}

select.tariff-dest {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.brand-csl select.tariff-dest {
	border: unset;
	padding: 15px;
	background: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png) no-repeat;
	background-size: 10px;
	background-position: 95% center;
	background-color: #f4f4f4;
}

.brand-csl select.tariff-dest:invalid {
	color: #b2b2b2;
}

.brand-csl select>option {
	color: #333333;
}

.brand-1010 select.tariff-dest {
	background: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png) no-repeat;
	background-size: 10px;
	background-position: 95% center;
	border-color: #30313B;
	padding: 15px;
	background-color: #eaeaea;
}

.brand-1010 select.tariff-dest:invalid {
	color: #848484;
}

.brand-1010 select>option {
	color: #333333;
}

.brand-cs_postpaid select.tariff-dest {
	background: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png) no-repeat;
	background-size: 10px;
	background-position: 95% center;
	border-color: #bbbcc7;
	padding: 15px;
}

.brand-cs_postpaid select.tariff-dest:invalid {
	color: #999999;
}

.brand-cs_postpaid select>option {
	color: #333333;
}

button.tariff-dest {
	border: none;
	margin-top: 10%;
	border-radius: 25px;
	padding: unset;
	font-weight: 400;
}

.brand-csl button.tariff-dest {
	background: #FAA61A;
	color: #ffffff;
}

.brand-1010 button.tariff-dest {
	background: linear-gradient(to bottom, #debb74, #efcd8a 38%, #daaf69 81%, #c8a061);
	color: #333;
}

.brand-cs_postpaid button.tariff-dest {
	background: linear-gradient(90deg, #662D91 0%, #2E3192 100%);
	color: #ffffff;
	padding: 3%;
	border-radius: 8px;
}

.tariff-dest.select-title {
	margin-bottom: 0;
	font-weight: bold;
}

.tariff-dest#name {
	margin-left: 3%;
}

.tariff-dest#voltage,
.tariff-dest#time_diff {
	margin: 1% 3% 1% 47%;
	width: 50%;
	display: block;
	text-align: right;
	font-weight: bold;
	position: relative;
}

.tariff-dest#voltage:before,
.tariff-dest#time_diff:before {
	display: block;
	position: absolute;
	left: -87%;
	text-align: left;
}

.en-us .tariff-dest#voltage:before {
	content: "Local Electric Voltage";
}

.zh-hk .tariff-dest#voltage:before {
	content: "當地電壓";
}

.en-us .tariff-dest#time_diff:before {
	content: "Time Difference with Hong Kong";
}

.zh-hk .tariff-dest#time_diff:before {
	content: "與香港的時差";
}

.en-us .tariff-dest#voltage:after {
	content: " volt(s)";
}

.zh-hk .tariff-dest#voltage:after {
	content: "伏特";
}

.en-us .tariff-dest#time_diff:after {
	content: " hour(s)";
}

.zh-hk .tariff-dest#time_diff:after {
	content: "小時";
}

table.tariff-dest {
	margin-bottom: 0;
	border-radius: 25px;
}

.brand-cs_postpaid table.tariff-dest {
	border-radius: 8px;
}

table.tariff-dest.data th,
table.tariff-dest.data td {
	padding: 10px 4px;
	font-size: 2.5vw;
	text-align: left;
}

table.tariff-dest.data td.operator {
	font-weight: bold;
}

.brand-csl table.tariff-dest.data thead tr:first-child th,
.brand-csl table.tariff-dest.data td.operator {
	color: #faa61a;
}

.brand-1010 table.tariff-dest.data thead tr:first-child th,
.brand-1010 table.tariff-dest.data td.operator {
	color: #cb9c57;
}

.brand-cs_postpaid table.tariff-dest.data thead tr:first-child th,
.brand-cs_postpaid table.tariff-dest.data td.operator {
	color: #be81ef;
}

.remark {
	font-size: 2.5vw;
}

.tariff-dest#last_update {
	margin: 5% 0;
	font-size: 2.5vw;
}

.gradient-bg {
	margin: -2vw;
	width: 100vw;
	margin-bottom: -50%;
	position: relative;
	z-index: -1;
}

.search {
	background-repeat: no-repeat;
	background-position: 98% 50%;
	background-color: white;
	background-size: auto 50%;
	border: #d7d7d7 solid 1px;
	border-radius: 6px;
	margin: 5% 0;
}

.brand-csl .search {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/search-csl.png);
}

.brand-1010 .search {
	background-image: url(/abc_cms/wp-content/uploads/2023/12/search-1010-v2.png);
}

.brand-cs_postpaid .search {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/search-cs-postpaid.png);
	box-shadow: 0px 2px 6px #cccccc;
	border: #e1e1e8 solid 1px;
}

#sidebar.app-entry-page {
	position: relative;
	left: 0;
	margin: 5%;
	width: 90%;
	border-radius: 8px;
	border: 1px solid #333333;
	font-size: 3.5vw;
}

#sidebar.app-entry-page>div {
	font-size: 4.3vw;
}

#sidebar.app-entry-page #sidebar-copyright,
#sidebar.app-entry-page #sidebar-lang {
	display: none;
}

.brand-cs_postpaid #sidebar.app-entry-page {
	border: 1px solid #ececec;
}

.coupon-left {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.coupon-left span {
	display: block;
	margin-bottom: 10px;
}

.coupon-left #clubsim,
.coupon-left #for-use {
	font-size: 5vw;
}

.coupon-left .number-of-coupon-left {
	font-size: 8vw;
	color: #FF7E32;
	font-weight: bold;
}

.activate-desc {
	margin-top: 10px;
	text-align: center;
	position: relative;
}

.activate-desc span {
	display: block;
	margin-bottom: 10px;
}

.activate-desc .stepOne a {
	color: #FF7E32;
}

.activate-desc .stepTwo a {
	color: #FF7E32;
}

#activate-button-container {
	position: fixed;
	bottom: 5%;
	width: 100%;
	right: 0;
}

.activate-button {
	text-align: center;
	display: flex;
	justify-content: center;
}

button#fup-reset-button.item-button {
	background: linear-gradient(90deg, #622E90 0%, #0E407B 100%);
	width: 90vw;
	height: 5.5vh;
	font-size: 4vw;
	border-radius: 5px;
	border: none;
	color: white;
}

#retry-button-container {
	position: fixed;
	bottom: 20%;
	width: 100%;
	right: 0;
}

.retry-button {
	text-align: center;
	display: flex;
	justify-content: center;
}

button#retry-button.item-button {
	background: #D3D3D3;
	width: 25vw;
	height: 6vh;
	font-size: 4vw;
	border-radius: 5px;
	border: none;
	color: black;
	font-weight: bold;
	margin: auto;
}

#refresh-button-container {
	bottom: 5vh;
	width: 100%;
	right: 0;
}

.refresh-button {
	text-align: center;
	display: flex;
	justify-content: center;
}

button#refresh-button.item-button {
	background: linear-gradient(90deg, #622E90 0%, #0E407B 100%);
	width: 90vw;
	height: 5.5vh;
	font-size: 4vw;
	border-radius: 5px;
	border: none;
	color: white;
}

.success-message-desc {
	margin-top: 10px;
	text-align: center;
}

.success-message-desc span {
	display: block;
	margin-bottom: 10px;
}

/* #notEligible span {
	display: block;
}
#notEligible {
	line-height: 5vw;
} */
.prev {
	animation-duration: 750ms;
	animation-name: prevSlide;
}

.next {
	animation-duration: 750ms;
	animation-name: nextSlide;
}

.prevCurr {
	animation-duration: 750ms;
	animation-name: prevCurrSlide;
}

.currNext {
	animation-duration: 750ms;
	animation-name: currNextSlide;
}

#dashboard_bg {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/dashboard_bg_csl.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.brand-csl #dashboard_bg {
	border-bottom-left-radius: 13vw;
}

.brand-1010 #dashboard_bg {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/dashboard_bg_1010.png);
}

.brand-cs_postpaid #dashboard_bg {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/dashboard_bg_cs_postpaid.png);
}

#mup_secondary_bg {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/mup_secondary_bg_csl.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.brand-csl #mup_secondary_bg {
	border-bottom-left-radius: 13vw;
}

.brand-1010 #mup_secondary_bg {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/mup_secondary_bg_1010.png);
}

.brand-cs_postpaid #mup_secondary_bg {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/mup_secondary_bg_cs_postpaid.png);
}

#dashboard_header {
	position: relative;
	margin: 0 -2vw;
}

#dashboard_msisdn {
	position: relative;
	padding-top: 15px;
	padding-bottom: 12vw;
	margin-left: 50%;
	display: flex;
	align-items: center;
	font-size: 4.9vw;
	font-weight: bold;
	white-space: nowrap;
	color: #fff;
	z-index: 99;
}

#dashboard_msisdn:not(.dropdown) {
	margin-left: 60%;
	padding-bottom: 5vw;
}

#dashboard_msisdn.dropdown::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	margin-left: 5vw;
}

.brand-1010 #dashboard_msisdn.dropdown::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #dashboard_msisdn.dropdown::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#dashboard_msisdn.dropdown.open::after {
	transform: rotate(180deg);
}

#dashboard_msisdn.dropdown .dropdown_content {
	position: absolute;
	top: 10vw;
	left: 0;
	background: #ffffff69;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 15px;
	color: white;
	display: none;
	padding: 1vw;
	margin: 1vw 0;
}

.brand-1010 #dashboard_msisdn.dropdown .dropdown_content {
	background: radial-gradient(circle at 100% -2.5vw, transparent 6vw, #585753ff 0px) top left,
		radial-gradient(circle at 0% -2.5vw, transparent 6vw, #585753ff 0px) top right,
		radial-gradient(circle at 100% 60%, transparent 2.5vw, #585753ff 0px) bottom right,
		radial-gradient(circle at 0% 60%, transparent 2.5vw, #585753ff 0px) bottom left;
}

#dashboard_msisdn.dropdown.open .dropdown_content {
	display: block;
}

#dashboard_msisdn.dropdown.open .dropdown_bg {
	position: fixed;
	background: #2b2b2b;
	opacity: 64%;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}

.brand-1010 #dashboard_msisdn.dropdown.open .dropdown_bg {
	background: #262522;
	opacity: 60%;
}

#dashboard_msisdn .num_86e,
#dashboard_msisdn .num_1c2n {
	display: flex;
	align-items: center;
	font-size: 3.4vw;
}

#dashboard_msisdn .num_1c2n::before {
	content: "";
	width: 4vw;
	height: 4vw;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_1c2n_csl.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0vw 1vw;
}

.brand-1010 #dashboard_msisdn .num_1c2n::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_1c2n_1010.png);
}

#dashboard_msisdn .num_86e::before {
	content: "";
	width: 4vw;
	height: 4vw;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_86e_csl.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0vw 1vw;
}

.brand-1010 #dashboard_msisdn .num_86e::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_86e_1010.png);
}

#activated_pass {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 6.5vw;
}

#activated_pass .location {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	max-width: 90%;
	padding-bottom: 5px;
	font-weight: bold;
	color: #fff;
	font-size: 4.5vw;
}

#activated_pass .location::before {
	content: "";
	width: 4vw;
	height: 4vw;
	display: block;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_location_csl.png);
	background-size: contain;
	background-repeat: no-repeat;
	padding-right: 1vw;
}

.brand-1010 #activated_pass .location::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_location_1010.png);
}

.brand-cs_postpaid #activated_pass .location::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_location_cs_postpaid.png);
}

#activated_pass .dashboard_pass {
	background: radial-gradient(circle at 100% -2.5vw, transparent 6vw, #ffffff69 0px) top left,
		radial-gradient(circle at 0% -2.5vw, transparent 6vw, #ffffff69 0px) top right,
		radial-gradient(circle at 100% 60%, transparent 2.5vw, #ffffff69 0px) bottom right,
		radial-gradient(circle at 0% 60%, transparent 2.5vw, #ffffff69 0px) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	border-radius: 5vw;
	padding: 4vw;
	width: 85%;
	color: white;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	margin: 10px 9px 0 9px;
}

.brand-1010 #activated_pass .dashboard_pass {
	background: radial-gradient(circle at 100% -2.5vw, transparent 6vw, #585753ff 0px) top left,
		radial-gradient(circle at 0% -2.5vw, transparent 6vw, #585753ff 0px) top right,
		radial-gradient(circle at 100% 60%, transparent 2.5vw, #585753ff 0px) bottom right,
		radial-gradient(circle at 0% 60%, transparent 2.5vw, #585753ff 0px) bottom left;
	background-size: 51% 50%;
	background-repeat: no-repeat;
}

.brand-cs_postpaid #activated_pass .dashboard_pass {
	border-radius: 2vw;
}

#activated_pass .dashboard_pass.nonABC .activatedDesc::before,
#activated_pass .dashboard_pass.nonABC .activatedVoiceDesc::before {
	content: none;
}

#activated_pass .dashboard_pass .activatedDesc,
#activated_pass .dashboard_pass .activatedVoiceDesc {
	text-align: center;
	padding-bottom: 2vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

#activated_pass .dashboard_pass .activatedVoiceDesc {
	display: none;
}

#activated_pass .dashboard_pass .activatedDesc span,
#activated_pass .dashboard_pass .activatedVoiceDesc span {
	max-width: 60%;
}

#activated_pass .dashboard_pass .activatedDesc span.zh-hk,
#activated_pass .dashboard_pass .activatedVoiceDesc span.zh-hk {
	max-width: none;
}

#activated_pass .dashboard_pass .activatedDesc::before,
#activated_pass .dashboard_pass .activatedVoiceDesc::before {
	content: "";
	width: 8vw;
	height: 8vw;
	background-image: url(/abc_cms/wp-content/uploads/2024/10/tick_cycle.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.brand-1010 #activated_pass .dashboard_pass .activatedDesc::before,
.brand-1010 #activated_pass .dashboard_pass .activatedVoiceDesc::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/tick_cycle_1010_1.png);
}

#activated_pass .dashboard_pass.fail .activatedDesc::before,
#activated_pass .dashboard_pass.fail .activatedVoiceDesc::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/warning_cycle_1010.png);
}

#activated_pass.retry .dashboard_pass .activatedDesc::before,
#activated_pass.retry .dashboard_pass .activatedVoiceDesc::before {
	content: unset;
}

#activated_pass .dashboard_pass .passCard {
	background: var(--tag-bg-color);
	border-radius: 5vw;
	color: #fff;
}

.brand-1010 #activated_pass .dashboard_pass .passCard {
	color: #333333;
}

.brand-cs_postpaid #activated_pass .dashboard_pass .passCard {
	border-radius: 2vw;
}

#activated_pass .dashboard_pass .passCard .passCard_title {
	text-align: center;
}

#activated_pass .dashboard_pass .passCard .passCard_using {
	text-align: center;
	padding: 5px 0;
}

#activated_pass .dashboard_pass .passCard .passCard_content {
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 5vw;
	color: #333;
	background-color: #fff;
	box-shadow: 0px 3px 15px rgb(0 0 0 / 35%);
}

.brand-cs_postpaid #activated_pass .dashboard_pass .passCard .passCard_content {
	border-radius: 8px;
}

#activated_pass .dashboard_pass.nonABC .passCard .passCard_content {
	border-radius: 2vw;
	line-height: 1.2;
	margin-top: 2vw;
	font-weight: 500;
}

#activated_pass.loading .dashboard_pass .passCard .passCard_content {
	background-image: linear-gradient(90deg, #636363 25%, #acacac 50%, #636363 75%);
	background-size: 500%;
	animation: loading 1.5s infinite running forwards;
	min-height: 50vw;
}

@keyframes loading {
	0% {
		background-position: right;
	}

	100% {
		background-position: left;
	}
}

#activated_pass.retry .dashboard_pass .passCard .passCard_content {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	cursor: pointer;
}

#activated_pass.retry .dashboard_pass .passCard .passCard_content::before {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/retry.png);
	width: 40px;
	height: 40px;
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
}

#activated_pass .dashboard_pass .passCard .passCard_content a {
	color: var(--tag-bg-color);
}

.brand-1010 #activated_pass .dashboard_pass .passCard .passCard_content a {
	color: #cb9c57;
}

.brand-1010 #activated_pass .dashboard_pass .passCard .passCard_content {
	color: white;
	background-color: #262522;
}

#activated_pass .dashboard_pass.BD .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_BD_bg_csl.png);
	background-color: unset;
	color: #fff;
}

#activated_pass .dashboard_pass.QP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_QP_bg_csl.png);
	background-color: unset;
	color: #fff;
}

#activated_pass .dashboard_pass.DP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_DP_bg_csl.png);
	background-color: unset;
	color: #fff;
}

#activated_pass .dashboard_pass.AP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_DP_bg_csl.png);
	background-color: unset;
	color: #fff;
}

.brand-1010 #activated_pass .dashboard_pass.BD .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_BD_bg_1010.png);
	background-color: unset;
}

.brand-1010 #activated_pass .dashboard_pass.QP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_QP_bg_1010.png);
	background-color: unset;
}

.brand-1010 #activated_pass .dashboard_pass.DP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_DP_bg_1010.png);
	background-color: unset;
}

.brand-1010 #activated_pass .dashboard_pass.AP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_DP_bg_1010.png);
	background-color: unset;
}

.brand-cs_postpaid #activated_pass .dashboard_pass.BD .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_BD_bg_cs_postpaid.png);
	background-color: unset;
	color: #fff;
}

.brand-cs_postpaid #activated_pass .dashboard_pass.QP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_QP_bg_cs_postpaid.png);
	background-color: unset;
	color: #fff;
}

.brand-cs_postpaid #activated_pass .dashboard_pass.DP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_DP_bg_cs_postpaid.png);
	background-color: unset;
	color: #fff;
}

.brand-cs_postpaid #activated_pass .dashboard_pass.AP .passCard .passCard_content {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_DP_bg_cs_postpaid.png);
	background-color: unset;
	color: #fff;
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item {
	display: flex;
	padding: 3vw;
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item .content_item_left {
	width: 75%;
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item .content_item_left_name {
	display: flex;
	color: var(--tag-bg-color);
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item .content_item_left_name::before {
	content: "";
	width: 8vw;
	height: 8vw;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 1vw;
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.BD .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_bonusData_csl.png);
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.QP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_volumePass_csl.png);
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.DP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_dayPass_csl.png);
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.AP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_aircraftPass_csl.png);
}

.brand-1010 #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.BD .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_bonusData_1010.png);
}

.brand-1010 #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.QP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_volumePass_1010.png);
}

.brand-1010 #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.DP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_dayPass_1010.png);
}

.brand-1010 #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.AP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_aircraftPass_1010.png);
}

.brand-cs_postpaid #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.BD .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_bonusData_cs_postpaid.png);
}

.brand-cs_postpaid #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.QP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_volumePass_cs_postpaid.png);
}

.brand-cs_postpaid #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.DP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_dayPass_cs_postpaid.png);
}

.brand-cs_postpaid #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item.AP .content_item_left_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_aircraftPass_cs_postpaid.png);
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item .content_item_left .item_img {
	margin-right: 2vw;
	width: 6vw;
	height: 6vw;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tag-bg-color);
	border-radius: 40%;
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item .content_item_left .item_img img {
	width: 75%;
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item .content_item_left .item_expiry {
	background-color: #f4f4f4;
	width: fit-content;
	padding: 5px;
	margin-top: 5px;
	border-radius: 21px;
	font-size: 3vw;
}

.brand-1010 #activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item .content_item_left .item_expiry {
	background-color: rgb(255 255 255 / 16%);
}

#activated_pass .dashboard_pass .passCard .passCard_content .passCard_content_item .content_item_avaliable span>span:last-child {
	font-weight: 500;

}

#activated_pass .dashboard_pass .passCard .content_header {
	display: flex;
	justify-content: space-between;
}

#activated_pass .dashboard_pass .passCard .content_header .content_header_title {
	padding: 2vw 0 0 5vw;
	display: flex;
	align-items: center;
	font-weight: bold;
	line-height: 1.2;
	text-shadow: 0px 3px 6px #666666;
	width: 70%;
}

#activated_pass .dashboard_pass .passCard .content_header .content_header_title span {
	max-width: 70%;
}

.beforeImg::before {
	content: "";
	width: 8vw;
	height: 8vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	margin-right: 2vw;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_dayPass_1010.png);
}

.beforeImg.larger::before {
	width: 11vw;
	height: 11vw;
}

.BD .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_bonusData_csl.png);
}

.QP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_volumePass_csl.png);
}

.DP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_dayPass_csl.png);
}

.AP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_aircraftPass_csl.png);
}

.brand-1010 .BD .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_bonusData_1010.png);
}

.brand-1010 .QP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_volumePass_1010.png);
}

.brand-1010 .DP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_dayPass_1010.png);
}

.brand-1010 .AP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_aircraftPass_1010.png);
}

.brand-cs_postpaid .BD .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_bonusData_cs_postpaid.png);
}

.brand-cs_postpaid .QP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_volumePass_cs_postpaid.png);
}

.brand-cs_postpaid .DP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_dayPass_cs_postpaid.png);
}

.brand-cs_postpaid .AP .beforeImg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_aircraftPass_cs_postpaid.png);
}

#activated_pass .dashboard_pass .passCard .content_header .inUse {
	background-color: #ffffff29;
	border-radius: 0 5vw;
	padding: 1vw 2vw;
	font-size: 2.5vw;
	height: fit-content;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

#activated_pass .dashboard_pass .passCard .content_header .inUse::before {
	content: "";
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	background: #32ba38;
	margin-right: 1vw;
}

#activated_pass .dashboard_pass .passCard .passCard_content .content_detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5vw;
}

#activated_pass .dashboard_pass .passCard .detail_content .detail_remain,
#activated_pass .dashboard_pass .passCard .detail_content .detail_remain_pass {
	font-weight: bold;
	font-size: 5vw;
}

#activated_pass .dashboard_pass .passCard .detail_content .detail_remain_pass {
	padding-bottom: 3.5vw;
}

#activated_pass .dashboard_pass .passCard .detail_content .detail_expiry {
	background: rgb(255 255 255 / 16%);
	padding: 5px;
	border-radius: 21px;
	font-size: 3vw;
	width: fit-content;
	white-space: nowrap;
}

#activated_pass .dashboard_pass .passCard .passCard_content .detailProgress {
	width: 40%;
}

#activated_pass .dashboard_pass .passCard .passCard_content .progressBar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#activated_pass .dashboard_pass .passCard .passCard_content .progressBar circle:last-child {
	stroke: var(--tag-bg-color);
	stroke-dashoffset: calc(6.28 * (100 - var(--num)));
}

#activated_pass .dashboard_pass .passCard .passCard_content .progressBar .progressDot {
	position: absolute;
	inset: 0;
	z-index: 10;
	animation: animateDot linear forwards;
}

#activated_pass .dashboard_pass .passCard .passCard_content .progressBar .progressDot::before {
	content: '';
	position: absolute;
	top: 5%;
	left: 45%;
	width: 10%;
	height: 10%;
	background: white;
	border-radius: 50%;
}

.brand-1010 #activated_pass .dashboard_pass .passCard .passCard_content .progressBar .progressDot::before {
	background: #646464;
	box-shadow: 0px 3px 6px #646464;
}

#activated_pass .dashboard_pass .passCard .passCard_content .progressBar .progress_text {
	position: absolute;
	text-align: center;
	font-size: 5vw;
	line-height: 1;
}

#activated_pass .dashboard_pass .passCard .passCard_content .progressBar .progress_text span {
	font-size: 2.5vw;
}

#activated_pass .dashboard_pass .passCard .passCard_content .progressBar .progress_text .zero span {
	width: 45%;
	display: inline-block;
}

#activated_pass .dashboard_pass .passCard .passCard_remark {
	text-align: right;
	padding: 5px 10px;
	font-size: 2.5vw;
}

#activated_pass .dashboard_pass.nothing .passCard .passCard_content {
	background-color: #8b8b8b;
	color: #fff;
	height: 45vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.brand-1010 #activated_pass .dashboard_pass.nothing .passCard .passCard_content {
	background-color: #4e4e4e;
}

#activated_pass .dashboard_pass.nothing .passCard .passCard_content img {
	width: 12vw;
	padding-bottom: 1vw;
}

#activated_pass .routeBtn {
	background-color: #f3fff2;
	border-radius: 3vw;
	margin-top: 2vw;
	padding: 2vw 10px;
}

#activated_pass .fail .routeBtn,
#activated_pass .fail.routeBtn {
	background-color: #fff6f4;
	border: 1px solid #f5BDB2;
	color: #f2593c;
}

#activated_pass .routeBtn.success {
	background-color: #f3fff2;
	border: 2px solid #94d989;
	color: #94d989;
}

#activated_pass .dashboard_pass .routeBtn_bg {
	display: flex;
	padding-bottom: 1vw;
}

#activated_pass .dashboard_pass .routeBtn_bg::before {
	content: "";
	width: 8vw;
	height: 5vw;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 1vw;
}

#activated_pass .dashboard_pass.fail .routeBtn_bg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/warning_cycle_1010.png);
}

#activated_pass .routeBtn.fail .routeBtn_bg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/warning_cycle_1010.png);
}

#activated_pass .dashboard_pass .routeBtn.success .routeBtn_bg::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/tick_1010.png);
}

#activated_pass .routeBtn .routeBtn_content {
	background-color: white;
	border-radius: 3vw;
	box-shadow: 0 0 3px #00000038;
	padding: 3vw;
	color: black;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
}

#activated_pass .routeBtn .routeBtn_content:nth-of-type(n+3) {
	margin-top: 10px;
}

#activated_pass .routeBtn .routeBtn_content::after {
	content: "";
	width: 11vw;
	height: 8vw;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_csl.png);
}

.brand-1010 #activated_pass .routeBtn .routeBtn_content::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_1010.png);
}

.brand-cs_postpaid #activated_pass .routeBtn .routeBtn_content::after {
	width: 5vw;
	height: 5vw;
	background-size: contain;
	background-image: url(/abc_cms/wp-content/uploads/2024/08/dashboard_redirect_cs_postpaid.png);
}

#activated_pass .routePurchase {
	font-size: 12px;
	font-weight: bold;
}

#activated_pass .activate_other_pass {
	font-size: 12px;
	background: unset;
	border-radius: 5vw;
	border: 1px solid white;
	padding: 1vw 5vw;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#activated_pass .activate_other_pass::after {
	content: "";
	width: 10vw;
	height: 8vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	background-image: url(/abc_cms/wp-content/uploads/2019/11/arrow_icon.png);
}

#activated_pass .routePurchase,
#activated_pass .activate_pass,
#activated_pass .routeRoaming {
	border-radius: 5vw;
	background-color: #efefef;
	padding: 5vw;
	color: black;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand-1010 #activated_pass .routePurchase,
.brand-1010 #activated_pass .activate_pass,
.brand-1010 #activated_pass .routeRoaming {
	background-color: #eaeaea;
}

.brand-cs_postpaid #activated_pass .routePurchase,
.brand-cs_postpaid #activated_pass .activate_pass,
.brand-cs_postpaid #activated_pass .routeRoaming {
	border-radius: 8px;
}

#activated_pass .routePurchase::after,
#activated_pass .activate_pass::after,
#activated_pass .routeRoaming::after {
	content: "";
	width: 10vw;
	height: 8vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_csl.png);
}

.brand-1010 #activated_pass .routePurchase::after,
.brand-1010 #activated_pass .activate_pass::after,
.brand-1010 #activated_pass .routeRoaming::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_1010.png);
}

.brand-cs_postpaid #activated_pass .routePurchase::after,
.brand-cs_postpaid #activated_pass .activate_pass::after,
.brand-cs_postpaid #activated_pass .routeRoaming::after {
	background-image: unset;
}

.dashaboard_content_header {
	margin-bottom: 4vw;
}

.brand-1010 .dashaboard_content_header {
	background: #262522;
	border-top-left-radius: 5vw;
}

#dashboard_tabs {
	display: flex;
	margin: 0vw -2vw -2vw -2vw;
	padding: 3vw 2vw;
	color: black;
	background: #EFEFEF;
	font-size: 4.2vw;
	height: 13vw;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
}

#dashboard_tabs::-webkit-scrollbar {
	display: none;
}

.brand-1010 #dashboard_tabs {
	background: #262522;
	color: white;
}

#dashboard_tabs .tab {
	padding: 1vw 2vw;
	position: relative;
}

#dashboard_tabs.sticky {
	position: sticky;
	z-index: 10;
	top: 0;
}

#dashboard_tabs.sticky .tab {
	color: #b2b2b2;
}

.brand-cs_postpaid #dashboard_tabs.sticky .tab {
	color: #82838C;
}

#dashboard_tabs .tab.active {
	color: var(--tag-bg-color);
	font-weight: 500;
}

.brand-csl #dashboard_tabs .tab.active {
	color: #333333;
}

.brand-cs_postpaid #dashboard_tabs .tab.active {
	color: #0B417B;
}

#dashboard_tabs .tab.active::after {
	content: "";
	width: 8px;
	height: 8px;
	background-color: var(--tag-bg-color);
	border-radius: 50%;
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
}

.brand-csl #dashboard_tabs .tab.active::after {
	width: 50%;
	height: 4px;
	border-radius: 5vw;
}

.brand-cs_postpaid #dashboard_tabs .tab.active::after {
	width: 50%;
	height: 4px;
	border-radius: 5vw;
	background-color: #0B417B;
}

#mup_content {
	background: #fff;
	margin: 0 2vw 5vw 2vw;
	padding: 6.5vw 16px 7.5vw 16px;
	display: none;
	color: black;
}

.brand-csl #mup_content {
	border-radius: 25px;
}

.brand-1010 #mup_content {
	background: rgb(62 62 59/60%);
	color: white;
	border-radius: 5vw 0 0 5vw;
	margin: 0 -2vw 5vw -2vw;
	padding: 6.5vw 5vw 7.5vw 5vw;
}

.brand-cs_postpaid #mup_content {
	border-radius: 8px;
}

#mup_content .avaStyle span:nth-child(n+3),
#roaming_data_content .avaStyle span:nth-child(n+3) {
	font-weight: bold;
	font-size: 3.7vw;
}

#mup_content .avaStyle span:nth-child(-n+3),
#roaming_data_content .avaStyle span:nth-child(-n+3) {
	font-size: 3.2vw;
}

#mup_content .mup_title {
	font-size: 4.8vw;
	font-weight: bold;
	padding-bottom: 20px;
}

.brand-1010 #mup_content .mup_title {
	color: #f2c97f;
}

#mup_content .member_detail {
	padding-bottom: 2vw;
	border-bottom: 1px solid #909090;
}

.brand-1010 {
	border-bottom: 1px solid #909090;
}

#mup_content .member_detail .member_title {
	display: flex;
	padding-bottom: 2vw;
	font-size: 3.7vw;
	font-weight: 500;
	color: var(--tag-bg-color);
}

.brand-1010 #mup_content .member_detail .member_title {
	color: #cb9c57;
}

#mup_content .member_detail .member_title::before {
	content: "";
	width: 8vw;
	height: 8vw;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_member_csl.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 2vw;
}

.brand-1010 #mup_content .member_detail .member_title::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_member_1010.png);
}

.brand-cs_postpaid #mup_content .member_detail .member_title::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_member_cs_postpaid.png);
}

#mup_content .member_list {
	display: flex;
	flex-wrap: wrap;
}

#mup_content .member_list .member {
	width: calc(50% - 8.4vw);
	height: 10vw;
	border-radius: 5vw;
	background: #f4f4f4;
	color: black;
	padding: 4.7vw 3.1vw;
	margin: 2vw 0;
	font-size: 4vw;
	line-height: 1;
}

.brand-1010 #mup_content .member_list .member {
	background: #eaeaea;
}

#mup_content .member_list .member:not(.Primary) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
}

.brand-cs_postpaid #mup_content .member_list .member:not(.Primary) {
	height: 15.2vw;
	border-radius: 2vw;
	justify-content: center;
	background-image: linear-gradient(to right, #662d91 8%, #632e90 10%, #09417a);
	padding: 0 2vw;
	color: #fff;
}

#mup_content .member_list .member:not(.Primary)::after {
	content: "";
	width: 10vw;
	height: 7vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_csl.png);
}

.brand-cs_postpaid #mup_content .member_list .member:not(.Primary)::after {
	content: unset;
}

.brand-1010 #mup_content .member_list .member:not(.Primary)::after {
	width: 8vw;
	height: 7vw;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_1010.png);
}

#mup_content .member_list .member:not(.Primary):nth-child(odd) {
	margin-right: 3vw;
}

#mup_content .member_list .member.Primary {
	width: 100%;
	white-space: pre-wrap;
	font-weight: bold;
}

#mup_content .member_list .member.Primary span {
	font-size: 2.5vw;
	font-weight: 500;
}

#mup_content .member_pass {
	padding: 2vw 0;
}

#mup_content .member_pass .pass_toggle {
	display: flex;
	align-items: start;
}

#mup_content .member_pass .pass_toggle_left {
	width: 75%;
}

#mup_content .member_pass .pass_toggle_right {
	width: 25%;
}

#mup_content .member_pass .pass_toggle_right .activate_btn {
	background: var(--btn-bg-color);
	color: var(--btn-text-color);
	width: 60%;
	height: fit-content;
	text-align: center;
	border-radius: 20px;
	padding: 5px;
	font-size: 3vw;
}

#mup_content .member_pass .pass_toggle_right .activate_btn.disabled {
	opacity: 0.6;
}

#mup_content .member_pass .pass_toggle .pass_toggle_header {
	display: flex;
}

#mup_content .member_pass .pass_toggle .pass_toggle_name {
	color: var(--tag-bg-color);
	font-weight: 500;
	font-size: 3.7vw;
	font-weight: 500;
}

.brand-1010 #mup_content .member_pass .pass_toggle .pass_toggle_name {
	color: #cb9c57;
}

#mup_content .member_pass .pass_expiry {
	background-color: #f4f4f4;
	width: fit-content;
	padding: 3px 10px;
	margin-top: 5px;
	border-radius: 21px;
	font-size: 3.4vw;
}

.brand-1010 #mup_content .member_pass .pass_expiry {
	background-color: rgb(255 255 255/16%);
}

#mup_content .member_pass.open .pass_expiry {
	display: none;
}

#mup_content .member_pass .pass_toggle .pass_no_of_pass {
	width: 100%;
	display: flex;
}

#mup_content .member_pass .pass_toggle .pass_no_of_pass div {
	width: 80%;
}

#mup_content .member_pass .pass_toggle .pass_no_of_pass::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #mup_content .member_pass .pass_toggle .pass_no_of_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #mup_content .member_pass .pass_toggle .pass_no_of_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#mup_content .member_pass.open .pass_toggle .pass_no_of_pass::after {
	transform: rotate(180deg);
}

#mup_content .member_pass .pass_menu {
	display: none;
}

#mup_content .member_pass.open .pass_menu {
	display: block;
	background: #f4f4f4;
	margin: 2vw -16px;
	padding: 0vw 16px;
	border-radius: 20px 0 0 20px;
}

.brand-1010 #mup_content .member_pass.open .pass_menu {
	background: #333333;
	margin: 2vw -5vw;
	padding: 0vw 5vw;
}

#mup_content .member_pass .pass_menu .pass_item {
	display: flex;
	padding: 10px 0;
}

#mup_content .member_pass .pass_menu .pass_item .item_detail {
	width: 75%;
}

#mup_content .member_pass .pass_menu .pass_item .item_detail .pass_item_expiry {
	background-color: #fff;
	width: fit-content;
	padding: 3px 10px;
	margin-top: 5px;
	border-radius: 21px;
	font-size: 3.4vw;
}

.brand-1010 #mup_content .member_pass .pass_menu .pass_item .item_detail .pass_item_expiry {
	background-color: rgb(255 255 255 / 16%);
}

#mup_content .member_pass .pass_menu .pass_item .item_detail .item_name {
	font-weight: bold;
}

#mup_content .member_pass .pass_menu .pass_item .item_num_of_pass {
	width: 25%;
}

#mup_content .member_setting {
	display: flex;
	justify-content: space-between;
	padding: 2vw 0;
}

#mup_content .member_setting .member_tnc {
	width: 70%;
	line-height: 1.2;
}

#mup_content .member_setting .member_tnc a {
	color: var(--tag-bg-color);
}

.brand-1010 #mup_content .member_setting .member_tnc a {
	color: #cb9c57;
}

.brand-cs_postpaid #mup_content .member_setting .member_tnc a {
	color: #09417A;
}

#mup_content .member_setting .member_switch {
	width: 16vw;
	height: 8vw;
	background: #ccc;
	border-radius: 50px;
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-right: 3vw;
}

.brand-cs_postpaid #mup_content .member_setting .member_switch {
	height: 5vw;
	background: #82838c;
	margin-top: 3vw;
}

#mup_content .member_setting .member_switch::before {
	position: absolute;
	height: 6vw;
	width: 6vw;
	background: white;
	content: "";
	border-radius: 50%;
	left: calc(0% + 1vw);
	transition: all 0.5s;
}

.brand-cs_postpaid #mup_content .member_setting .member_switch::before {
	left: calc(0% - 4vw);
	width: 8vw;
	height: 8vw;
	box-shadow: 0 0 1px 10px #80808030;
	background: #bbbcc7;
}

#mup_content .member_setting.on .member_switch {
	background: var(--tag-bg-color);
}

#mup_content .member_setting.on .member_switch::before {
	left: calc(100% - 7vw);
	background: white;
}

.brand-cs_postpaid #mup_content .member_setting.on .member_switch {
	background: #946cb2;
}

.brand-1010 #mup_content .member_setting.on .member_switch::before {
	background: #262522;
}

.brand-cs_postpaid #mup_content .member_setting.on .member_switch::before {
	left: calc(100% - 5vw);
	background: #be81ef;
	box-shadow: 0 0 1px 10px #be81ef36;
}

#roaming_data_content {
	background-color: #fff;
	margin: 0 2vw 5vw 2vw;
	padding: 6.5vw 16px 7.5vw 16px;
	color: black;
}

.brand-csl #roaming_data_content {
	border-radius: 25px;
}

.brand-1010 #roaming_data_content {
	background-color: #3e3e3b;
	color: white;
	border-radius: 5vw 0 0 5vw;
	margin: 0 -2vw 5vw -2vw;
	padding: 6.5vw 5vw 7.5vw 5vw;
}

.brand-cs_postpaid #roaming_data_content {
	border-radius: 8px;
}

#roaming_data_content .activate_btn {
	background: var(--btn-bg-color);
	color: var(--btn-text-color);
	width: 15%;
	height: fit-content;
	text-align: center;
	border-radius: 20px;
	padding: 5px;
	font-size: 3vw;
}

#roaming_data_content .activate_btn.disabled {
	opacity: 0.6;
}

#roaming_data_content .roaming_title {
	font-size: 4.8vw;
	font-weight: bold;
}

.brand-1010 #roaming_data_content .roaming_title {
	color: #f2c97f;
}

#roaming_data_content .roaming_search {
	background-color: #f4f4f4;
	border-radius: 3vw;
	display: flex;
	align-items: center;
	padding: 2vw;
	justify-content: space-between;
	margin-top: 2vw;
}

.brand-1010 #roaming_data_content .roaming_search {
	background-color: #eaeaea;
}

.brand-cs_postpaid #roaming_data_content .roaming_search {
	border-radius: 8px;
}

#roaming_data_content .roaming_search::after {
	content: "";
	display: block;
	width: 4vw;
	height: 4vw;
	background-image: url(/abc_cms/wp-content/uploads/2021/12/search-csl.png);
	background-size: cover;
	background-repeat: no-repeat;
}

.brand-1010 #roaming_data_content .roaming_search::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/search_icon_1010.png);
}

.brand-cs_postpaid #roaming_data_content .roaming_search::after {
	background-image: url(/abc_cms/wp-content/uploads/2021/12/search-cs-postpaid.png);
}

#roaming_data_content .roaming_search input {
	width: 90%;
	height: 7vw;
	font-size: 3vw;
	border: none;
	border-radius: inherit;
	padding: 1vw;
	background-color: transparent;
}

#roaming_data_content .roaming_search input::placeholder {
	color: #b2b2b2;
}

#roaming_data_content .roaming_content {
	padding-top: 20px;
}

#roaming_data_content .roaming_content.nothing {
	height: 29vw;
	border-radius: 3vw;
	background-color: #8b8b8b;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 3vw 0;
}

.brand-1010 #roaming_data_content .roaming_content.nothing {
	background-color: #383838;
}

#roaming_data_content .roaming_content.nothing::before {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_nothing_csl.png);
	display: block;
	height: 7vw;
	width: 30vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.brand-1010 #roaming_data_content .roaming_content.nothing::before {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_nothing_1010.png);
}

#roaming_data_content .roaming_content .roaming_item {
	padding: 3.5vw 0;
}

#roaming_data_content .roaming_content .roaming_item .expiryBox {
	background-color: #fff;
	width: fit-content;
	padding: 3px 10px;
	margin-top: 5px;
	border-radius: 21px;
	font-size: 3.4vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .expiryBox {
	background-color: rgb(255 255 255 / 16%);
}

#roaming_data_content .roaming_content .roaming_item .styleBox {
	font-size: 10px;
	font-weight: 500;
	border-radius: 5.5vw;
	width: fit-content;
	height: fit-content;
	background-color: #fff;
	padding: 1vw 5px 1vw 7px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	white-space: nowrap;
	margin-bottom: 1vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .styleBox {
	background-color: rgb(255 255 255 / 16%);
}

#roaming_data_content .roaming_content .roaming_item .styleBox::before {
	content: "";
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	background-color: white;
	margin-right: 1vw;
}

#roaming_data_content .roaming_content .roaming_item .styleBox.active::before {
	background-color: var(--tag-bg-color);
}

#roaming_data_content .roaming_content .roaming_item .styleBox.inUse::before {
	background-color: #32ba38;
}

#roaming_data_content .roaming_content .roaming_item .type_toggle {
	display: flex;
	align-items: start;
}

#roaming_data_content .roaming_content .roaming_item .type_toggle .type_toggle_left {
	width: 75%;
}

#roaming_data_content .roaming_content .roaming_item .type_toggle .type_toggle_left .type_toggle_name {
	display: flex;
	color: var(--tag-bg-color);
	font-size: 3.7vw;
	font-weight: 500;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_toggle .type_toggle_left .type_toggle_name {
	color: #cb9c57;
}

#roaming_data_content .roaming_content .roaming_item .type_toggle .type_toggle_left .earliest_expiry {
	background-color: #f4f4f4;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_toggle .type_toggle_left .earliest_expiry {
	background-color: rgb(255 255 255 / 16%);
}

#roaming_data_content .roaming_content .roaming_item.open .type_toggle .type_toggle_left .earliest_expiry {
	display: none;
}

#roaming_data_content .roaming_content .roaming_item .type_toggle .type_pass {
	width: 25%;
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item .type_toggle .type_pass div {
	width: 80%;
}

#roaming_data_content .roaming_content .roaming_item .type_toggle .type_pass span {
	white-space: nowrap;
}

#roaming_data_content .roaming_content .roaming_item .type_toggle .type_pass::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_toggle .type_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #roaming_data_content .roaming_content .roaming_item .type_toggle .type_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#roaming_data_content .roaming_content .roaming_item.open .type_toggle .type_pass::after {
	transform: rotate(180deg);
}

#roaming_data_content .roaming_content .roaming_item .type_menu {
	display: none;
	padding: 0px 16px;
	margin: 3vw -16px 0 -16px;
	background: #f4f4f4;
	border-radius: 5vw 0 0 5vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_menu {
	background: #333333;
	padding: 0px 5vw;
	margin: 3vw -5vw 0 -5vw;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu {
	display: block;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item {
	padding: 2vw 0;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_toggle {
	display: flex;
	padding-bottom: 2vw;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_toggle_left {
	width: 75%;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_toggle_left .group_item_name {
	width: 100%;
	font-size: 14px;
	font-weight: 500;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item.open .group_item_toggle_left .group_expiry {
	display: none;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_toggle_avaliable {
	display: flex;
	width: 25%;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_toggle_avaliable div {
	width: 80%;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_toggle_avaliable::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_toggle_avaliable::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_toggle_avaliable::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item.open .group_item_toggle_avaliable::after {
	transform: rotate(180deg);
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_menu {
	display: none;
	background-color: #e3e3e3;
	margin: 2vw -16px;
	padding: 2vw 16px;
	border-radius: 5vw 0 0 5vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_menu {
	background-color: #1d1d1d;
	margin: 2vw -5vw;
	padding: 2vw 5vw;
}

.brand-cs_postpaid #roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_menu {
	background-color: #e1e1e8;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .group_item_menu .order_item:not(:first-child) {
	margin-top: 3vw;
	padding-top: 3vw;
	border-top: 1px solid;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .group_item.open .group_item_menu {
	display: block;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .order_header {
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .order_name {
	width: 75%;
	font-size: 14px;
	font-weight: 500;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .order_name span {
	width: 80%;
	display: inline-block;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .order_footer {
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item.open .type_menu .order_end {
	width: 75%;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone {
	padding: 2vw 0;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_toggle {
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_toggle .type_zone_left {
	width: 75%;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_toggle .type_zone_left .type_zone_name {
	width: 80%;
	font-size: 14px;
	font-weight: 500;
}

#roaming_data_content .roaming_content .dest_style {
	font-size: 3vw;
	color: #cb8a1e;
	line-height: 1.2;
}

.brand-1010 #roaming_data_content .roaming_content .dest_style {
	color: #cb9c57;
}

.brand-cs_postpaid #roaming_data_content .roaming_content .dest_style {
	color: #0b417b;
}

#roaming_data_content .roaming_content .dest_style::after {
	display: block;
	align-content: center;
	border: 1px solid;
	border-radius: 5vw;
	width: 13vw;
	height: 5vw;
	padding: 0vw 3vw;
	margin: 1vw 0;
	font-weight: bold;
	background-size: auto 10%;
	background-repeat: no-repeat;
	background-position: 85%;
}

#roaming_data_content .roaming_content .dest_style.collapse::after {
	background-size: auto 50%;
	background-repeat: no-repeat;
	background-position: 85%;
}

.en-us #roaming_data_content .roaming_content .dest_style.expand::after {
	content: "Less";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/less_icon_csl.png);
}

.zh-hk #roaming_data_content .roaming_content .dest_style.expand::after {
	content: "收起";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/less_icon_csl.png);
}

.en-us #roaming_data_content .roaming_content .dest_style.collapse::after {
	content: "Detail";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/add_icon_csl.png);
}

.zh-hk #roaming_data_content .roaming_content .dest_style.collapse::after {
	width: 15vw;
	content: "更多詳情";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/add_icon_csl.png);
}

.brand-1010 #roaming_data_content .roaming_content .dest_style.expand::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/less_icon_1010.png);
}

.brand-1010 #roaming_data_content .roaming_content .dest_style.collapse::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/add_icon_1010.png);
}

.brand-cs_postpaid #roaming_data_content .roaming_content .dest_style.expand::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/less_icon_cs_postpaid.png);
}

.brand-cs_postpaid #roaming_data_content .roaming_content .dest_style.collapse::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/add_icon_cs_postpaid.png);
}

#roaming_data_content .roaming_content .dest_style>span {
	overflow: hidden;
	display: block;
}

#roaming_data_content .roaming_content .dest_style.collapse>span {
	height: 1.2em;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(to bottom, #cb8a1e, #a7803f 65%, rgba(44, 43, 41, 0.5));
}

.brand-1010 #roaming_data_content .roaming_content .dest_style.collapse>span {
	background-image: linear-gradient(to bottom, #cb9c57, #a38a64 59%, #404040);
}

.brand-cs_postpaid #roaming_data_content .roaming_content .dest_style.collapse>span {
	background-image: linear-gradient(to bottom, #0b417b, #203d5c 60%, rgba(106, 106, 106, 0.3));
}

#roaming_data_content .roaming_content .dest_style.expand>span {
	height: auto;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_toggle .type_zone_pass {
	display: flex;
	width: 25%
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_toggle .type_zone_pass div {
	width: 80%;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_toggle .type_zone_pass::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_toggle .type_zone_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_toggle .type_zone_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu {
	display: none;
	background-color: #e3e3e3;
	margin: 3vw -16px;
	padding: 4vw 16px;
	border-radius: 5vw 0 0 5vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu {
	background-color: #1d1d1d;
	margin: 3vw -5vw;
	padding: 4vw 5vw;
}

.brand-cs_postpaid #roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu {
	background-color: #e1e1e8;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu .name_order_item_active {
	display: flex;
	align-items: center;
	padding: 2vw 0;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu .name_order_item_active .active_expiry {
	width: 75%;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu .name_order_item_active .active_expiry span {
	background-color: #f4f4f4;
	width: fit-content;
	padding: 5px;
	margin-top: 5px;
	border-radius: 21px;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu .name_order_item_active .active_expiry span {
	background-color: rgb(255 255 255 / 16%);
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu .name_order_item {
	padding: 2vw 0;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu .name_order_item_active~.name_order_item:first-child {
	border-top: 1px solid;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu .name_order_item:not(:first-child) {
	border-top: 1px solid #ccc;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_menu .name_order_item:not(:first-child) {
	border-top: 1px solid #909090;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_toggle .type_zone_pass::after {
	transform: rotate(180deg);
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .type_zone_expiry {
	padding-bottom: 3vw;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_expiry {
	display: none;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_menu {
	display: block;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_menu .name_order_header {
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_menu .name_order_header .name_order_name {
	width: 75%;
	font-size: 14px;
	font-weight: 500;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_menu .name_order_header .name_order_name span {
	width: 80%;
	display: block;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_menu .order_expiry_group_toggle {
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_menu .order_expiry_group_toggle .order_expiry {
	width: 75%;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone.open .type_zone_menu .name_order_item.open .order_expiry_group_toggle .order_expiry>div {
	display: none;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .order_pass {
	width: 25%;
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .order_pass div:first-child {
	width: 80%;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .order_pass::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .order_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .order_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .name_order_item.noMenu .order_pass::after {
	content: unset;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .name_order_item.open .order_pass::after {
	transform: rotate(180deg);
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .name_order_item .order_expiry_group_menu {
	display: none;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .name_order_item.open .order_expiry_group_menu {
	display: block;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .name_order_item .expiry_order_item {
	padding-top: 2vw;
	display: flex;
	align-items: center;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .name_order_item .order_expiry_group_menu {
	padding: 2vw 0;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .type_zone .name_order_item .expiry_order_item .expiry_order_expiry {
	width: 75%;

}

#roaming_data_content .roaming_content .roaming_item .type_menu .name_order {
	padding: 3vw 0;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .name_order:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .type_menu .name_order:not(:last-child) {
	border-bottom: 1px solid #909090;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .name_order .name_order_header {
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .name_order .name_order_header .name_order_name {
	width: 75%;
	font-size: 14px;
	font-weight: 500;
}

#roaming_data_content .roaming_content .roaming_item .type_menu .name_order .name_order_header .name_order_name span {
	width: 80%;
	display: block;
}

#roaming_data_content .roaming_content .roaming_item .order_expiry_group_toggle {
	display: flex;
}

#roaming_data_content .roaming_content .roaming_item .order_expiry_group_toggle .name_order_expiry {
	width: 75%;
}

#roaming_data_content .roaming_content .roaming_item .name_order.open .order_expiry_group_toggle .name_order_expiry>div {
	display: none;
}

#roaming_data_content .roaming_content .roaming_item .order_expiry_group_toggle .name_order_pass {
	display: flex;
	width: 25%;
}

#roaming_data_content .roaming_content .roaming_item .order_expiry_group_toggle .name_order_pass div {
	width: 80%;
}

#roaming_data_content .roaming_content .roaming_item .order_expiry_group_menu {
	display: none;
}

#roaming_data_content .roaming_content .roaming_item .order_expiry_group_menu .expiry_order_item {
	display: flex;
	align-items: center;
	padding: 1vw 0;
}

#roaming_data_content .roaming_content .roaming_item .order_expiry_group_menu .expiry_order_item .expiry_order_expiry {
	width: 75%;
}

#roaming_data_content .roaming_content .roaming_item .name_order.open .order_expiry_group_menu {
	display: block;
}

#roaming_data_content .roaming_content .roaming_item .order_expiry_group_toggle .name_order_pass::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #roaming_data_content .roaming_content .roaming_item .order_expiry_group_toggle .name_order_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #roaming_data_content .roaming_content .roaming_item .order_expiry_group_toggle .name_order_pass::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#roaming_data_content .roaming_content .roaming_item .name_order.noMenu .order_expiry_group_toggle .name_order_pass::after {
	content: unset;
}

#roaming_data_content .roaming_content .roaming_item .name_order.open .order_expiry_group_toggle .name_order_pass::after {
	transform: rotate(180deg);
}

#roaming_voice_content {
	background-color: #fff;
	margin: 20px 2vw;
	padding: 6.5vw 16px 7.5vw 16px;
	color: black;
	display: none;
}

.brand-csl #roaming_voice_content {
	border-radius: 25px;
}

.brand-1010 #roaming_voice_content {
	background-color: #3e3e3b;
	color: white;
	border-radius: 5vw 0 0 5vw;
	margin: 20px -2vw;
	padding: 6.5vw 5vw 7.5vw 5vw;
}

.brand-cs_postpaid #roaming_voice_content {
	border-radius: 8px;
}

#roaming_voice_content .header {
	font-size: 4.8vw;
	font-weight: bold;
	padding-bottom: 20px;
}

.brand-1010 #roaming_voice_content .header {
	color: #f2c97f;
}

#roaming_voice_content .content .toggle {
	display: flex;
}

#roaming_voice_content .content .toggle_left {
	width: 75%;
}

#roaming_voice_content .content .expiryBox {
	background-color: #fff;
	width: fit-content;
	padding: 3px 10px;
	margin-top: 5px;
	border-radius: 21px;
	font-size: 3.4vw;
}

.brand-1010 #roaming_voice_content .content .expiryBox {
	background-color: rgb(255 255 255 / 16%);
}

#roaming_voice_content .content .toggle_left .earliest_expiry {
	background-color: #f4f4f4;
}

.brand-1010 #roaming_voice_content .content .toggle_left .earliest_expiry {
	background-color: rgb(255 255 255 / 16%);
}

#roaming_voice_content .content.open .toggle_left .earliest_expiry {
	display: none;
}

#roaming_voice_content .content .toggle_left .toggle_name {
	display: flex;
	color: var(--tag-bg-color);
	font-size: 3.7vw;
	font-weight: 500;
}

.brand-1010 #roaming_voice_content .content .toggle_left .toggle_name {
	color: #cb9c57;
}

#roaming_voice_content .content .toggle_left .toggle_name::before {
	content: "";
	width: 8vw;
	height: 8vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	margin-right: 2vw;
	background-image: url(/abc_cms/wp-content/uploads/2025/01/voice_icon_csl.png);
}

.brand-1010 #roaming_voice_content .content .toggle_left .toggle_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/voice_icon_1010.png);
}

.brand-cs_postpaid #roaming_voice_content .content .toggle_left .toggle_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/voice_icon_cs_postpaid.png);
}

#roaming_voice_content .content .toggle_available {
	width: 25%;
	display: flex;
}

#roaming_voice_content .content .toggle_available::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #roaming_voice_content .content .toggle_available::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #roaming_voice_content .content .toggle_available::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#roaming_voice_content .content.open .toggle_available::after {
	transform: rotate(180deg);
}

#roaming_voice_content .content .toggle_available div {
	width: 80%;
	font-size: 3.7vw;
	font-weight: bold;
}

#roaming_voice_content .content .toggle_available div span {
	font-size: 3.2vw;
	font-weight: normal;
}

#roaming_voice_content .content .avaStyle div span:nth-child(n+3) {
	font-weight: 500;
}

#roaming_voice_content .content .menu {
	display: none;
	padding: 0px 16px;
	margin: 3vw -16px 0 -16px;
	background: #f4f4f4;
	border-radius: 5vw 0 0 5vw;
}

.brand-1010 #roaming_voice_content .content .menu {
	background: #333333;
	padding: 0px 5vw;
	margin: 3vw -5vw 0 -5vw;
}

#roaming_voice_content .content.open .menu {
	display: block;
}

#roaming_voice_content .content .menu .voice_item {
	padding: 3vw 0;
}

#roaming_voice_content .content .menu .voice_item .item_header {
	display: flex;
}

#roaming_voice_content .content .menu .voice_item .item_header .item_name {
	width: 75%;
}

#roaming_voice_content .content .menu .voice_item .item_header .item_name span {
	width: 80%;
}

#roaming_voice_content .content .menu .voice_item .item_header .item_available {
	width: 25%;
	display: flex;
}

#roaming_voice_content .content .menu .voice_item .item_header .item_available>div {
	width: 80%;
	font-size: 3.7vw;
	font-weight: bold;
}

#roaming_voice_content .content .menu .voice_item .item_header .item_available>div span {
	font-size: 3.2vw;
	font-weight: normal;
}

#roaming_voice_content .content .menu .voice_item .item_header .item_available::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #roaming_voice_content .content .menu .voice_item .item_header .item_available::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #roaming_voice_content .content .menu .voice_item .item_header .item_available::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#roaming_voice_content .content .menu .voice_item.open .item_header .item_available::after {
	transform: rotate(180deg);
}

#roaming_voice_content .content .menu .voice_item .item_header .item_available .entitled {
	display: none;
}

#roaming_voice_content .content .menu .voice_item.open .item_header .item_available .entitled {
	display: block;
}

#roaming_voice_content .content .menu .voice_item .dest_style {
	font-size: 3vw;
	color: #cb8a1e;
	line-height: 1.2;
}

.brand-1010 #roaming_voice_content .content .menu .voice_item .dest_style {
	color: #cb9c57;
}

.brand-cs_postpaid #roaming_voice_content .content .menu .voice_item .dest_style {
	color: #0b417b;
}

#roaming_voice_content .content .menu .voice_item .dest_style>span {
	overflow: hidden;
	display: block;
}

#roaming_voice_content .content .menu .voice_item .dest_style.collapse>span {
	height: 1.2em;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(to bottom, #cb8a1e, #a7803f 65%, rgba(44, 43, 41, 0.5));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brand-1010 #roaming_voice_content .content .menu .voice_item .dest_style.collapse>span {
	background-image: linear-gradient(to bottom, #cb9c57, #a38a64 59%, #404040);
}

.brand-cs_postpaid #roaming_voice_content .content .menu .voice_item .dest_style.collapse>span {
	background-image: linear-gradient(to bottom, #0b417b, #203d5c 60%, rgba(106, 106, 106, 0.3));
}

#roaming_voice_content .content .menu .voice_item .dest_style::after {
	display: block;
	align-content: center;
	border: 1px solid;
	border-radius: 5vw;
	width: 13vw;
	height: 5vw;
	padding: 0vw 3vw;
	margin: 1vw 0;
	font-weight: bold;
	background-size: auto 10%;
	background-repeat: no-repeat;
	background-position: 85%;
}

#roaming_voice_content .content .menu .voice_item .dest_style.collapse::after {
	content: "Detail";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/add_icon_csl.png);
	background-size: auto 50%;
	background-repeat: no-repeat;
	background-position: 85%;
}

.zh-hk #roaming_voice_content .content .menu .voice_item .dest_style.collapse::after {
	width: 15vw;
	content: "更多詳情";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/add_icon_csl.png);
}

.brand-1010 #roaming_voice_content .content .menu .voice_item .dest_style.collapse::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/add_icon_1010.png);
}

.brand-cs_postpaid #roaming_voice_content .content .menu .voice_item .dest_style.collapse::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/add_icon_cs_postpaid.png);
}

#roaming_voice_content .content .menu .voice_item .dest_style.expand::after {
	content: "Less";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/less_icon_csl.png);
}

.zh-hk #roaming_voice_content .content .menu .voice_item .dest_style.expand::after {
	content: "收起";
	background-image: url(/abc_cms/wp-content/uploads/2024/08/less_icon_csl.png);
}

.brand-1010 #roaming_voice_content .content .menu .voice_item .dest_style.expand::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/less_icon_1010.png);
}

.brand-cs_postpaid #roaming_voice_content .content .menu .voice_item .dest_style.expand::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/08/less_icon_cs_postpaid.png);
}

#easy_content {
	background-color: #fff;
	margin: 20px 2vw;
	padding: 6.5vw 16px 7.5vw 16px;
	color: black;
	display: none;
}

.brand-csl #easy_content {
	border-radius: 25px;
}

.brand-1010 #easy_content {
	background-color: #3e3e3b;
	color: white;
	border-radius: 5vw 0 0 5vw;
	margin: 20px -2vw;
	padding: 6.5vw 5vw 7.5vw 5vw;
}

.brand-cs_postpaid #easy_content {
	border-radius: 8px;
}

#easy_content .header {
	font-size: 4.8vw;
	font-weight: bold;
}

.brand-1010 #easy_content .header {
	color: #f2c97f;
}

#easy_content .content {
	padding-top: 3.5vw;
	display: flex;
}

#easy_content .content .content_left {
	width: 75%;
}

#easy_content .content .content_left .name {
	display: flex;
	color: var(--tag-bg-color);
	font-size: 3.7vw;
	font-weight: 500;
}

.brand-1010 #easy_content .content .content_left .name {
	color: #cb9c57;
}

#easy_content .content .content_left .name span {
	width: 80%;
}

#easy_content .content .content_left .name::before {
	content: "";
	width: 8vw;
	height: 8vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	margin-right: 2vw;
	background-image: url(/abc_cms/wp-content/uploads/2025/01/86e_icon_csl.png);
}

.brand-1010 #easy_content .content .content_left .name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/86e_icon_1010.png);
}

.brand-cs_postpaid #easy_content .content .content_left .name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/86e_icon_cs_postpaid.png);
}

#easy_content .content .content_left .earliest_expiry {
	background-color: #f4f4f4;
	width: fit-content;
	padding: 5px;
	margin-top: 5px;
	border-radius: 21px;
	font-size: 3.5vw;
}

.brand-1010 #easy_content .content .content_left .earliest_expiry {
	background-color: rgb(255 255 255 / 16%);
}

#easy_content .content .content_available {
	width: 25%;
	display: flex;
}

#easy_content .content .avaStyle div span:nth-child(n+3) {
	font-weight: 500;
}

#easy_content .btn {
	border-radius: 5vw;
	background-color: #efefef;
	padding: 5vw;
	color: black;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand-1010 #easy_content .btn {
	background-color: #eaeaea;
}

.brand-cs_postpaid #easy_content .btn {
	border-radius: 8px;
}

#easy_content .btn::after {
	content: "";
	width: 10vw;
	height: 8vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}

.brand-csl #easy_content .btn::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_csl.png);
}

.brand-1010 #easy_content .btn::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_1010.png);
}

#tiantong_content {
	background-color: #fff;
	margin: 20px 2vw;
	padding: 6.5vw 16px 7.5vw 16px;
	color: black;
	display: none;
}

.brand-csl #tiantong_content {
	border-radius: 25px;
}

.brand-1010 #tiantong_content {
	background-color: #3e3e3b;
	color: white;
	border-radius: 5vw 0 0 5vw;
	margin: 20px -2vw;
	padding: 6.5vw 5vw 7.5vw 5vw;
}

.brand-cs_postpaid #tiantong_content {
	border-radius: 8px;
}

#tiantong_content .header {
	font-size: 4.8vw;
	font-weight: bold;
}

.brand-1010 #tiantong_content .header {
	color: #f2c97f;
}

#tiantong_content .asOffDate {
	background-color: #fdf9ef !important;
	display: flex;
	align-items: center;
}

.brand-1010 #tiantong_content .asOffDate {
	background-color: #fff7e8 !important;
	color: black;
}

.brand-cs_postpaid #tiantong_content .asOffDate {
	background-color: #fcf8fd !important;
}

#tiantong_content .content {
	padding-top: 20px;
}

#tiantong_content .voice_content,
#tiantong_content .sms_content {
	padding-bottom: 3.5vw;
}

#tiantong_content .voice_content .voice_toggle {
	display: flex;
}

#tiantong_content .voice_content .voice_toggle .voice_left {
	width: 75%;
}

#tiantong_content .voice_content .voice_toggle .voice_left .voice_name {
	display: flex;
	color: var(--tag-bg-color);
	font-size: 3.7vw;
	font-weight: 500;
}

.brand-1010 #tiantong_content .voice_content .voice_toggle .voice_left .voice_name {
	color: #cb9c57;
}

#tiantong_content .voice_content .voice_toggle .voice_left .voice_name span {
	width: 80%;
}

#tiantong_content .voice_content .voice_toggle .voice_left .voice_name::before,
#tiantong_content .sms_content .content_left .name::before {
	content: "";
	width: 8vw;
	height: 8vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	margin-right: 2vw;
	background-image: url(/abc_cms/wp-content/uploads/2025/01/tiantong_icon_csl.png);
}

.brand-1010 #tiantong_content .voice_content .voice_toggle .voice_left .voice_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/tiantong_icon_1010.png);
}

.brand-cs_postpaid #tiantong_content .voice_content .voice_toggle .voice_left .voice_name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/tiantong_icon_cs_postpaid.png);
}

#tiantong_content .voice_content .voice_toggle .voice_left .earliest_expiry {
	background-color: #f4f4f4;
}

#tiantong_content .voice_content.open .voice_toggle .voice_left .earliest_expiry {
	display: none;
}

.brand-1010 #tiantong_content .voice_content .voice_toggle .voice_left .earliest_expiry {
	background-color: rgb(255 255 255 / 16%);
}

#tiantong_content .voice_content .voice_toggle .voice_available {
	width: 25%;
	display: flex;
}

#tiantong_content .voice_content .voice_toggle .voice_available div {
	width: 80%;
	font-size: 3.7vw;
	font-weight: bold;
}

#tiantong_content .voice_content .voice_toggle .voice_available div span {
	font-size: 3.2vw;
	font-weight: normal;
}

#tiantong_content .voice_content .voice_toggle .voice_available::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #tiantong_content .voice_content .voice_toggle .voice_available::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #tiantong_content .voice_content .voice_toggle .voice_available::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#tiantong_content .voice_content.open .voice_toggle .voice_available::after {
	transform: rotate(180deg);
}

#tiantong_content .avaStyle div span:nth-child(n+3) {
	font-weight: 500;
}

#tiantong_content .expiryBox {
	background-color: #fff;
	width: fit-content;
	max-width: 70%;
	padding: 3px 10px;
	margin-top: 5px;
	border-radius: 21px;
	font-size: 3.4vw;
}

.brand-1010 #tiantong_content .expiryBox {
	background-color: rgb(255 255 255 / 16%);
}

#tiantong_content .voice_content .voice_menu {
	display: none;
	padding: 0px 16px;
	margin: 3vw -16px 0 -16px;
	background: #f4f4f4;
	border-radius: 5vw 0 0 5vw;
}

.brand-1010 #tiantong_content .voice_content .voice_menu {
	background: #333333;
	padding: 0px 5vw;
	margin: 3vw -5vw 0 -5vw;
}

#tiantong_content .voice_content.open .voice_menu {
	display: block;
}

#tiantong_content .voice_content.open .voice_menu .voice_item {
	padding: 3vw 0;
}

#tiantong_content .voice_content.open .voice_menu .voice_item .item_header {
	display: flex;
}

#tiantong_content .voice_content.open .voice_menu .voice_item .item_header .item_name {
	width: 75%;
}

#tiantong_content .voice_content.open .voice_menu .voice_item .item_header .item_name span {
	width: 80%;
	display: block;
}

#tiantong_content .voice_content.open .voice_menu .voice_item .item_header .item_used {
	width: 25%;
	display: flex;
}

#tiantong_content .voice_content.open .voice_menu .voice_item .item_header .item_used>div {
	width: 80%;
	font-size: 3.7vw;
	font-weight: bold;
}

#tiantong_content .voice_content.open .voice_menu .voice_item .item_header .item_used>div span {
	font-size: 3.2vw;
	font-weight: normal;
}

#tiantong_content .voice_content.open .voice_menu .voice_item .item_header .item_used::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_csl.png);
	width: 3vw;
	height: 1.5vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(0);
	translate: 0 2vw;
}

.brand-1010 #tiantong_content .voice_content.open .voice_menu .voice_item .item_header .item_used::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_1010.png);
}

.brand-cs_postpaid #tiantong_content .voice_content.open .voice_menu .voice_item .item_header .item_used::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dropdown_cs_postpaid.png);
}

#tiantong_content .voice_content.open .voice_menu .voice_item.open .item_header .item_used::after {
	transform: rotate(180deg);
}

#tiantong_content .voice_content .voice_menu .voice_item.open .expiry_date {
	display: none;
}

#tiantong_content .voice_content .voice_menu .voice_item .item_menu {
	display: none;
}

#tiantong_content .voice_content .voice_menu .voice_item.open .item_menu {
	display: flex;
	align-items: end;
}

#tiantong_content .voice_content .voice_menu .voice_item .item_menu .item_left {
	width: 75%;
	height: fit-content;
}

#tiantong_content .voice_content .voice_menu .voice_item .item_menu .item_right {
	width: 25%;
}

#tiantong_content .voice_content .voice_menu .voice_item .item_menu .item_right>div {
	width: 80%;
	font-size: 3.7vw;
	font-weight: bold;
}

#tiantong_content .voice_content .voice_menu .voice_item .item_menu .item_right>div span {
	font-size: 3.2vw;
	font-weight: normal;
}

#tiantong_content .voice_content .remark {
	color: #cb8a1e;
	font-size: 10px;
}

.brand-1010 #tiantong_content .voice_content .remark {
	color: #cb9c57;
}

.brand-cs_postpaid #tiantong_content .voice_content .remark {
	color: #0b417b;
}

#tiantong_content .sms_content {
	display: flex;
}

#tiantong_content .sms_content .content_left {
	width: 75%;
}

#tiantong_content .sms_content .content_left .name {
	display: flex;
	color: var(--tag-bg-color);
	font-size: 3.7vw;
	font-weight: 500;
}

.brand-1010 #tiantong_content .sms_content .content_left .name {
	color: #cb9c57;
}

#tiantong_content .sms_content .content_left .name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/tiantong_icon_csl.png);
}

.brand-1010 #tiantong_content .sms_content .content_left .name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/tiantong_icon_1010.png);
}

.brand-cs_postpaid #tiantong_content .sms_content .content_left .name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/tiantong_icon_cs_postpaid.png);
}

#tiantong_content .note {
	line-height: 1.4;
}

#sms_content {
	background-color: #fff;
	margin: 20px 2vw;
	padding: 6.5vw 16px 7.5vw 16px;
	color: black;
	display: none;
}

.brand-csl #sms_content {
	border-radius: 25px;
}

.brand-1010 #sms_content {
	background-color: #3e3e3b;
	color: white;
	border-radius: 5vw 0 0 5vw;
	margin: 20px -2vw;
	padding: 6.5vw 5vw 7.5vw 5vw;
}

.brand-cs_postpaid #sms_content {
	border-radius: 8px;
}

#sms_content .header {
	font-size: 4.8vw;
	font-weight: bold;
	padding-bottom: 20px;
}

.brand-1010 #sms_content .header {
	color: #f2c97f;
}

#sms_content .content {
	padding-top: 3.5vw;
	display: flex;
}

#sms_content .content .content_left {
	width: 75%;
}

#sms_content .content .content_left .name {
	display: flex;
	color: var(--tag-bg-color);
	font-size: 3.7vw;
	font-weight: 500;
}

.brand-1010 #sms_content .content .content_left .name {
	color: #cb9c57;
}

#sms_content .content .content_left .name::before {
	content: "";
	width: 8vw;
	height: 8vw;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	margin-right: 2vw;
	background-image: url(/abc_cms/wp-content/uploads/2025/01/sms_icon_csl.png);
}

.brand-1010 #sms_content .content .content_left .name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/sms_icon_1010.png);
}

.brand-cs_postpaid #sms_content .content .content_left .name::before {
	background-image: url(/abc_cms/wp-content/uploads/2025/01/sms_icon_postpaid.png);
}

#sms_content .content .content_available {
	width: 25%;
	display: flex;
}

#sms_content .content .avaStyle div span:nth-child(n+3) {
	font-weight: 500;
}

#dashboard_other {
	margin: 20px 2vw 0 2vw;
	padding: 25px 16px 30px 16px;
	background-color: #fff;
	border-radius: 5vw 0 0 5vw;
	color: #333;
}

.brand-csl #dashboard_other {
	border-radius: 25px;
}

.brand-1010 #dashboard_other {
	background-color: #3e3e3b;
	color: #fff;
	margin: 20px -2vw 0 -2vw;
	padding: 25px 4vw 30px 4vw;
	border-radius: 5vw 0 0 5vw;
}

.brand-cs_postpaid #dashboard_other {
	border-radius: 8px;
}

#dashboard_other .other_tabs {
	display: flex;
	flex-wrap: wrap;
}

#dashboard_other .other_tabs .btn {
	width: calc(50% - 6vw);
	height: 10vw;
	border-radius: 3vw;
	background: #f2f2f2;
	color: black;
	padding: 3vw 2vw;
	margin: 2vw 0;
	position: relative;
	cursor: pointer;
	font-size: 3vw;
	line-height: 1;
	font-weight: 500;
}

.brand-1010 #dashboard_other .other_tabs .btn {
	background: #eaeaea;
}

.brand-cs_postpaid #dashboard_other .other_tabs .btn {
	border-radius: 8px;
}

#dashboard_other .other_tabs .btn.full {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#dashboard_other .other_tabs .btn.full div {
	position: unset;
}

#dashboard_other .other_tabs .btn.setting {
	margin-left: 3vw;
}

#dashboard_other .other_tabs .btn>span {
	max-width: 55%;
	display: block;
}

#dashboard_other .other_tabs .btn>span.zh-hk {
	max-width: none;
}

#dashboard_other .other_tabs .btn>div {
	width: 11vw;
	height: 11vw;
	position: absolute;
	bottom: 10%;
	right: 5%;
}

.brand-1010 #dashboard_other .other_tabs .btn>div {
	width: 8vw;
	height: 8vw;
}

#dashboard_other .other_tabs .btn>div img {
	width: 100%;
}

#dashboard_other .other_tabs .tab {
	text-align: center;
	max-width: 17vw;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.brand-1010 #dashboard_other .other_tabs .tab {
	max-width: 19vw;
}

#dashboard_other .other_tabs .tab:not(:last-child) {
	margin-right: auto;
}

#dashboard_other .other_tabs .tab div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 10px 0;
}

#dashboard_other .other_tabs .tab img {
	width: 100%;
}

.brand-csl #dashboard_other .other_tabs .tab img,
.brand-cs_postpaid #dashboard_other .other_tabs .tab img {
	width: 115%;
}

#dashboard_other .other_tabs .tab span {
	font-size: 3.1vw;
	line-height: 1.2;
	font-weight: 500;
}

#dashboard_other .backToDashboard {
	height: 10.8vw;
	background-color: #faa61a;
	color: #fff;
	font-weight: bold;
	border-radius: 21px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.brand-1010 #dashboard_other .backToDashboard {
	background-image: linear-gradient(to bottom, #debb74, #efcd8a 38%, #daaf69 81%, #c8a061);
	color: #333;
}

.brand-cs_postpaid #dashboard_other .backToDashboard {
	border-radius: 8px;
	background-image: linear-gradient(to right, #662d91, #09417a);
}

#dashboard_other .backToDashboard::after {
	content: "";
	width: 10vw;
	height: 10vw;
	position: absolute;
	right: 10%;
	background-repeat: no-repeat;
	background-size: contain;
}

.brand-csl #dashboard_other .backToDashboard::after {
	width: 11vw;
	height: 11vw;
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_csl.png);
}

.brand-1010 #dashboard_other .backToDashboard::after {
	background-image: url(/abc_cms/wp-content/uploads/2024/07/dashboard_redirect_1010.png);
}


div#faq {
	padding-top: 20px;
}

#faq .faq_option {
	padding: 20px;
	background: white;
	color: black;
	border-radius: 25px;
	margin-bottom: 20px;
	border-bottom: unset;
}

#faq .faq_option .faq_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 500;
	color: #034F91;
}

#faq .faq_option .faq_header::after {
	content: "";
	background-image: url(/abc_cms/wp-content/uploads/2025/05/faq_section_icon.png);
	width: 6vw;
	height: 6vw;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(180deg);
}

#faq .faq_option.open .faq_header::after {
	transform: rotate(0);
}

#faq .faq_option .faq_header span {
	width: 85%;
}

#faq .faq_option .faq_content {
	display: none;
	padding-top: 20px;
}

#faq .faq_option.open .faq_content {
	display: block;
}

#faq .faq_option .faq_content a {
	color: var(--tag-bg-color);
}

#faq .tabs {
	background: #5d5d5d;
	color: white;
	display: flex;
	justify-content: space-around;
	padding-top: 10px;
	border-radius: 25px 25px 0 0;
	text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.tab_interval {
	width: 1px;
	background: white;
}

#faq .tab {
	padding: 5px;
	width: 30%;
	text-align: center;
	font-weight: 500;
}

#faq .tab.activate {
	border-radius: 25px;
	background: white;
	color: black;
	font-weight: bold;
}

#faq .tab_body {
	background: #5d5d5d;
	padding-top: 10px;
	border-radius: 0 0 25px 25px;
	box-shadow: 0 10px 0 #5d5d5d;
}

.brand-cs_postpaid #faq .tab_body {
	border-radius: 0 0 8px 8px;
}

#faq .tab_content {
	background: #f6f7f7;
	color: black;
	border-radius: 25px;
	padding: 10px 20px 35px 20px;
	margin-bottom: 10px;
	box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.16);
}

#faq .content_paginate {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	background: white;
	border-radius: 25px;
	box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
	position: relative;
}

#faq .pagin_pre,
#faq .pagin_next,
#faq .pagin_page>* {
	display: block;
	width: 28px;
	height: 28px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	align-content: center;
	border-radius: 50%;
	margin: 0 3px;
	color: #b2b2b2;
}

#faq .pagin_page>* {
	margin: auto;
}

#faq .pagin_pre.disabled,
#faq .pagin_next.disabled,
#faq .pagin_page>*.disabled {
	opacity: 0.3;
}

#faq .current {
	background-image: linear-gradient(white, white), conic-gradient(from 0.25turn, #f3c400, #fe6300 0.1turn, #fd800a 0.22turn, #fe2436 0.37turn, #4150f9 0.49turn, #2224fb 0.63turn, #6be7ef 0.73turn, #40e0f3 0.86turn, #f3c400);
	background-position: center;
	background-size: 200% 200%;
	border: 2px solid transparent;
	background-clip: content-box, border-box;
	color: black;
	outline: 1px solid gray;
	outline-offset: 4px;
}

#faq .pagin_pre:after,
#faq .pagin_next:after {
	content: "";
	display: block;
	width: 35px;
	height: 100%;
	background-image: url(/abc_cms/wp-content/uploads/2025/05/next_icon.png);
	background-repeat: no-repeat;
	background-size: 135%;
	background-position: top;
	position: absolute;
	top: 10%;
}

#faq .pagin_pre:after {
	background-image: url(/abc_cms/wp-content/uploads/2025/05/prev_icon.png);
}

#faq .pagin_next:after {
	right: 4px;
}

#faq .pagin_more_prev,
#faq .pagin_more_next {
	display: none;
}

#faq .pagin_page {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 56px);
}

#faq .pagin_page span:first-child,
#faq .pagin_page span:last-child {
	display: block !important;
}

#faq .line-content {
	padding: 5px 0;
}

#faq .line-content .title,
#faq .line-content .label,
#faq .line-content .img {
	padding-bottom: 5px;
}

#faq .line-content .title {
	font-weight: bold;
	font-size: 4.5vw;
}

#faq .line-content .img {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#faq .btn_pre,
#faq .btn_next {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
}

#faq .btn_pre {
	left: -15px;
}

#faq .btn_next {
	right: -15px
}

#faq .btn_pre:after,
#faq .btn_next:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}

#faq .btn_pre:after {
	background-image: url(/abc_cms/wp-content/uploads/2025/05/pagin_prev_csl.png);
}

#faq .btn_next:after {
	background-image: url(/abc_cms/wp-content/uploads/2025/05/pagin_next_csl.png);
}

#faq .btn_pre.disabled,
#faq .btn_next.disabled {
	opacity: 0;
}

#faq .img img {
	width: 90%;
}

@keyframes animateDot {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(calc(3.6deg * var(--num)));
	}
}

@keyframes prevSlide {
	0% {
		transform: translatex(-100vw);
	}

	100% {
		transform: translatex(0vw);
	}
}

@keyframes prevCurrSlide {
	0% {
		transform: translatex(0vw);
	}

	100% {
		transform: translatex(100vw);
	}
}

@keyframes currNextSlide {
	0% {
		transform: translatex(-100vw);
	}

	100% {
		transform: translatex(0vw);
	}
}

@keyframes nextSlide {
	0% {
		transform: translatex(100vw);
	}

	100% {
		transform: translatex(0vw);
	}
}