.sub_header_tab{
	background-color:#20242a;
	position:-webkit-sticky; 
	position: sticky;
	top: 36px;
	z-index:14;
}

@media (min-width: 576px) {
	.sub_header_tab{
		top:57px;
	}
}

@media (min-width: 768px) {
	.sub_header_tab{
		top:71px;
	}
}

@media (min-width: 992px) {
	.sub_header_tab{
		top:71px;
	}
}


@media (min-width: 1200px) {
	.sub_header_tab{
		top:70px;
	}
}


select.namecoutry{
	font-size: 16px;
	width: 300px;
	margin-top: 10px;
	margin-bottom: 20px;
	border-color:#0ca0ea;
	cursor: pointer;
	padding: 5px;
	float: right;
	background-color: #0ca0ea;
	color: antiquewhite;
}
@media screen and (min-width:320px) and (max-width:480px){
    select.namecoutry{
        width:220px;
    }
}
td.pplan-table__region1{
	width:49%;
	text-align:center;
	color:#bfbfbf;
	padding: 5px;
}
div.mpp_line{
	border-bottom: 1px solid #D9D6D6;
}
.city_title{
	background-color: red;
}




.tab_opt{
	color:#fff;
	letter-spacing:0.03rem;
	font-size:12px;
	cursor: pointer;
	border-top:3px solid transparent;
}

@media (min-width: 576px) {
	.tab_opt{
		font-size:12px;
	}
}

@media (min-width: 768px) {
	.tab_opt{
		font-size:16px;
	}
}

@media (min-width: 992px) {
	.tab_opt{
		font-size:16px;
	}
}


@media (min-width: 1200px) {
	.tab_opt{
		font-size:16px;
	}
}



.tab_opt:hover{
	color: #FFE2A9;
}

.tab_opt.active{
	opacity: 1.0;
	background-color: rgba(255,255,255,0.03);
	border-top:3px solid #FFE2A9;
	color: #FFE2A9;
}
.area-opt{
	padding:0.65rem 0.65rem;
  /*background: linear-gradient(137.59deg, #e8e8e8 6.13%, #f9f9f9 71.19%);*/
  background-color: #fff;
  font-size:16px;
  font-family: Roboto,sans-serif;
  letter-spacing:0.05rem;
  color:rgba(0, 91, 127,0.65);
  font-weight:700;
  cursor: pointer;
  z-index:8;
  transition: all 0.3s ease;

  
}
.plan_box{
	overflow:hidden;
	background-color:#fff;
	color:#fdb933;
	border-radius:8px;
	border:0px solid #FFE2A9;    
	box-shadow: 0 1px 8px 0 rgba(0,0,0,.12);
	font-size:14px;
}

.plan_ttl{
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	color:#FFE2A9;
	font-weight:500;
	font-family:Poppins,sans-serif;
	letter-spacing:0.03rem;
	font-size:16px;
	
}
.plan_ttl_high{
	font-weight:700;
	font-size:18px;
}

#dropdown_sample_prd::after{
	content:"\f0d7";
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right:20px;
    top:40%;
    font-size: 14px;
    color:#20242a;

}

.box_sample{
	background-color: rgba(0, 91, 127,0.08);
	border-left:8px solid rgba(0, 91, 127,0.0);
	cursor: pointer;
	opacity: 0.85;
	overflow: hidden;
}

.box_sample:hover{
	outline: 0;
	opacity: 1.0;
}


.box_sample.active{
	background-color: #fff;
	border-color: #00abcd;
	outline: 0;
	opacity: 1.0;
}

.col-sample-price{
	background-color: #fff;
}

.tbl-sample-price{
	font-size:12px;
	letter-spacing: 0.03rem;
}

.sample-price-before{
	color:#005b7f; 
	font-size:28px;
	display: block;
}

.sample-price-save{
	background-color:#fdb933;
	color:#fff;
	font-size:8px;
	letter-spacing:0.03rem;
	position:absolute;
	top:0;
	right:0;
	padding:1px 5px;
}


