/************************************************************************************
GENERAL STYLING
*************************************************************************************/
/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);*/

@font-face {
    font-family: Helvetica Neue;
    src: url('HelveticaNeue.woff') format('woff');
}

@font-face {
    font-family: MHeiHK;
    src: url('MHeiHK.woff') format('woff');
}

html,
body,
address,
blockquote,
div,
dl,
form,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
pre,
table,
ul,
dd,
dt,
li,
tbody,
td,
tfoot,
th,
thead,
tr,
button,
del,
ins,
map,
object,
abbr,
acronym,
b,
bdo,
big,
br,
cite,
code,
dfn,
em,
i,
img,kbd,q,samp,small,span,strong,sub,sup,tt,var,legend,fieldset {
  margin: 0;
  padding: 0;
  font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif;
  color: #fff;
  line-height: 180%;
  vertical-align: middle;

}

sup {
  font-size: 10px;line-height: 100%;
}

body {
  background: #1b1b1a;
}

img,
fieldset {
  border: 0;
}


/* set image max width to 100% */

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

a {
  color: #CEA272;
  text-decoration: none;
  outline: none;
  /* for Firefox */
  hlbr: expression(this.onFocus=this.blur());
  /* for IE */
  cursor: pointer;
	font-size: inherit;
}

a:hover {
  color: #CEA272;
  /*text-decoration: underline;*/
  cursor: pointer;
}

#pagehomecontent {
  width: 100%;
}

.mainvisualtable {
  padding-bottom: 10px
}

#photoheadline {
  font-size: 55px;
  font-weight: bold;
  line-height: 0%;
	display: inline-block;
	width: 88%;

}

.fontcolor1 {
  line-height: 50%;
  font-size: 55px;
  font-weight: 900;
  color: #09a89e
}

.fontcolor2 {
  line-height: 50%;
  font-size: 55px;
  font-weight: 900;
  color: #92278f
}

.fontcolor3 {
  line-height: 50%;
  font-size: 55px;
  font-weight: 900;
  color: #0475bc
}

.fontcolor4 {
  line-height: 50%;
  font-size: 55px;
  font-weight: 900;
  color: #f15a22
}

.fontcolor5 {
  line-height: 50%;
  font-size: 55px;
  font-weight: 900;
  color: #ed0677
}

.fontcolor6 {
  line-height: 50%;
  font-size: 55px;
  font-weight: 900;
  color: #0f9347
}

.fontcolor1en {
  line-height: 50%;
  font-size: 42px;
  font-weight: 900;
  color: #09a89e
}

.fontcolor2en {
  line-height: 50%;
  font-size: 42px;
  font-weight: 900;
  color: #92278f
}

.fontcolor3en {
  line-height: 50%;
  font-size: 42px;
  font-weight: 900;
  color: #0475bc
}

.fontcolor4en {
  line-height: 50%;
  font-size: 42px;
  font-weight: 900;
  color: #f15a22
}

.fontcolor5en {
  line-height: 50%;
  font-size: 42px;
  font-weight: 900;
  color: #ed0677
}

.fontcolor6en {
  line-height: 50%;
  font-size: 42px;
  font-weight: 900;
  color: #0f9347
}

#headline {
  font-size: 35px;
  font-weight: bold
}

#subheadline {
  font-size: 24px;
  font-weight: bold
}

#subheadlineen {
  font-size: 20px;
  font-weight: bold
}

.headlineop1 {
  font-size: 28px;
  font-weight: bold;
  line-height:120%
}

.headlineop2 {
  font-size: 35px;
  font-weight: bold;
  line-height:120%
}

.headlineop3 {
  font-size: 24px;
  font-weight: bold;
  line-height:120%
}

.headlineop2color {
  font-size: 35px;
  font-weight: bold;
  line-height:120%;
  color: #9f1994
}

.opremark {
  font-size: 14px;
  line-height:120%
}


#opstepPC {
  width: 99%;
  display: inline
}

#opstepMOB {
  width: 99%;
  display: none
}

/**** form ****/
.formheadercolor1 { background-color:#646464;color: #fff; }
.formheadercolor2 { background-color:#7e7e7e;color: #fff; line-height:140% }

.formformat { float: left; }
.validate_error { display: none; }
.formalerttxt { color: #FF0000; padding-top: 10px; padding-left: 20px }
.formpulldown { width: 100%; padding: 5px 5px 5px 5px; margin: 5px 0px 5px 0px; box-sizing: border-box; border: 1px solid #C5C5C5; border-radius: 5px; font-size: 20px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif;}
.formradio { display:inline-block; width: 99px }

.tariff_table {
	width: 980px;
	border-collapse: collapse; 
	border: 1px solid #D1D1D1
}

.tariff_table td {
	padding: 10px;
	border: 1px solid #D1D1D1
}

h1 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; }
h2 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; }
h3 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; }
h4 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; }
h5 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; }
h6 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; }
h7 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; }



