@charset "UTF-8";
@font-face {
	font-family: NotoSanBold;
	src: url('/assets/fonts/NotoSansTC-Bold.otf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: NotoSanReg;
	src: url('/assets/fonts/NotoSansTC-Medium.otf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: DINMittelschriftStd;
	src: url('/assets/fonts/DIN/DINMittelschriftStd.otf');
	font-weight: normal;
	font-style: normal;
}
.heading, .heading span, .workshopheader{
	font-family:DINMittelschriftStd,NotoSanBold,Microsoft JhengHei;
	/*font-family:DINMittelschriftStd,"Microsoft YaHei","Microsoft YaHei UI",微軟正黑體,"Microsoft JhengHei","Microsoft JhengHei UI","PingFang TC","LiHei Pro","Lantinghei TC","Heiti TC","Apple LiGothic","PMingLiU",sans-serif;
	font-weight:700;*/
}
b{
	font-family:DINMittelschriftStd,NotoSanBold,Microsoft JhengHei;
	/*font-family:DINMittelschriftStd,"Microsoft YaHei","Microsoft YaHei UI",微軟正黑體,"Microsoft JhengHei","Microsoft JhengHei UI","PingFang TC","LiHei Pro","Lantinghei TC","Heiti TC","Apple LiGothic","PMingLiU",sans-serif;
	font-weight:700;*/
}
.subheading{
	font-family:Roboto-Regular,微軟正黑體,Microsoft JhengHei;
	font-weight:bold;
}

/*     202408 f5GA update   */
.logo.netvigator {
    /*background-image: url(../images/logo/netvigator-chi.svg);*/
    background-image: url(../images/logo/netvigator-f5GA.svg);
}
.logo.hkt {
    background-image: url(../images/logo/hkt-chi.svg);
}
.logo.pccw {
    background-image: url(../images/logo/pccw-chi.svg);
}
.btn {
    display: inline-block;
    color: #FFF;
    font-family: 'Roboto-Medium',NotoSanReg,微軟正黑體,Microsoft JhengHei, sans-serif;
    text-align: center;
    white-space: nowrap;
    font-weight: 100;
    cursor: pointer;
    vertical-align: top;
}
.page_header{
	font-family:DINMittelschriftStd,NotoSanBold,Microsoft JhengHei;
}
.secondsubmenu {
	left: 0px!important;
}
@media only screen and (max-width: 640px){
	footer .frame .pccw {
		right: 4vw;
		top: 23.1vw;
		width: 22.96vw;
		height: 1.85vw;
	}
	#multiUse4x1000m-subscription .table.multiUse4x1000mPlan table thead tr td.plan,
	#multiUse4x1000m-subscription .table.multiUse4x1000mPlan table thead tr td.monthlyRate,
	#multiUse4x1000m-subscription .table.multiUse4x1000mPlan table thead tr td.commitment
	{
		display:block;
		float:left;
	}


	/*     202408 f5GA update     */
	header .front .frame .netvigator {
		/*width: 44vw;*/
		width: 39vw;
    	/*left: 43%;*/
    	left: 28%;
		/*width: 33vw;*/
		/*left: 50%;*/
		height: 12.96vw;
		display: block;
		position: fixed;
		margin: 0;		
		margin-left: -13.5vw;
		z-index: 13;
	}
}
@media only screen and (max-width: 9999999px) and (min-width: 1280px){
	footer .frame .pccw {
		right: 65px;
		top: 38px;
		width: 142px;
		height: 11px;
	}
	.table table tbody tr td.monthlyRate span:after {
		content: ' / 月';
		color: #000;
	}
}
@media only screen and (min-width: 320px) {
	
}
@media only screen and (min-width: 640px) {
	.vlanarea li:last-child img {
		height: 114px;
		width: auto;
		margin: 25px auto 0;
	}
}
@media only screen and (min-width: 1024px) {
	.vlanarea li:last-child img {
		height: 240px;
		width: auto;
		margin: 35px auto 0;
	}
	.bbvlanblock {
		min-height:auto;
	}
}
#multiUse4x1000m-subscription .table.multiUse4x1000mPlan table tbody tr td.monthlyRate span:after {
	line-height:normal;
	content: '起';
	display: block;
}
.table table tbody tr td.monthlyRate span:before {
	line-height:normal;
	content: 'HK$';
}
.logo.gamer {
    background-image: url(../images/logo/gamer_cht.png);
}
.customBlock .content .offer .monthlyRate span:after {
    content: ' / 月';
    color: #fff;
}
#homeWireless-subscription .table.suggestedPlan .list > ul > li .summary .offer .monthlyRate span:after {
    content: ' / 月';
    color: #000;
}
.table table tbody tr td.monthlyRate span:after {
    content: ' / 月';
    color: #000;
}
.shoppingCart .product .offer .monthlyRate span:after {
    content: ' / 月';
    color: #000;
}
.chistyle{
	font-size:16px!important;
}
@media only screen and (min-width: 640px) {
	.topsubMenu {
		width: 80px!important;
		height: auto!important;
	}
	.remitems{
		border-bottom: 0px #ececec solid;
	}
	.ritem {
		float: left;
		width: 100%;
		padding: 15px 30px;
		border-right: 0px #ececec solid;
		border-bottom: 1px #ececec solid;
		/* display: block; */
		color:#000;
	}
	.remitems .tableitem:last-child .ritem {
		border-right: 0px #ececec solid;
		border-bottom: 1px #ececec solid;
		/* display: block; */
	}
	.vlanarea{
		padding:45px 0 0 0;
	}
	.vlanarea li{
		width: 49%;
		padding: 0;
	}
	.vlanarea li img{
		height:114px;
		width:auto;
		margin: 25px auto 0;
	}
	.vlanarea li:last-child{
		width: 49%;
		padding: 0 0 0 2%;
	}
	.vlanarea li:last-child img{
		height:114px;
		width:auto;
		margin: 39px auto 0;
	}
	.vlanarea .frame{
		padding: 0 45px;
	}
	.vlanheader{
		font-size:2.8125vw;
		font-family:Roboto-Medium,"微軟正黑體", "微軟正黑體 UI", 'Microsoft JhengHei', 'Microsoft JhengHei UI', 'Microsoft YaHei', 'Microsoft YaHei UI', 'SimHei', sans-serif;
		padding:0 0 25px 0;
		text-align: center;
	}
	.vlandesc{
		font-size: 1.25vw;
		padding: 0;
	}
	.diadesc{
		text-align:right;
		font-size: 1.25vw;
		padding: 0 80px 0 0;
	}
	.vlanarea li:last-child .diadesc{
		text-align:center;
		font-size: 1.25vw;
		padding: 0;
	}
	.bbvlan{
		padding:20px;
	}
	.bbvlancol{
		width: 50%;
		float: left;
		padding: 10px 30px;
		text-align:center;
		font-size:1.25vw;
	}
	.bbremark{
		font-size:1vw;
		padding: 0 2.34375vw;
	}
	.bbvlan .bbvlanblock:first-child{
		margin:0 10px 0 0;
		width:calc(50% - 20px);
	}
	.bbvlanblock{
		margin:0 0 0 10px;
		width:calc(50% - 20px);
	}
	/******livechat****/
	.chattext{
		display: block;
		vertical-align: middle;
		float: left;
		position:absolute;
		top:0px;
		height:30px;
	}
	.livechatbn{		
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004898+0,006bac+100 */
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		background: #004898; /* Old browsers */
		background: -moz-linear-gradient(top, #006bac 0%,#004898 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #006bac 0%,#004898 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #006bac 0%,#004898 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004898', endColorstr='#006bac',GradientType=0 ); /* IE6-9 */
		position:fixed;
		top:144px;
		right:0px;
		border-radius:10px 0 0px 10px;
		width:46px;
		height:46px;
		display:block;
		padding:8px;
		cursor:pointer;
	}
	.livetextarea{
		display:none;
		/*display: table;*/
		height: 30px;
		line-height: 46px;
		overflow:hidden;
		float:left;
		position:relative;
		width: calc(100% - 40px);
		font-size: 14px;
		color: #fff;
	}
	.livechaticon{
		background: url(/assets/images/icon/chat-white.svg) top center no-repeat;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		width:30px;
		height:30px;
		margin:0 10px 0 0;
		display:inline-block;
		float:left;
	}
	.livesmallblock{
		width:auto;
		margin:auto;
		display:inline;
	}
	/******livechat****/
	.text1, .text2{
		display: block;
		width: 100%;
		vertical-align: middle;
		line-height: 30px;
		font-size: 12px;
	}
	.mobilenavtext{
		display:none!important;
	}
	.largenavtext{
		display:inline-block!important;
		width: 100%!important;
	}
	.phone_icon {
		display: inline!important;
		height: auto!important;
		width: 25px!important;
		vertical-align: middle!important;
		margin: 0 8px 0 5px;
		padding: 0 0 10px 0;
	}
	
}
/*############640px############*/
/*############1024px############*/
@media only screen and (min-width: 1024px) {
	#mask {
		z-index: 300;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		background-image: url(../images/layerbg.png)\0;
		background-color: rgba(0,0,0,0.85);
		display: none;
	}
	#closeBtn {
		height: 35px;
		width: 35px;
		position: absolute;
		z-index: 1000;
		background-image: url(/assets/images/closeBtn.png);
		background-repeat: no-repeat;
		cursor: pointer;
		top: 10px;
		right: 8px;
	}
	#msg {
		width: 90%;
		left: 50%;
		top: 20%;
		margin-left: -375px;
		max-width: 725px;
		padding: 0 30px;
		overflow: auto;
	}
	.msource {
		position: relative;
	    padding-top: 0px;
		margin-top: 20px;
		height: auto;
		margin-bottom: 20px;
		max-height: 98%;
		overflow: auto;
	}
	.super_relate{
		position:relative;
		display:inline-block;
		max-width:40px;
		min-width:30px;
	}
	.topsubMenu{
		width:150px!important;
		height:auto!important;
		right: 0;
	}
	.remitems{
		border-bottom: 0px #ececec solid;
	}
	.ritem {
		float: left;
		width: 50%;
		padding: 15px 30px;
		border-right: 1px #ececec solid;
		border-bottom: 1px #ececec solid;
		height: 50px;
		/* display: block; */
	}
	/*
	.ritem:nth-last-child(2) {
		float: left;
		width: 50%;
		padding: 15px 30px;
		border-right: 1px #ececec solid;
		border-bottom: 0px #ececec solid;
		height: 50px;
	}*/
	.remitems .tableitem:nth-child(even)  .ritem{
		border-right: 0px #ececec solid;
	}
	.remitems .tableitem:last-child .ritem {
		border-right: 0px #ececec solid;
		border-bottom: 1px #ececec solid;
		/* display: block; */
	}
	.bluetext{
		color:#365c7e;
		font-size: 100%;
	}
	#ipv6test{
		display:inline-block!important;
	}
	.vlanarea{
		padding:45px 0 0 0;
	}
	.vlanarea li{
		width: 49%;
		padding: 0;
	}
	.vlanarea li img{
		height: 240px;
		max-width: 530px;
		width: 100%;
		margin: 35px auto 0;
	}
	.vlanarea li:last-child{
		width: 48%;
		padding: 0 0 0 3%;
	}
	.vlanarea li:last-child img {
		height: 240px;
		width: auto;
		margin: 60px auto 0;
	}
	.vlanarea .frame{
		padding: 0 65px;
	}
	.vlanheader{
		font-size:24px;
		font-family:Roboto-Medium,"微軟正黑體", "微軟正黑體 UI", 'Microsoft JhengHei', 'Microsoft JhengHei UI', 'Microsoft YaHei', 'Microsoft YaHei UI', 'SimHei', sans-serif;
		padding:0 0 25px 0;
		text-align: center;
	}
	.vlandesc{
		font-size: 16px;
	}
	.vlanarea .content:last-child(){
		padding:0 0 0 2%;
		width:100%;
	}
	.bbvlan{
		padding:20px;
	}
	.bbvlancol{
		width: 50%;
		float: left;
		padding: 30px;
		text-align:center;
		font-size:20px;
	}
	.bbvlancol ul{
		text-align:left;
		margin:0;
		padding:0px 0 0 15px;
		list-style: disc;
		font-size:16px;
	}
	.bbremark{
		font-size:14px;
		padding: 0 30px;
	}
	.bbvlanblock {
		min-height:220px;
	}
	
	/******livechat****/
	.chattext{
		display: block;
		vertical-align: middle;
		float: left;
		position:absolute;
		top:0px;
		height:30px;
	}
	.livechatbn{		
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004898+0,006bac+100 */
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		background: #004898; /* Old browsers */
		background: -moz-linear-gradient(top, #006bac 0%,#004898 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #006bac 0%,#004898 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #006bac 0%,#004898 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004898', endColorstr='#006bac',GradientType=0 ); /* IE6-9 */
		position:fixed;
		top:144px;
		right:0px;
		border-radius:10px 0 0px 10px;
		width:46px;
		height:46px;
		display:block;
		padding:8px;
		cursor:pointer;
	}
	.livetextarea{
		display:none;
		/*display: table;*/
		height: 30px;
		line-height: 46px;
		overflow:hidden;
		float:left;
		position:relative;
		width: calc(100% - 40px);
		font-size: 14px;
		color: #fff;
	}
	.livechaticon{
		background: url(/assets/images/icon/chat-white.svg) top center no-repeat;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		width:30px;
		height:30px;
		margin:0 10px 0 0;
		display:inline-block;
		float:left;
	}
	.livesmallblock{
		width:auto;
		margin:auto;
		display:inline;
	}
	/******livechat****/
	.text1, .text2{
		display: block;
		width: 100%;
		vertical-align: middle;
		line-height: 30px;
		font-size: 14px;
	}
	.vlanarea li:last-child .diadesc {
		font-size: 100%;
	}
	.diadesc{
		font-size: 100%;
	}
	.heightzero{
		height:0px!important;
		width:0px!important;
		font-size:0px;
		background-color:#0066FF;
		padding:0;
		margin:0;
	}
	.heightzero.callicon{
		height:0px;
		font-size:0px;
	}
}
/*############1024px############*/
@media only screen and (max-width: 640px){
	.newfeature{
		background: url(/assets/images/icon/New_cht_2x.png) top left no-repeat;
		-webkit-background-size: auto 50px;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		background-size: auto 50px;
		padding: 0 0 0 55px;
	}

	  .icon-menu_mobile a{
	    padding: 0px 13px;
	  }

}
@media only screen and (min-width: 640px) and (max-width: 800px){
	.newfeature{
		background: url(/assets/images/icon/New_cht_2x.png) top left no-repeat;
		-webkit-background-size: auto 50px;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		background-size: auto 50px;
		padding: 0 0 0 55px;
		height: 50px;
		width: auto;
		margin: auto;
	}
	.firstsubmenu {
		left: 0px!important;
	}
}
@media only screen and (min-width: 800px) and (max-width: 1280px){
	.newfeature{
		background: url(/assets/images/icon/New_cht_2x.png) top left no-repeat;
		-webkit-background-size: auto 50px;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		background-size: auto 50px;
		padding: 0 0 0 55px;
		height: 50px;
		width: auto;
		margin: auto;
	}
	#gamer .infoBlock.onlineFeedback {
		height: 43vw;
	}
	.firstsubmenu {
		left: 0px!important;
	}
}
@media only screen and (min-width: 1280px) {
	.newfeature{
		background: url(/assets/images/icon/New_cht_2x.png) top left no-repeat;
		-webkit-background-size: auto 50px;
		-moz-background-size: auto 50px;
		-o-background-size: auto 50px;
		background-size: auto 50px;
		padding: 0 0 0 55px;
		height: 50px;
		width: auto;
		margin: auto;
	}
	#gamer .infoBlock.onlineFeedback {
		height: 490px;
	}
	.firstsubmenu {
		/* left: -80px!important; */
	}
}
/*
.image.gamer-shopping {
    background-image: url(../images/illustration/gamer-shopping-cht.png);
}*/