@media (min-width: 576px) {
	.plan_box{
		font-size:12px;
	}
	.plan_ttl{
		font-size:14px;
		
	}
	.plan_ttl_high{
		font-size:16px;
	}
}

@media (min-width: 768px) {
	.plan_box{
		font-size:13px;
	}
	.plan_ttl{
		font-size:16px;
		
	}
	.plan_ttl_high{
		font-size:18px;
	}
	.box_sample{
		border-left:8px solid rgba(0, 91, 127,0.08);
		border-top:0px;
	}


	.tbl-sample-price{
		font-size:14px;
	}
	.sample-price-before{
		display: inline;
		font-size:24px;
	}
	
	.sample-price-save{
		font-size:8px;
		padding:2px 5px;
	}
}

@media (min-width: 992px) {
	.plan_box{
		font-size:14px;
	}
	.plan_ttl{
		font-size:16px;
		
	}
	.plan_ttl_high{
		font-size:18px;
	}
	.box_sample{
		border-left:8px solid rgba(0, 91, 127,0.08);
		border-top:0px;
	}

	.tbl-sample-price{
		font-size:16px;
	}
	.sample-price-before{
		display: inline;
		font-size:28px;
	}

	.sample-price-save{
		font-size:10px;
		padding:2px 5px;
	}
}


@media (min-width: 1200px) {
	.plan_box{
		font-size:14px;
	}
	.plan_ttl{
		font-size:20px;
		
	}
	.plan_ttl_high{
		font-size:22px;
	}

	.box_sample{
		border-left:8px solid rgba(0, 91, 127,0.08);
		border-top:0px;
	}
	.tbl-sample-price{
		font-size:16px;
	}

	.sample-price-before{
		display: inline;
		font-size:20px;
	}

	.sample-price-save{
		font-size:10px;
		padding:2px 5px;
	}
}



.area-opt:hover{
	color:rgba(0, 91, 127,1.0);
  }