.languageicon { width: 40px; padding-right: 0px; padding-top: 25px; }

.anametop { position:relative; top:-85px; display: block; }


/************************************************************************************
hide item css
*************************************************************************************/
.moydetailink { display: none !important; }



/************************************************************************************
kv
*************************************************************************************/
.offermsg { 
    position: absolute;left: 0px;bottom: 10px;width: 100%;height: auto;display: inline-block;text-align: center;
    font-size: 20px;font-weight: bold;line-height: 100%;color: #fff;text-shadow: 0px 0px 5px #000835; 
    padding: 8px 0px;background-image: linear-gradient(to right, #fff, #74cfe1, #fff);
}

.offermsgen { 
    position: absolute;left: 0px;bottom: 10px;width: 100%;height: auto;display: inline-block;text-align: center;
    font-size: 18px;font-weight: bold;line-height: 100%;color: #fff;text-shadow: 0px 0px 5px #000835; 
    padding: 8px 0px;background-image: linear-gradient(to right, #fff, #74cfe1, #fff);
}

.kvRframe { width: 45%;text-align: center;float: right;margin: 10px 0px; }


.copyright { padding: 30px 20px 30px 20px;text-align: center;}
.copyrighttxt { font-size: 12px;font-weight: bold; line-height: 120%;color: #fff;width: auto;height: auto;display: inline-block;text-align: left;  }


/************************************************************************************
note9 offer
*************************************************************************************/
.n9offerhstitle { font-size: 18px; font-weight: bold; color: #ffffff;text-shadow: 1px 1px 7px #000000; }
.n9offerhsorgprice { font-size: 14px; color: #ffffff;text-shadow: 1px 1px 5px #000000; }
.n9offertable { width: 980px; }
.n9offertablebg { background-image: url(offersection-bg.jpg); background-size: 100% 100%;padding: 80px 70px 20px 70px; }
.n9offerimage { width: 35%;display: inline-block;text-align: center;vertical-align: top; }
.n9offerheadline { width: 63%;display: inline-block;text-align: center;vertical-align: top;font-size: 30px;font-weight: bold;line-height: 120%;color: #ffffff;padding-top: 30px;text-shadow: 1px 1px 10px #000000; }
.n9offerheadlineprice { font-size: 60%;color: inherit;font-weight: bold;white-space: nowrap; }
.n9offersubheadline { font-size: 22px;font-weight: bold;line-height: 120%;display: inline-block;padding: 10px 0px 10px 0px; }
.n9offersubheadlineen { font-size: 18px;font-weight: bold;line-height: 120%;display: inline-block;padding: 10px 0px 10px 0px; }
.n9offerline { width: 200px; height: 5px;padding: 20px 0px; }

.topofferbanner { width: 350px; }
.topofferbanneren { width: 350px; }
/*.topofferbanneren { width: 270px; }*/

/************************************************************************************
3money handset
*************************************************************************************/
.mofferframemain1 { width: 22.5%; margin: 0px 10px 30px 10px; display: inline-block; vertical-align: top; text-align: center;}
.mofferframe1 { width: 100%; height: auto; border: #d5d5d5 3px solid; display: inline-block; border-radius: 20px; text-align: center; cursor: pointer;position: relative; background-color: #ffffff;transition: border 0.5s;-webkit-transition: border 0.5s;-moz-transition: border 0.5s; }
.mofferframe1:hover { border: #CEA272 3px solid; }
.mofferpricetxtframe { width: 100%;display: inline-block;text-align: center; }
.mofferpricetxt { font-weight: bold; }
.mofferselect1 { display: inline-block; background-color: #CEA272; color: #000; font-size: 15px; font-weight: bold; width: 40%;  padding: 5px 0px; bottom: 0; margin: 10px 0px;transition: background 0.5s;-webkit-transition: background 0.5s;-moz-transition: background 0.5s; }
.mofferselect1:hover { background-color: #CEA272; }

.moyphoneframe { width: 20%;display: inline-block;vertical-align: top; }
.moyphonetableframe {width: 78%; display: inline-block;vertical-align: top;margin-top: 10px; }

.moypricetitle { font-size: 16px;line-height: 100%; }
.moyprice { font-size: 20px;font-weight: bold;line-height: 120%;color: #CEA272; }
.moydisprice { font-size: 16px;font-weight: bold;line-height: 120%; }
.moydispriceen { font-size: 16px;font-weight: bold;line-height: 120%; }
.moyorgprice {font-size: 10px;}

.moypopuptablewidth { width: 98%; margin: 0px 0px 0px 0px; }

.moypoptitle { display: inline-block;font-size: 22px;color: #CEA272;font-weight: bold; }
.moypopsubtitle { display: inline-block;font-size: 16px;color: #fff;font-weight: bold; }
.moypopsubtxt { display: inline-block;font-size: 14px;color: #fff;font-weight: normal; }
.moypopsubtxten { display: inline-block;font-size: 14px;color: #fff;font-weight: normal; }
.moydetailink { font-size: 16px; display: inline-block;font-weight: bold; text-decoration: underline; }
.moyremark { display: inline-block;font-size: 12px;color: #fff;font-weight: normal; width: 98%; }
.moylike { width: 25px;vertical-align: -6px }

.moypoptxt { padding:5px 10px; background-color: #0085a6; color: white; font-size: 18px; border-radius: 6px; display: inline-block; }
.moypoptxten { padding:5px 7px; background-color: #0085a6; color: white; font-size: 12px; border-radius: 6px; display: inline-block; }

.tmptablemoy { border-collapse: collapse; border: 1px solid #979797; padding: 2px; text-align: center; height: 25px; font-size:16px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }

.moysampleheader { CURSOR: pointer;width:97%; background: #dcefec;display: inline-block;font-size: 14px;padding: 5px 5px;color: #246784;border-radius: 3px; }
.moysampleheaderen { CURSOR: pointer;width:97%; background: #dcefec;display: inline-block;font-size: 14px;padding: 5px 5px;color: #246784;border-radius: 3px; }
.moysampleopen { width: 15px; vertical-align: -2px; }


/************************************************************************************
3money
*************************************************************************************/
.giftb { width: 95px }

.infosection { background-color: #000;padding: 50px 0px; }
.samplesection { background-color: #262626; padding: 50px 0px; }
.howsection { background-color: #000; padding: 50px 0px; }
.faqsection { background-color: #262626; padding: 50px 0px; }
.tncsection { background-color: #000; padding: 50px 0px; }
.sectiontable { width: 1200px; }
.kvtexttitle { display: inline-block;font-size: 26px;font-weight: bold;line-height: 120%;color: #CEA272; }
.kvtexttitleen { display: inline-block;font-size: 18px;font-weight: bold;line-height: 120%;color: #CEA272; }
.kvtext { width: 90%; display: inline-block;text-align: justify;line-height: 130%;color: #000; }
.kvtexten { width: 80%; display: inline-block;text-align: justify;line-height: 130%;font-size: 14px;font-weight: bold;line-height: 120%;color: #000; }
.kvtexttop { padding-top: 10px }
.kvtexttopen { padding-top: 10px }

.infobox { display: inline-block; width: 15%; height: 240px; margin: 0px 15px; background-color: #000; border-radius: 3px;text-align: center;padding: 10px;vertical-align: top; }
.infoboxen { display: inline-block; width: 15%; height: 240px; margin: 0px 15px; background-color: #000; border-radius: 3px;text-align: center;padding: 10px;vertical-align: top; }
.indogrp { width: 80%;display: inline-block; }
.indogrpen { width: 80%;display: inline-block; }
.infoicon { width: 100%;padding-bottom: 10px }
.infotext { width: 100%;display: inline-block; }
.infotexten { width: 100%;display: inline-block; }
.infotitle { font-size: 20px;font-weight: bold;display: inline-block; }
.infotitleen { font-size: 16px;font-weight: bold;display: inline-block; }
.infocontent { font-size: 16px;display: inline-block; padding-top: 10px; }

.samplebox { width: 75%; display: inline-block;margin: 10px 30px;line-height: 0%; }
.sampletitle { font-size: 28px; padding-bottom: 20px; color: #fff; font-weight: bold; display: inline-block;line-height: 100%; }
.samplesubtitle { font-size: 20px; padding-bottom: 10px; display: inline-block;line-height: 120%; }
.samplesubtitleen { font-size: 18px; padding-bottom: 10px; display: inline-block;line-height: 120%; }
.sampletitlebox { width: 96%;display: inline-block; background-color: #AB8763; border-radius: 3px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;text-align: center;padding: 25px 10px;line-height: 100%; }
.sampletdtitle { font-size: 20px; font-weight: bold;line-height: 100%; }
.sampletdtitleen { font-size: 16px; font-weight: bold;line-height: 100%; }
.samplecontentbox { width: 96%;display: inline-block; background-color: #ffffff; border-radius: 3px;border-top-left-radius: 0;border-top-right-radius: 0;text-align: center;padding: 50px 10px;line-height: 100%; }
.sampletdcontent { font-size: 20px; font-weight: bold;line-height: 140%; }
.sampletdcontenten { font-size: 16px; font-weight: bold;line-height: 140%; }

.faqbox { background-color: #404040;border-radius: 3px; padding: 10px; margin: 20px 0px;  }
.faqopenarea { float: right; padding-top: 15px; padding-right: 5px }
.faqopen { width: 20px; }
.faqqu { font-size: 18px; color: #CEA272; font-weight: bold; padding: 15px 0px; display: inline-block;}
.faqans { font-size: 18px; font-weight: normal; padding-bottom: 15px; display: inline-block; }
.faqsubtitle { font-size: 24px; color: #fff; font-weight: bold; display: inline-block;line-height: 100%; text-decoration: underline; }


.tmptable { border-collapse: collapse; border: 1px solid #979797; padding: 2px; text-align: center; height: 38px; font-size:16px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
.tmptableheader { background-color: #CEA272; color: #ffffff; font-weight: normal; width: 10%; }
.tmptableprice { font-size: 16px; color: #fff; font-weight: bold; }
.tmptabledis { font-size: 14px; color: #a1a1a1; font-weight: normal; }

.plantablescroll {  }

.largetnc { font-size: 20px; line-height: 140%;font-weight: bold; }
.largetncen { font-size: 16px; line-height: 140%;font-weight: bold; }

/************************************************************************************

*************************************************************************************/
.tmpheadline1 { font-size:66px; color:#ffffff; line-height:100%; font-weight: bold; letter-spacing: 10px; }
.tmpheadline2 { font-size:46px; color:#ffffff; line-height:200%; font-weight: bold; letter-spacing: 10px; }

.mobileimg { width: 491px; height: 461px }

.qrcodeframe { width: 230px; height: 260px; background: rgba(255, 255, 255, 0.5); border-radius: 10px; text-align: center; float: left }
.maincontenttable { width: 495px; }

.qrcodesize { width: 120px; padding: 30px 0px 20px 0px }
.dlappsize { width: 171px }

.appbottomspace { width: 495px; clear:both; height: 100px; text-align: center; color: #ffffff; font-size: 18px; padding-top: 12px }

#tmpheadlineen { font-size:36px; color:#124981; line-height:100%; font-weight: bold }
.tmpheadlinenowrap { font-size:36px; color:#124981; line-height:100%; white-space: nowrap; font-weight: bold }
.tmpheadlinenowrapen { font-size:36px; color:#124981; line-height:100%; white-space: nowrap; font-weight: bold }
.tmpfontcolor01 { color:#000000; font-size: 70% }
.tmpfontcolor02 { color:#124981; font-size: 120%; line-height: 140% }
.tmpheadlinesup { vertical-align: 26px; font-size:10px; color: #124981; }

#tmptableheadline { font-size:24px; color: #CEA272; text-align: center; width: 100%; clear:both; font-weight: bold; }
#tmpofferheadline { font-size:24px; color: #000000; text-align: center; width: 100%; clear:both; font-weight: bold; }
.tmpofferheadlinenowrap { font-size:24px; color: #000000; white-space: nowrap; font-weight: bold; }
#tmpofferheadlineen { font-size:20px; color: #000000; text-align: center; width: 100%; clear:both; font-weight: bold; }
.tmpofferheadlinenowrapen { font-size:20px; color: #000000; white-space: nowrap; font-weight: bold; }
#tmptableheadlineen { font-size:24px; color: #CEA272; text-align: center; width: 100%; clear:both; font-weight: bold; }

.pdtframe { width: 150px; display: inline-block }
#tmpplus2 { vertical-align: 160px; height:50px; width:80px; display: inline-block; font-size:30px; color:#000000; text-align:center; line-height:100%; padding: 0px 5px 0px 5px; }
#tmpplus { vertical-align: 160px; height:50px; width:20px; display: inline-block; font-size:30px; color:#000000; text-align:center; line-height:100%; padding: 0px 5px 0px 5px; }
#tmppdtphoto { width:150px; display: inline-block; padding: 0px 0px 0px 0px }
#tmppdtdes { width:150px; font-size:16px; line-height: 160%; display: inline-block; text-align:center; color: #000000; padding: 5% 0px 0px 0px; }


.popuptablewidth { width: 98%; margin: 0px 0px 0px 0px; }
.tablewidth { width: 980px }
.benefitstablewidth { width: 1200px }
.infotablewidth { width: 80%; padding: 0px 0px 0px 0px }
.infotablewidth2 { width: 60%; padding: 0px 0px 0px 0px }

.tncfaqtale { height: 170px; padding-top: 10px; cursor: pointer }
.tncfaqtale2 { height: 170px; padding-top: 10px; }
.tncfaqtale3 { height: 175px; padding-top: 10px; }

.displaypc { display: inline-block !important; }
.displaymob { display: none !important; }


.tmpsup { vertical-align: super; font-size:10px; line-height: 0%; color: #000000; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
.pdtname { white-space: nowrap }

.termstxttc { font-size:12px; line-height: 140% }
.termstxten { font-size:10px }

#tmpoffertableheadline { font-size: 20px; color: #0354a5; text-align: center; width: 100%; clear:both; font-weight: bold; }
.tmpoffertableheadlinenowrap { font-size: 20px; color: #0354a5; text-align: center; width: 100%; clear:both; font-weight: bold; white-space: nowrap }


.tmpoffermainheadline { font-size: 20px; color: #fff; font-weight: bold; }
.tmpoffercontent { font-size: 16px; line-height: 120%; color: #fff }
.tmpoffercontent1 { font-size: 12px; line-height: 180%; color: #fff }
.tmpoffermainheadlineen { font-size: 16px; color: #fff; font-weight: bold; }
.tmpoffercontenten { font-size: 14px; line-height: 120%; padding-bottom: 20px }

.tmpgovtable { background-image: url(../images/bg-pc.jpg); width: 100%; height: 100px; background-size: 100% 450px; }
.tmpgovwording { font-size:50px; color:#ffffff; line-height:100%; font-weight: bold; }
.tmpgovwordingen { font-size:36px; color:#ffffff; line-height:100%; font-weight: bold; }

#topmenutxt {
  font-size: 18px;
  clear: both;
  color: #000;
  margin: 20px 0px 20px 0px;
  font-weight: bold;
  pointer-events: none;
}

#topmenutxten {
  font-size: 15px;
  clear: both;
  color: #000;
  margin: 10px 30px 10px 30px;
  font-weight: bold;
  pointer-events: none;
}

.topmenu3up {
  background: #CEA272;
  width: 240px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 3px 10px 3px 10px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
	border-radius: 3px;
}

.topmenu3up:hover {
  background: #CEA272;
}

#samplebuttxt {
  font-size: 18px;
  clear: both;
  color: #CEA272;
  margin: 20px 0px 20px 0px;
  font-weight: bold;
  pointer-events: none;
}

.samplebut {
	border: #CEA272 2px solid;
  width: 250px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
	border-radius: 3px;
}

.samplebut:hover {
	border: #CEA272 2px solid;
}



.formsubmit {
    background:#CEA272;
    color: #000;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    width: 140px;
    height: 42px;
    margin: 10px;
    font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; 
}

.formsubmit:hover {
  color: #fff;
}

.formreset {
    background-color: #CEA272;
    color: #000;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    width: 140px;
    height: 42px;
    margin: 10px;
    font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; 
}

.formreset:hover {
  color: #fff;
}

.topmenubuten {
  background: #e4376d;
  background-image: -webkit-linear-gradient(top, #fa94a6, #e4376d);
  background-image: -moz-linear-gradient(top, #fa94a6, #e4376d);
  background-image: -ms-linear-gradient(top, #fa94a6, #e4376d);
  background-image: -o-linear-gradient(top, #fa94a6, #e4376d);
  background-image: linear-gradient(to bottom, #fa94a6, #e4376d);
  width: 240px;
  height: 60px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
  border-radius: 30px;
}

.topmenubuten:hover {
  background: #ef658a;
}

.tmptrheader { background-color: #E45785; font-weight:bold; height: 50px; color:#FFFFFF; }


.gototop { width: 96%; text-align:right }

#tmpheight5px {width:10px; clear:both; height: 5px}
#tmpheight10px {width:10px; clear:both; height: 10px}
#tmpheight15px {width:10px; clear:both; height: 15px}
#tmpheight20px {width:10px; clear:both; height: 20px}
#tmpheight30px {width:10px; clear:both; height: 30px}
#tmpheight40px {width:10px; clear:both; height: 40px}
#tmpheight50px {width:10px; clear:both; height: 50px}
#tmpheight60px {width:10px; clear:both; height: 60px}
#tmpheight80px {width:10px; clear:both; height: 80px}
#tmpheight90px {width:10px; clear:both; height: 90px}
#tmpheight100px {width:10px; clear:both; height: 100px}
/*-- main visual --*/
#tmpmainvisual { width: 100%; clear:both; background-color: #ffffff; }
#tmpmainvisualen { width: 100%; clear:both; background-color: #ffffff; }
/*-- main visual --*/




/*-- position --*/
#tmpmaincenter { width: 100%; text-align: center; padding: 0px 0px 0px 0px; line-height: 0%; }
#tmpmainleft { width: 740px; height: 340px; text-align:left; padding: 210px 0px 0px 10px }
#tmpmainright { width: 400px; height: 350px; text-align:left; padding: 130px 0px 0px 350px }
/*-- position --*/
/*-- content position --*/
#tmpcontentleft { width:100%; clear:both; text-align:left; color: #000000; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
#tmpcontentcenter { width:100%; clear:both; text-align:center; color: #000000; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
#tmpcontentright { width:100%; clear:both; text-align:right; color: #000000; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
#tmpaligncenter { width:980px; margin: auto; }
/*-- content position --*/




#tmpsubheadline { font-size:28px; color:#000000; line-height:120%; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }


.tmpfontcolor03 { color:#8a4099; font-size: 140% }
#tmpcontainer { margin:auto; width: 99% }

.tmpgroupheadline { font-size:18px; color: #000000; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
#tmpcircleCH { background-color:#8a4099; height:35px; width:35px; float:left; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; text-align:center; font-size:20px; color:#ffffff; line-height:160%; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
#tmpcircleEN { background-color:#8a4099; height:35px; width:35px; float:left; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; text-align:center; font-size:11px; color:#ffffff; line-height:270%; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
#tmpor { height:150px; width:20px; float:left; font-size:20px; color:#000000; text-align:center; line-height:670%; padding: 0px 5px 0px 5px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
#tmppdtcenter { font-size:16px;  width:150px; float:left; text-align:center; color: #000000; padding: 5px 5px 5px 5px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
.tmppdtcenter2 { font-size:16px; width:320px; float:left; text-align:center; color: #000000; padding: 5px 5px 5px 5px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
.tmppdtphoto { width:100%; }
.tmppdtprice { font-size:11px; color: #000000; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
.tmpul { width:90%; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif;}
.tmpli { font-size:18px; color: #D1007B; line-height:150%; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif;}
#tmpterms { font-size:13px; color: #000000; width:96%; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
/*-- tariff table --*/
.tmptdboth { padding: 5px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
.tmptrcolor { background-color: #FFEDF8;}
.tmplinkcolor { font-size:14px;  color: #000000 }
.tmptextlarge { font-size: 120%; font-weight:bold }
.tmptable2 { text-align: center; font-size:20px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }

/*-- function table --*/
.tmptdfunction { padding: 10px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
/*-- button --*/
.tmpmenutxt { font-size: 22px; margin: 10px 15px 10px 15px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; }
.tmpmenuform { text-align:center; width:200px; background: #8a4099; color: #ffffff; border:solid 1px #8a4099; font-weight:bold; transition: background 0.5s; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; margin: 0px; padding: 0px; cursor:pointer; }
.tmpmenuform:hover { border:solid 1px #8a4099; background: #ffffff; color: #8a4099; }


/************************************************************************************
VIDEO
*************************************************************************************/

.starvideocontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.starvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/************************************************************************************
BUTTON
*************************************************************************************/

#topmenuposition {
  width: 33%;
  float: right;
}

#menuposition {
  width: 99%;
}


#menutxt {
  font-size: 20px;
  clear: both;
  color: #FFFFFF;
  margin: 13px 30px 0px 30px;
  font-weight: bold;
  pointer-events: none;
}

#menutxten {
  font-size: 18px;
  clear: both;
  color: #FFFFFF;
  margin: 15px 30px 0px 30px;
  font-weight: bold;
  pointer-events: none;
}

#menu1 {
  background: #662d91;
  width: 180px;
  height: 40px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block
}

#menu1:hover {
  background: #901fe5;
}

#menu2 {
  background: #c30005;
  width: 180px;
  height: 40px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block
}

#menu2:hover {
  background: #dd1016;
}

#menu3 {
  background: #0072bc;
  width: 180px;
  height: 40px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block
}

#menu3:hover {
  background: #1796e8;
}

.menu1up {
  background: #9f5bd4;
  background-image: -webkit-linear-gradient(top, #9f5bd4, #672e92);
  background-image: -moz-linear-gradient(top, #9f5bd4, #672e92);
  background-image: -ms-linear-gradient(top, #9f5bd4, #672e92);
  background-image: -o-linear-gradient(top, #9f5bd4, #672e92);
  background-image: linear-gradient(to bottom, #9f5bd4, #672e92);
  width: 200px;
  height: 60px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  border-radius: 10px;
}

.menu1up:hover {
  background: #8445b4;
}

.menu2up {
  background: #fe4a50;
  background-image: -webkit-linear-gradient(top, #fe4a50, #c40107);
  background-image: -moz-linear-gradient(top, #fe4a50, #c40107);
  background-image: -ms-linear-gradient(top, #fe4a50, #c40107);
  background-image: -o-linear-gradient(top, #fe4a50, #c40107);
  background-image: linear-gradient(to bottom, #fe4a50, #c40107);
  width: 200px;
  height: 60px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block
}

.menu2up:hover {
  background: #e02529;
}

.menu3up {
  background: #48b6ff;
  background-image: -webkit-linear-gradient(top, #48b6ff, #0172bd);
  background-image: -moz-linear-gradient(top, #48b6ff, #0172bd);
  background-image: -ms-linear-gradient(top, #48b6ff, #0172bd);
  background-image: -o-linear-gradient(top, #48b6ff, #0172bd);
  background-image: linear-gradient(to bottom, #48b6ff, #0172bd);
  width: 200px;
  height: 60px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  border-radius: 10px;
}

.menu3up:hover {
  background: #2392dd;
}

.menu4up {
  background: #425ab0;
  background-image: -webkit-linear-gradient(top, #5b76d4, #2f4493);
  background-image: -moz-linear-gradient(top, #5b76d4, #2f4493);
  background-image: -ms-linear-gradient(top, #5b76d4, #2f4493);
  background-image: -o-linear-gradient(top, #5b76d4, #2f4493);
  background-image: linear-gradient(to bottom, #5b76d4, #2f4493);
  width: 250px;
  height: 60px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  border-radius: 10px;
}

.menu4up:hover {
  background: #425ab0;
}











.topmenugohome {
  background: #CEA272;

  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
	width: 150px;
}

.topmenugohome:hover {

}

.topmenugohomeen {
  background:#CEA272;

  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
}

.topmenugohomeen:hover {

}






/************************************************************************************
FORM
*************************************************************************************/

.input {
  width: 100%
}

#formtitle {
  clear: both;
  width: 100%;
  line-height: 150%;
  padding-top: 20px
}

#forminput {
  clear: both;
  width: 100%;
}



/************************************************************************************
TOP
*************************************************************************************/

#topbutton {
  padding: 0px 0px 10px 0px;
	display: inline-block;
	width: 5%;
	vertical-align: top;
}

#logoheader3d {
  background: #ffffff;
  clear: both;
}

#hklogo3d {
  float: left;
  padding: 20px 30px 15px 20px;
}

.logo3d {
  width: auto;
  height: 64px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#topmainbutton {
	/*background-image: url(bg-top.png);
	background-repeat: repeat-x;
	background-position: top;*/
  width: 100%;
  clear: both;
  position: fixed;
  z-index: 999;
  height: 100px;
}

#topheight {
  clear: both;
  height: 93px
}

#logoheader {
  background: #ffffff;
  clear: both;
  padding: 15px 30px 10px 30px;
}

#topheader {
  clear: both;
  padding: 15px 0px 10px 0px;
	text-align: center
}

#hklogo {
  float: right;
  padding: 0px 0px 10px 0px;
}

#bblogo {
  float: left;
  padding: 0px 0px 10px 0px;
}

.logo {
  width: 68px;
  height: 95px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.logo3bb {
  width: 79px;
  height: 95px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.appicon {
  width: 104px;
  height: 104px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#apptable {
  width: 450px;
  border: #006f6c solid 4px;
  border-radius: 20px;
  clear: both;
  color: #000000;
  padding: 10px 0px 10px 0px
}

.appicontd {
  padding-right: 20px;
  line-height: 0%
}

.appdlicontd {
  padding-top: 15px;
  width: 70%
}

#remindertable {
  width: 90%;
  border: #92278f solid 4px;
  border-radius: 15px;
  clear: both;
  color: #000000;
  padding: 10px 10px 10px 10px;
  text-align: left
}

.remindertd {
  text-align: left
}

.qr {
  display: inline
}

.noqr {
  display: none
}

#appstep {
  width: 32%;
  padding: 0px 10px 25px 10px;
	font-size: 18px;
	line-height: 140%;
	display: inline-block;
	vertical-align: top;
}

#appstepen {
  width: 40%;
  padding: 0px 10px 25px 10px;
	font-size: 16px;
	line-height: 140%;
	display: inline-block;
	vertical-align: top;
}

.steptitle {
  font-size: 24px;
  font-weight: bold
}


/************************************************************************************
List
*************************************************************************************/

.questiontext {
  font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif;
  font-size: 25px;
  line-height: 100%;
  color: #000000;
}


/****** faqbut2 *******/

#faqbut02 {
  background: #ffffff;
  cursor: pointer;
  margin: 0px 0px 0px 0px;
}

#faqbut02a {
  background: #d5e6fb;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  float: left;
  color: #19467d;
}

#faqbut02a:hover {
  color: #ffffff;
  background: #4687d6
}

.faqquestion {
  width: 100%;
  text-align: left
}

#butfaq1 {
  font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif;
  font-size: 25px;
  margin: 8px 10px 8px 10px;
  text-align: center;
  font-weight: bold;
}

.merchant_wrapper {
  display: inline-block;
  width: 32%;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
}

.top {
  width: 23px;
  height: 20px;
  margin: 10px 0px 20px 0px;
  padding: 0px 0px 0px 0px;
}


/************************************************************************************
TOP MAIN
*************************************************************************************/

#topmain {
  clear: both;
  height: 460px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#topcontainer {
  height: 449px;
  padding: 0px 30px 0px 30px;
}

#topmaincontent {
  float: left;
  width: 55%;
  padding: 0px 20px 0px 0px;
}

#topmainphoto {
  float: right;
  width: 40%;
}

.toptableheight {
  height: 449px
}

.topmainphotowidth {
  width: 100%
}


/************************************************************************************
Content
*************************************************************************************/

#type01 {
  float: left;
  width: 20%;
  text-align: center;
  padding-bottom: 15px
}

.type01icon {
  width: 100px
}

#type02 {
  float: left;
  width: 20%;
  text-align: center;
  padding-bottom: 15px
}

.type02icon {
  width: 100px
}

.mainvisual {
  width: 100%;
  line-height: 0%;
  padding-bottom: 0px;
}

.upgradephoto {
  width: 100%;
  padding-top: 50px
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#tvc_pc {
  margin: 0px 0px 0px 0px;
  text-align: center;
}

#tvc_mob {
  display: none
}

#contentsaving {
  float: left;
  width: 50%;
  padding: 0px 0px 0px 0px;
}

.contentsavingtd {
  padding: 0px 25px 0px 25px;
}

#contentgame {
  float: left;
  width: 50%;
  padding: 0px 0px 0px 0px;
}

.contentgametd {
  padding: 0px 0px 0px 25px;
  text-align: left
}

.contenttoptd {
  padding: 50px 0px 0px 25px;
  text-align: center;
}

#contentsavingspace {
  clear: both;
  height: 50px
}

#contentcontainer {
  padding: 0px 30px 0px 30px;
}

#line {
  padding: 0px 0px 0px 0px;
}

#contentcenter {
  width: 100%;
  text-align: center
}

#contentallleft {
  float: left;
  width: 100%;
  padding: 0px 0px 0px 0px;
}

#contentleft {
  float: left;
  width: 100%;
  padding: 0px 0px 0px 0px;
}

#contentright {
  float: right;
  width: 60%;
  padding: 0px 0px 0px 0px;
  text-align: left
}

#photoleft {
  float: left;
  width: 40%;
}

#photorightnormal {
  float: right;
  width: 40%;
}

#photoright {
  float: right;
  width: 40%;
}

#photoright2 {
  float: right;
  width: 40%;
  display: none;
}

#appiconleft {
  float: left;
  width: 15%;
  padding: 12px 20px 0px 0px;
}

#appcontentright {
  float: left;
  width: 80%;
  text-align: left;
}

#floatleft25 {
  float: left;
  text-align: left;
  width: 25%;
}

#floatleft50 {
  float: left;
  text-align: left;
  width: 50%;
}

#photo33 {
  width: 33%;
  float: left;
  text-align: center
}

#photo34 {
  width: 34%;
  float: left;
  text-align: center
}

#photocenter {
  width: 100%;
  text-align: center
}

.mainphoto_pc {
  width: 100%;
}

.mainphoto_mob {
  display: none;
  width: 100%;
}

#tnc {
  width: 100%;
  clear: both;
  font-size: 15px;
  line-height: 150%;
}

.form1 {
  height: 800px;
}


/************************************************************************************
NEW
*************************************************************************************/

#language {
  width: 100%;
  height: 30px;
  clear: both;
  background: #f1f1f1;
  padding: 5px 0px 0px 0px;
}

#mobilesubmenu {
  display: none;
}

#home {
  float: right;
  padding: 3px 10px 0px 0px;
  line-height: 100%;
}

#langtext {
  float: right;
  padding: 3px 10px 0px 10px;
  font-size: 12px;
  font-weight: bold;
}

#langtext a {
  color: #000000;
}

.homeicon {
  width: 15px;
  height: 12px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#topcolorgroup {
  width: 100%;
  clear: both;
}

#topcolorblue {
  width: 33%;
  height: 10px;
  background: #27a8ec;
  float: left;
}

#topcolormagenta {
  width: 34%;
  height: 10px;
  background: #ff0072;
  float: left;
}

#topcolorgreen {
  width: 33%;
  height: 10px;
  background: #8ad12e;
  float: left;
}


/************************************************************************************
SPACE
*************************************************************************************/

#height5px {
  clear: both;
  height: 5px
}

#height10px {
  clear: both;
  height: 10px
}

#height15px {
  clear: both;
  height: 15px
}

#height20px {
  clear: both;
  height: 20px
}

#height50px {
  clear: both;
  height: 50px
}

#height80px {
  clear: both;
  height: 80px
}

#height02 {
  clear: both;
  height: 55px
}

#height03 {
  clear: both;
  height: 35px
}

#height04 {
  clear: both;
  height: 55px
}

#height05 {
  clear: both;
  height: 15px
}

#height06 {
  clear: both;
  height: 5px
}

#height07 {
  clear: both;
  height: 0px
}

#simplus {
  float: left
}

.simcenter1 {
  margin: auto;
  width: 500px;
}

.simcenter2 {
  margin: auto;
  width: 50px;
}

#width01 {
  float: left;
  width: 10px;
  line-height: 100%
}

#width03 {
  float: left;
  width: 30px;
  line-height: 100%
}

.width02 {
  width: 30%
}


/************************************************************************************
FOOTER
*************************************************************************************/

#pagefooter {
  width: 100%;
  height: 30px;
  clear: both;
  background: #f1f1f1;
  padding: 10px 0px 0px 0px;
}

#pagefooteren {
  width: 100%;
  height: 30px;
  clear: both;
  background: #f1f1f1;
  padding: 10px 0px 0px 0px;
}

#footer {
  clear: both;
}

#footer a {
  color: #959595;
}

#copyright {
  font-size: 10px;
  color: #959595;
  padding: 2px 0px 0px 10px;
  float: left;
}

#chlogo {
  float: right;
  padding: 0px 10px 0px 0px;
}

#chlogoen {
  float: right;
  padding: 0px 10px 0px 0px;
}


/************************************************************************************
STRUCTURE
*************************************************************************************/

#pagewrap {
  width: 100%;
  margin: 0 auto;

}

#pagetop {
  width: 95%;
  margin: 0 auto;
}


/************************************************************************************
CLEARFIX
*************************************************************************************/

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

.clearfix {
  display: block;
  zoom: 1;
}
