/************************************************************************************
GENERAL STYLING
*************************************************************************************/

/* @import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css); */
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: "NotoSansTC-Bold", Helvetica, Arial, sans-serif;
  color: #000000;
  font-size: 18px;
}

sup {
  font-size: 10px;
}

body {
  background: #ffffff;
}

img,
fieldset {
  border: 0;
}


/* set image max width to 100% */

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

a {
  color: #ffcc00;
  text-decoration: underline;
  outline: none;
  /* for Firefox */
  hlbr: expression(this.onFocus=this.blur());
  /* for IE */
  cursor: pointer;
}

a:hover {
  color: #ffa800;
  text-decoration: underline;
  cursor: pointer;
}

#pagehomecontent {
  width: 100%;
}

.mainvisualtable {
  padding-bottom: 10px
}

#photoheadline {
  font-size: 55px;
  font-weight: bold;
  line-height: 0%;
  float: left;
  height: 150px
}

.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: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, 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
}

.anametop { position:relative; top:-70px; display: block; }


/************************************************************************************

*************************************************************************************/

.headerbg { width: 100%; height: 530px; background-image: url(landing-pc-tc.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.headerbgen { width: 100%; height: 1167px; background-image: url(landing-pc-en.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; }

.mnpoffericon { width: 20%; padding: 0px 10px; vertical-align: top; display: inline-block }
.mnpoffertxt { width: 75%; vertical-align: top; display: inline-block; text-align: left; }



.menubgtop { width: 100%; height: 30px; background-image: url(appmenutop.png); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.menubgbottom { width: 100%; height: 30px; background-image: url(appmenubottom.png); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.menuappicon { display: inline-block; width: 120px; height: 120px; padding: 0px 15px; }

.tmpheadline { font-size: 2.25em; color:#000000; line-height:120%; font-weight: bold; color: #ffffff; text-shadow: 0px 0px 8px #000000; }
.ppcontent { font-size: 1.2em; color:#000000; line-height:180%; color: #ffffff; text-shadow: 0px 0px 5px #000000; font-family: "NotoSansTC-Bold", Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; line-height: 140%; }
.titleflower { vertical-align: -30px }
.contentappiconflower { display: inline-block; width: 69px; height: auto; vertical-align: top; }
.contentappicon { display: inline-block; width: 15%; vertical-align: top; padding-right: 10px; }
.contentapptxt { width: 82%; vertical-align: top; display: inline-block; text-align: left; line-height: 180%; }
.book { width: 200px }

.car { width: 30%; display: inline-block; }
.cd { width: 16%; display: inline-block; }
.mov { width: 16%; display: inline-block; }


.sectionline { padding: 20px 0px 50px 0px; }


.moredetailbut {
  background: url(bg_button.jpg) no-repeat;
  background-size: 250%;
  background-position: 0% 95%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
}

.moredetailbut:hover {
  background: url(bg_button.jpg) no-repeat;
  background-size: 240%;
}

#moredetailtxt {
  font-size: 14px;
  clear: both;
  color: #FFFFFF;
  margin: 20px 80px 20px 80px;
  pointer-events: none;
  text-transform: uppercase;
  font-weight: 700;
}


.framelocalsim { background-image: url(bg-local.jpg); background-size: cover; background-position: center top; height: 270px; width: 50%; float: left; padding: 40px 0px; display: inline-block; }
.buttoplocalsim { margin-top: 90px }

.frametravelsim { background-image: url(bg-travel.jpg); background-size: cover; background-position: center top; height: 270px; width: 50%; float: left; padding: 40px 0px; display: inline-block; }
.buttoptravelsim { margin-top: 120px }

.framecnhkmosim { background-image: url(bg-cnhkmo.jpg); background-size: cover; background-position: center top; height: 270px; width: 100%; padding: 40px 0px; display: inline-block; }
.buttopcnhkmosim { margin-top: 120px }
.buttopcnhkmosimen { margin-top: 120px }

.frameothersim { background-image: url(bg-widget.jpg); background-size: cover; background-position: center top; width: 100%; padding: 40px 0px; display: inline-block; }

.othersimbox { width: 19%; height: 360px; background-color: #ffffff; border-radius: 8px; box-shadow: 4px 4px 15px 0 rgba(64,64,64,0.5); padding: 4% 2%; display: inline-block; text-align: left; vertical-align: top; cursor: pointer; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }
.othersimbox:hover { -ms-transform: scale(1.01); -moz-transform: scale(1.01); -webkit-transform: scale(1.01); -o-transform: scale(1.01); transform: scale(1.01);  }
.othersimboxspace1 { margin-right: 2%; }
.othersimboxspace2 { margin-right: 0%; }
.othersimboxspace3 { margin-right: 2%; }
.othersimpic { width: 100%; text-align: center; display: inline-block; padding-bottom: 50px; }
.othersimimg { width: 60% }
.othersimtitle { color: #64287f; font-size: 1.2em; font-weight: bold; }
.othersimline { display: block; width: 20%; height: 1px; background: #000000; margin: 1em 0; }
.othersimcontent { color: #000000; font-size: 0.75em; font-weight: bold; }

.framespace1 { margin: 0px 8%; display: inline-block; width: 84% }
.framespace2 { margin: 0px 4%; display: inline-block; width: 92% }




/************************************************************************************

*************************************************************************************/

.tablewidth { width: 980px }

.displaypc { display: inline }
.displaymob { display: none }

.pdtframe { width: 180px; display: inline-block }

#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; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
#tmpplus2 { 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; display:  }

#tmppdtphoto { width:100%; display: inline-block; padding: 0px 0px 0px 0px }
#tmppdtdes { font-size:16px; line-height: 160%; display: inline-block; text-align:center; color: #000000; padding: 5% 0px 0px 0px; }

.tmpsup { vertical-align: super; font-size:10px; line-height: 0%; color: #000000; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
.pdtname { white-space: nowrap }

.termstxttc { font-size:12px }
.termstxten { font-size:10px }

.tmpheadlineen { font-size:34px; color:#ed008c; line-height:120%; text-align: center; font-weight: bold }

#tmptableheadline { font-size:24px; color:#000000; text-align: center; width: 100%; clear:both; font-weight: bold; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
#tmptableheadlineen { font-size:24px; color:#000000; text-align: center; width: 100%; clear:both; font-weight: bold; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }

#tmpoffertableheadline { font-size:20px; color:#6e35a2; text-align: center; width: 100%; clear:both; font-weight: bold; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }

.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}
#tmpheight80px {width:10px; clear:both; height: 80px}
/*-- main visual --*/
#tmpmainvisual { background-image: url(../images/landing_preorder-s8-tc.jpg); width: 100%; height: 565px; clear:both; background-repeat: no-repeat; background-position:center }
/*-- main visual --*/




/*-- position --*/
#tmpmaincenter { width: 750px; height: 350px; text-align:center; padding: 50px 0px 0px 0px }
#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: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
#tmpcontentcenter { width:100%; clear:both; text-align:center; color: #000000; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
#tmpcontentright { width:100%; clear:both; text-align:right; color: #000000; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
#tmpaligncenter { width:980px; margin: auto; }
/*-- content position --*/

.tmpheadlinesup { vertical-align: 26px; font-size:10px; color:#6e35a2; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }


#tmpsubheadline { font-size:28px; color:#000000; line-height:120%; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
.tmpfontcolor01 { color:#6e35a2; font-size: 120% }
.tmpfontcolor02 { color:#6e35a2; font-size: 120% }
.tmpfontcolor03 { color:#6e35a2; font-size: 140% }
#tmpcontainer { margin:auto; width: 99% }

.tmpgroupheadline { font-size:18px; color: #000000; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
#tmpcircleCH { background-color:#6e35a2; 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: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
#tmpcircleEN { background-color:#6e35a2; 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: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, 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: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
#tmppdtcenter { font-size:16px;  width:150px; float:left; text-align:center; color: #000000; padding: 5px 5px 5px 5px; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
.tmppdtcenter2 { font-size:16px; width:320px; float:left; text-align:center; color: #000000; padding: 5px 5px 5px 5px; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
.tmppdtphoto { width:100%; }
.tmppdtprice { font-size:11px; color: #000000; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
.tmpul { width:90%; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;}
.tmpli { font-size:18px; color: #D1007B; line-height:150%; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;}
#tmpterms { font-size:13px; color: #000000; width:96%; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
/*-- tariff table --*/
.tmptable { border-collapse: collapse; border: 1px solid #D1D1D1; padding: 5px; text-align: center; height: 20px; font-size:18px; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
.tmptdboth { padding: 5px; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
.tmptrheader { background-color: #785f85; font-weight:bold; height: 40px; color:#FFFFFF; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, 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: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }

/*-- function table --*/
.tmptdfunction { padding: 10px; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif; }
/*-- button --*/
.tmpmenutxt { font-size: 22px; margin: 10px 15px 10px 15px; font-family: 'Noto Sans TC', Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, 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:#6e35a2; }


/************************************************************************************
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;
}

#topmenutxt {
  font-size: 24px;
  clear: both;
  color: #FFFFFF;
  margin: 21px 40px 21px 40px;
  font-weight: bold;
  pointer-events: none;
}

#topmenutxtdetail {
  font-size: 20px;
  clear: both;
  color: #FFFFFF;
  margin: 5px 30px 5px 30px;
  font-weight: bold;
  pointer-events: none;
}

#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;
}


.otherplanbutton {
  background: url(bg_button.jpg) no-repeat;
  background-size: 500%;
  background-position: 0% 95%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
}

.otherplanbutton:hover {
  background: url(bg_button.jpg) no-repeat;
  background-size: 250%;
}


.topmenu3up {
  background: url(bg_button.jpg) no-repeat;
  background-size: 500%;
  background-position: 0% 95%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
}

.topmenu3up:hover {
  background: url(bg_button.jpg) no-repeat;
  background-size: 250%;
}


.topmenubuten {
  background: #724dac;
  background-image: -webkit-linear-gradient(top, #8d64ca, #57358b);
  background-image: -moz-linear-gradient(top, #8d64ca, #57358b);
  background-image: -ms-linear-gradient(top, #8d64ca, #57358b);
  background-image: -o-linear-gradient(top, #8d64ca, #57358b);
  background-image: linear-gradient(to bottom, #8d64ca, #57358b);
  width: 300px;
  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: #824ed1;
}


.topmenugohome {
  background: url(bg_button.jpg) no-repeat;
  background-size: 500%;
  background-position: 0% 95%;
  width: 200px;
  height: 70px;
  margin: 0px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
}

.topmenugohome:hover {
  background: url(bg_button.jpg) no-repeat;
  background-size: 250%;
  background-position: 0% 95%;
}

.topmenugohomeen {
  background: #AFAFAF;
  background-image: -webkit-linear-gradient(top, #AFAFAF, #929292);
  background-image: -moz-linear-gradient(top, #AFAFAF, #929292);
  background-image: -ms-linear-gradient(top, #AFAFAF, #929292);
  background-image: -o-linear-gradient(top, #AFAFAF, #929292);
  background-image: linear-gradient(to bottom, #AFAFAF, #929292);
  width: 220px;
  height: 70px;
  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;
}

.topmenugohomeen:hover {
  background: #AFAFAF;
}


.formsubmit {
  background: url(bg_button.jpg) no-repeat;
  background-size: 500%;
  background-position: 0% 95%;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    width: 140px;
    height: 42px;
    margin: 10px;
}

.formsubmit:hover {
  background: url(bg_button.jpg) no-repeat;
  background-size: 250%;
}

.formreset {
    background-color: #AFAFAF;
	background-image: -webkit-linear-gradient(top, #AFAFAF, #929292);
    background-image: -moz-linear-gradient(top, #AFAFAF, #929292);
    background-image: -ms-linear-gradient(top, #AFAFAF, #929292);
    background-image: -o-linear-gradient(top, #AFAFAF, #929292);
    background-image: linear-gradient(to bottom, #AFAFAF, #929292);
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    width: 140px;
    height: 42px;
    margin: 10px;
}

.formreset:hover {
    background: #AFAFAF;
}



/************************************************************************************
FORM
*************************************************************************************/

.input {
  width: 100%
}

#formtitle {
  clear: both;
  width: 100%;
  line-height: 150%;
  padding-top: 20px
}

#forminput {
  clear: both;
  width: 100%;
}



/************************************************************************************
TOP
*************************************************************************************/

#topbutton {
  float: right;
  padding: 0px 0px 0px 0px;
}

#logoheader3d {
  background: #ffffff;
  clear: both;
}

#hklogo3d {
  float: left;
  padding: 20px 30px 15px 20px;
}

.logo3d {
  width: auto;
  height: 50px;
  margin: 11px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#topmainbutton {
  background: #FFFFFF;
  width: 100%;
  clear: both;
  position: fixed;
  z-index: 999;
  height: 73px;
  border-bottom: #CCCCCC solid 1px;
}

#topheight {
  clear: both;
  height: 74px
}

#logoheader {
  background: #ffffff;
  clear: both;
  padding: 15px 30px 10px 30px;
}

#topheader {
  background: rgba(255,255,255,0);
  clear: both;
  padding: 0px 0px 0px 15px;
}

#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: #92278f 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: 48%;
  float: left;
  padding: 20px 10px 0px 10px;
}

.steptitle {
  font-size: 24px;
  font-weight: bold
}


/************************************************************************************
List
*************************************************************************************/

.questiontext {
  font-family: 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: 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 0px 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;
}