.area-opt.active{
	background-color: #2dd9fc;
	background-image: linear-gradient(315deg, #2dd9fc 0%, #2D90FD 74%);	
	color:#fff;	
}



.box-area {
	padding:.75rem 0;
}

.tbl-mpp-disc{
	font-family: Roboto,sans-serif;
	font-size:12px;
	background-color:#fff;
}

@media (min-width: 576px) {
	.tbl-mpp-disc{
		font-size:12px;
	}
}

@media (min-width: 768px) {
	.tbl-mpp-disc{
		font-size:14px;
	}
}

@media (min-width: 992px) {
	.tbl-mpp-disc{
		font-size:16px;
	}
}


@media (min-width: 1200px) {
	.tbl-mpp-disc{
		font-size:16px;
	}
}

.table-hover tbody tr:hover {
	background-color: rgba(0, 171, 205,.075);
	font-weight:700;
	color:#005b7f;
}



.span_how_icon{
	width:75px;
	height:75px;
	padding:10px;
	border:2px solid #005b7f;
	border-radius:50%;
	background-color: #fff;
	display:inline-block; 
	text-align:center;
	z-index:9;
	position: relative;
}

@media (min-width: 576px) {
	.span_how_icon{
		width:75px;
		height:75px;
		padding:10px;
	}
}

@media (min-width: 768px) {
	.span_how_icon{
		width:75px;
		height:75px;
		padding:10px;
	}
	.span_how_icon.icon-1:after{
        content: "";
        position: absolute;
        left:100%;
        top:50%;
        width:110%;
        border-top:2px solid #005b7f;
        z-index:6;
    
	}
	.span_how_icon.icon-2:before{
        content: "";
        position: absolute;
        right:100%;
        top:50%;
        width:110%;
        border-top:2px solid #005b7f;
        z-index:6;
    
    }
	.span_how_icon.icon-2:after{
        content: "";
        position: absolute;
        left:100%;
        top:50%;
        width:110%;
        border-top:2px solid #005b7f;
        z-index:6;
    
	}
	.span_how_icon.icon-3:before{
        content: "";
        position: absolute;
        right:100%;
        top:50%;
        width:110%;
        border-top:2px solid #005b7f;
        z-index:6;
    
    }
	.span_how_icon.icon-3:after{
        content: "";
        position: absolute;
        left:100%;
        top:50%;
        width:110%;
        border-top:2px solid #005b7f;
        z-index:6;
    
	}
	.span_how_icon.icon-4:before{
        content: "";
        position: absolute;
        right:100%;
        top:50%;
        width:110%;
        border-top:2px solid #005b7f;
        z-index:6;
    
    }
}

@media (min-width: 992px) {
	.span_how_icon{
		width:80px;
		height:80px;
		padding:12px;
	}
}


@media (min-width: 1200px) {
	.span_how_icon{
		width:110px;
		height:110px;
		padding:20px;
	}

	
}

.col-line-bg{
	position: relative;
}

.col-line-bg::before{
	content: "";
	position: absolute;
	left:0;
	top:50%;
	width:100%;
	border-top:1px solid #dee2e6;
	z-index:6;
}

.sec_contact_us{
	position: relative;
	background: rgb(236,241,243);
	background: linear-gradient(241deg, rgba(236,241,243,1) 0%, rgba(236,241,243,1) 13%, rgba(255,255,255,1) 22%, rgba(255,255,255,1) 28%, rgba(211,222,227,1) 40%, rgba(216,225,230,1) 44%, rgba(236,240,243,1) 51%, rgba(255,255,255,1) 55%, rgba(235,242,245,1) 63%, rgba(228,240,246,1) 66%, rgba(255,255,255,1) 73%, rgba(255,255,255,1) 76%, rgba(245,249,250,1) 84%, rgba(235,242,245,1) 92%, rgba(235,242,245,1) 95%, rgba(235,242,245,1) 100%);	
}

@media (min-width: 768px) {
	.sec_contact_us .ttl-action{
		color:#fff;
	}
	.sec_contact_us:before{
		content:"";
		position: absolute;
		width:100%;
		height:100%;
		left:0;
		top:0;
		background: rgb(32,36,42);
		background: linear-gradient(130deg, rgba(32,36,42,0) 0%, rgba(32,36,42,0) 53%, rgba(32,36,42,1) 53%, rgba(32,36,42,1) 90%, rgba(70,73,76,1) 90%, rgba(70,73,76,1) 100%);
	}
}

.tnc_ol{
	list-style-type:decimal;
	padding: 0.35rem 0.75rem;
	font-family: "Roboto",sans-serif;
	marker-offset:3cm;
}

.tnc_ol li{
	margin-top:0.5rem;
	margin-bottom:0.75rem;
	margin-left: 1em;
}

.tnc_sub_ol{
	list-style-type: lower-latin;
	padding: 0.35rem 0.8rem;
	font-family: "Roboto",sans-serif;
}

.tnc_sub_ol li{
	margin-top:0.5rem;
	margin-bottom:0.75rem;
	margin-left: 1em;
}

.tnc_sub_sub_ol{
	list-style-type:lower-roman;
	padding: 0.35rem 0.8rem;
	font-family: "Roboto",sans-serif;
}

.tnc_sub_sub_ol li{
	margin-top:0.5rem;
	margin-bottom:0.75rem;
	margin-left: 1em;
}



.btn-excard{
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 1rem;
    line-height: 1.5;

    padding: 0.475rem 0.75rem;
    letter-spacing: 0.05rem;
    cursor: pointer;
    text-decoration: none!important;   
    text-transform: uppercase;
    border-radius: 0.35rem;
    transition: all 0.3s ease;

    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    text-align: center;
}

.btn-grn{
    background-color:#13C500!important;
    color: #fff!important;
    /*text-shadow: 1px 1px 2px rgba(11, 116, 0, 1);  */
  }
  
  .btn-grn:hover{
    background-color: #3eef2b;
    background-image: linear-gradient(315deg, #3eef2b 0%, #13C500 74%);
  }
  .btn-bl{
    background-color:#2D90FD;
    color: #fff!important;
    /*text-shadow: 1px 1px 2px rgba(0, 86, 178, 1);   */  
  }
  
  .btn-bl:hover{
    background-color: #2dd9fc;
    background-image: linear-gradient(315deg, #2dd9fc 0%, #2D90FD 74%);
  }
  
  .btn-bl-outline{
    border: 2px solid transparent;
    background-color: transparent!important;
    color:#2D90FD!important;
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #2D90FD,#2D90FD);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  .btn-bl-outline:hover{    
    color: #fff!important;
    background-image: linear-gradient(315deg, #2dd9fc 0%, #2D90FD 74%), radial-gradient(circle at top left, #2D90FD,#2dd9fc);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }  

  .btn-ppl{
    background-color:rgba(144,0,204,1)!important;
    color: #fff!important;
    /*text-shadow: 1px 1px 2px rgba(76, 0, 114, 1); */  
    
  }

  .btn-ppl:hover{
    background-color: #647dee;
      background-image: linear-gradient(326deg, #647dee 0%, #7700AF 74%);
      border-color:transparent;
  }
  
  .btn-yl{
    background-color:#fdb913!important;
    color: #fff!important;
    /*text-shadow: 1px 1px 2px rgba(183, 141, 23, 1);*/  
   
  }
  
  .btn-yl:hover{
    background-color: #ffed00;
    background-image: linear-gradient(315deg, #f7f706 0%, #fdb913 74%);
    border-color:transparent;
  }
  
  .btn-rd{
    background-color:#C72926!important;
    color: #fff!important;
    /*text-shadow: 1px 1px 2px rgba(148,46,50, 1);*/  
  }

  .btn-rd:hover{
    background-color: #FE3038;
    background-image: linear-gradient(315deg, #FE3038 0%, #C72926 74%);
    border-color:transparent;
  }

  .btn-gry{
    background-color: #E1E7E9;
    color: #37404C!important;
  }
  
  .btn-gry:hover{
    background-color: #E1E7E9;
    background-image: linear-gradient(315deg, #E1E7E9 0%, #d0dadd 74%);
    border-color:transparent;
  }

  @media screen and (min-width:320px) and (max-width:480px) {

    .btn-excard{
        font-size: 0.725rem;
        line-height: 1.45rem;
        padding: 5px;
        text-overflow: ellipsis; 
        overflow: hidden; 
        white-space: nowrap;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;  
    }
    
  }



  /* MPP plan table */
  
	table{
		max-width: 100% !important;
	}

	.mppTbl{
		border-collapse: separate;
		border-spacing: 10px 0px;
	}

	.mppTbl th{
		background-color: #000;
		color: #fff;
		padding: 10px;
		border: 1px solid #dee2e6;
		padding: 10px; 
		border-radius: 8px 8px 0px 0px;
	}

	.mppTbl .mpp-header{
		position: relative; 
		border-bottom: 10px solid transparent;
	}

	.mppTbl td{
		background-color: #fff;
		border: 1px solid #dee2e6; 
		padding: 8px 10px;
	}

	.mppTbl td:first-child{
		padding: 10px 15px;
	}

	.mppImg{
		width: 30%;
		filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	}

	@media screen and (max-width: 768px){
		.mppImg{
			width: 100%;
		}
	}

	.mppTbl .tblnone{
		background-color: transparent;
		border: none
	}

	.mppChk{
		font-size: 20px;
		color: #13C500;
	}

	.mppTm{
		font-size: 20px;
		color: #bdbdbd;
	}

	.mppTbl tr:nth-last-child(-n + 3){
		border-collapse: separate;
		border-spacing: 1px 0px;
	}

	.icn-str{
		color: #ffff2d;
		font-size: 12px;
	}

	.mppTbl .btn-topup{
		font-size: 14px; 
		border-radius: 30px;
	}

	.mppTbl .newUp{
		position: absolute; 
		top: -20px; 
		left: -20px; 
		width: 85px; 
		z-index: 1;
        
	}

	.mppTbl .trFirst{
		padding: 30px 15px 20px;
	}

    @-webkit-keyframes blinker {
        0%{opacity: 1.0;}
        100% {opacity: 0.0;}
    }
