* { -webkit-box-sizing:border-box; box-sizing:border-box; }

body {font-family: Barlow, sans-serif;background: #fff;-webkit-font-smoothing: antialiased;background: #fff;}
body.newlog { background:#F0F0F0}
/*body.chi { font-family: "Noto Sans", "Noto Sans TC", sans-serif;}*/

hgroup { text-align:center;margin-top: 4em; margin-bottom:4em;/*margin-bottom:2em*/}
h1, h3 { font-weight: 300; }
h1 { color: #636363; }
h3 { color: #4a89dc; }

h3, .top-h3 { font-family: Montserrat, sans-serif;}


/* unvisited link */
a:link {
    color: #6C2BEE;

}

/* visited link */
a:visited {
    color: #6C2BEE;

}

/* mouse over link */
a:hover {
    color: #E620A0;
}

/* selected link */
a:active {
    color: #94A0AE;
}




.form-floating-label {position: relative}
.form-floating-label [type='text'],
.form-floating-label [type='password'],
.form-floating-label [type='date'],
.form-floating-label [type='datetime'],
.form-floating-label [type='datetime-local'],
.form-floating-label [type='month'],
.form-floating-label [type='week'],
.form-floating-label [type='email'],
.form-floating-label [type='number'],
.form-floating-label [type='search'],
.form-floating-label [type='tel'],
.form-floating-label [type='time'],
.form-floating-label [type='url'],
.form-floating-label [type='color'],
.form-floating-label textarea {margin-bottom: 0;color: #8a8a8a;font-size: 18px;font-weight: 300;padding: 30px 1rem 0 1rem;}
.form-floating-label label { /*color: #cacaca*/ color: #999999;font-size: 18px;position: absolute;pointer-events: none;left: 0;bottom: 0;transition: all 0.2s ease-in; /*font-weight: 300*/; width:100%; text-align:center; /*text-transform:uppercase*/ top:25px}
.form-floating-label textarea ~ label {top: 20px; font-size: 18px;font-weight: normal;}
.form-floating-label input:focus ~ label,
.form-floating-label input:disabled[value] ~ label,
.form-floating-label.has-value input ~ label {top: 0;font-size: 14px;color: #6C2BEE;font-weight:normal;text-align:left; margin-left:1rem}
.form-floating-label textarea:focus ~ label,
.form-floating-label.has-value textarea ~ label {top: 0;font-size: 14px;color: #6C2BEE;font-weight: normal;;text-align:left; margin-left:1rem}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999999;
  opacity: 1; /* Firefox */
  font-size: 18px;
}


.container { width:1024px; margin:0 auto; padding:0; position:relative; /*padding-top:120px*/padding-top:32px; padding-bottom:88px; background:#fff} 

.top-nav { display:none}
.with-top .top-nav { display:block}
.top-nav .left-corner, .top-nav .right-corner { width:25px; position:absolute}
.top-nav .left-corner  img, .top-nav .right-corner img { width:100%}
.top-nav .left-corner { top:25px; left:25px; }
.top-nav .right-corner { top:25px; right:25px;}
.main-logo { width:260px; margin:0 auto}
.main-logo img { width:100%}
.forgot-text { position:absolute; right:15px; top:55px}
.forgot-text a { font-size:12px}
.login-screen-m p { font-size:18px; color:#4D5154; text-align:center }
.login-screen-m p.top-h3 { font-size:26px; /*font-weight:bold*/ font-weight: 500; margin:0; line-height:30px}
.login-screen-m p.top-h4 { font-size:20px; font-weight:bold/ font-weight: 500; margin:0; line-height:24px}
.login-screen-m p.fieldin-n { font-weight:bold; color:#000}
.login-screen-m p strong { color: #000}
.showpsw-btn, .showpsw-btn2, .showpsw-btn3 { position:absolute; right:15px; font-size:14px; display:none; text-transform:uppercase; top:0}
.showpsw-btn a, .showpsw-btn2 a, .showpsw-btn3 a { color:#94A0AE}
.showpsw-btn a:hover, .showpsw-btn a:active, .showpsw-btn a:focus { text-decoration:none}
.erroe-message { /*position:absolute;*/ width:100%; text-align:center; left:0; /*font-size:11px*/font-size:13px; color:#D0021B; /*bottom:-20px*/}
.erroe-message.checkbox-mes { position:relative}
.erroe-message.add-forgot { padding:0 15%}

.top-nav-logo { background:#FAFAFA; height:88px; max-height:88px; -ms-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition: all 0.3s ease-out; position:fixed; top:0; width:1024px; z-index:9}
.top-nav-logo .left-corner, .top-nav-logo .right-corner { width:25px; position:absolute}
.top-nav-logo .left-corner { top:30px; left:25px; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out; }
.top-nav-logo .right-corner { top:30px; right:25px; width:auto; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;}
.top-nav-logo .right-corner .signin-nn {}
/*.top-nav-logo h2 { top:65px; left:15px; position:absolute; font-size:30px; color:#4D5154; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;}*/
.top-nav-logo a { text-decoration: none; border-bottom: none;}


.let-go-m { width:100px}

/*form {width: 380px;margin: 4em auto;padding: 3em 2em 2em 2em;background: #fafafa;border: 1px solid #ebebeb;-webkit-box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;}*/
form { width: 640px; margin: 4em auto;}

.group { position: relative; /*margin-bottom: 45px;*/ margin-bottom: 45px;}
input {font-size: 18px;padding: 10px 10px 10px 5px;-webkit-appearance: none;display: block;color: #636363;width: 100%;border: none;border-radius: 0;border-bottom: 1px solid #94A0AE; text-align:center}
input:focus { outline: none; }

/* Label */
.field-input label {color: #999; font-size: 18px;font-weight: normal;position: absolute;pointer-events: none;left: 5px;top: 10px;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}

/* active */
.field-input input:focus ~ label, .field-input input.used ~ label {top: -10px;-webkit-transform: scale(.75);transform: scale(.75); left: -40px;/* font-size: 14px; */color: #94A0AE; text-align:left}
.login-screen-m .field-input label { text-transform:uppercase; text-align:center; width:100%; color:#94A0AE}
.login-screen-m.success-scr-face hgroup { margin-top:1em}
.login-screen-m.success-scr-face .top-h3 { font-size:24px; margin-top:3em; color:#94A0AE}
.login-screen-m.success-scr-face .message { margin-bottom:3em}
.login-screen-m.success-scr-face .message p { color:#4D5154}

/* Underline */
.bar {position: relative;display: block;width: 100%;}
.bar:before, .bar:after {content: '';height: 1px; width: 0;bottom: 0; position: absolute;background: #6F63FF; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
.bar:before { left: 50%; }
.bar:after { right: 50%; }

/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {position: absolute;height: 60%; width: 100%; top: 25%; left: 0;pointer-events: none;opacity: 0.5;}
/* active */
input:focus ~ .highlight {-webkit-animation: inputHighlighter 0.3s ease;animation: inputHighlighter 0.3s ease;}
/* Animations */
/*@-webkit-keyframes inputHighlighter {
		from { background: #4a89dc; }to { width: 0; background: transparent; }
}

@keyframes inputHighlighter {
	from { background: #4a89dc; } to 	{ width: 0; background: transparent; }
}*/

@keyframes lds-rolling {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes lds-rolling {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}



.lds-rolling {
  position: absolute;
  margin-top: 25%;
}
.lds-rolling div,
.lds-rolling div:after {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 10px solid #94A0AE;
  border-top-color: transparent;
  border-radius: 50%;
}
.lds-rolling div {
  -webkit-animation: lds-rolling 1s linear infinite;
  animation: lds-rolling 1s linear infinite;
  /*top: 100px;
  left: 100px;*/
}
.lds-rolling div:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.lds-rolling {
  width: 90px !important;
  height: 90px !important;
  -webkit-transform: translate(-45px, -45px) scale(0.45) translate(45px, 45px);
  transform: translate(-45px, -45px) scale(0.45) translate(45px, 45px);
}


/* Button */
button {
	position: relative;
	display: inline-block;
	padding: 10px;
	margin: .3em 0 1em 0;
	width: 100%;
	vertical-align: middle;
	color: #fff;
	font-size: 1.1em;
	line-height: 30px;
	-webkit-font-smoothing: antialiased;
	text-align: center; 
	background: transparent;
	border: none;
	cursor: pointer;
	 /*font-family:Montserrat, sans-serif;*/
	 }
button:focus { outline: 0; }
button:disabled {/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5;*/ color: #fff; background: #ccc; pointer-events: none;}

/* Button modifiers */
.buttonBlue {background: #3B5998}
.buttonGary { background:#94A0AE}
.buttonRed { background:#DC4E41}
.buttonOrange { background:#F6AB00}
.buttonSkyblue { background:#5a8edc}
.buttonLightPurple { /*background:#6F63FF*/background:#33058D}
.buttonLightWhite { /*background:#6F63FF*/background:none; border:2px #fff solid}
.buttonPurple { background:#33058D}
.buttonFuchsia { background:#E620A0}
.buttonBlue:hover, .buttonGary:hover, .buttonRed:hover, .buttonLightPurple:hover, .buttonPurple:hover, .buttonFuchsia:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;}
.buttonLightWhite:hover { background:#e620a0; border:2px #e620a0 solid}
.btn-icon { width:30px; margin-right:.5rem}
/*.btn-facebook { background-image:url(../img/facebook.svg); background-repeat:no-repeat;}
.btn-gplus { background-image:url(../img/google-plus.svg); background-repeat:no-repeat;}*/
a.button { color: white;}

/*input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background: none !important;}*/
/* Change the white to any color ;) */
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px white inset; color:#000}

p.mail-add { color:#4D5154; font-size:18px}
.success-btn-text { text-align:center; margin-top:60px}
.success-btn-text a { color:#4A90E2; font-size:14px; font-weight:bold; text-decoration:none}
.success-btn-text a:hover { text-decoration:none; border:2px #4A90E2 solid;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px ; padding:10px}

footer { text-align: center; }
footer p {color: #888;font-size: 16px;letter-spacing: .4px;}
footer a {color: #4A90E2;text-decoration: none;-webkit-transition: all .2s ease;transition: all .2s ease;}
footer a:hover {color: #666;text-decoration: underline;}
footer img {width: 80px;-webkit-transition: all .2s ease;transition: all .2s ease;}
footer img:hover { opacity: .83; }
footer img:focus , footer a:focus { outline: none; }


.exp {display: table;width: 100%;height: 100%;}
.exp .checkbox {display: table-cell;width: 100%;height: 100%;vertical-align: middle; }
.exp label {display: inline-block;cursor: pointer;position: relative; width: 100%}
.exp .tandc-m { float:left; text-align:left; width:85%;font-size: 16px; line-height: 1.3;}
.exp .tandc-m small { font-size: 12px;}
.keeplogin .exp .tandc-m { font-size: 18px; margin-top: -2px}
.keeplogin .exp span { width: 20px; height: 20px; margin-right: 3%; }
.keeplogin .exp span::before { top: 8px;left: 4px;}
.keeplogin .exp span::after { top: 12px;left: 5px;}
.keeplogin .exp label { margin-bottom: 0 }
.exp label span { display: inline-block;position: relative;background-color: transparent;width: 25px;height: 25px;transform-origin: center;border: 2px solid #4D5154;border-radius: 50%;vertical-align: -6px;margin-right: 5%;transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);}
.exp label span:before {content: "";width: 0px;height: 2px;border-radius: 2px;background: #fff;position: absolute;transform: rotate(45deg);top: 11px;left: 7px;transition: width 50ms ease 50ms;transform-origin: 0% 0%;}
.exp label span:after {content: "";width: 0;height: 2px;border-radius: 2px;background: #fff;position: absolute;transform: rotate(305deg);top: 14px;left: 8px;transition: width 50ms ease;transform-origin: 0% 0%;}
.exp label:hover span:before {width: 5px;transition: width 100ms ease;}
.exp label:hover span:after {width: 10px;transition: width 150ms ease 100ms;}
.exp input[type="checkbox"] {display: none;}
.exp input[type="checkbox"]:checked +  label span {background-color: #33058D;transform: scale(1.25);}
.exp input[type="checkbox"]:checked +  label span:after {width: 10px; background: #fff;transition: width 150ms ease 100ms;}
.exp input[type="checkbox"]:checked +  label span:before {width: 5px;background: #fff;transition: width 150ms ease 100ms;}
.exp input[type="checkbox"]:checked +  label:hover span {background-color: #33058D;transform: scale(1.25);}
.exp input[type="checkbox"]:checked +  label:hover span:after {width: 10px;background: #fff;transition: width 150ms ease 100ms;}
.exp input[type="checkbox"]:checked +  label:hover span:before {width: 5px;background: #fff;transition: width 150ms ease 100ms;}

.clearfix {overflow: auto;}
.clearfix::after {content: "";clear: both;display: table;}

.accountdetail-style { background:#FAFAFA; display:block; position:relative; border-bottom:1px #CCCCCC solid}
.accountdetail-style .left-corner, .accountdetail-style .right-corner { display:none}
.accountdetail-style.top-nav h2 {color:#4D5154; font-size:30px; padding:0; margin:0; padding-top:2%; padding-bottom:2%; text-align:center}

.top-nav-logo .button { margin:0; padding:0;padding-left: 20px;padding-right: 20px;font-size: 1em;/*text-transform: uppercase;*/ -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;}
.top-nav-logo.add-back .left-corner { display:block}
.top-nav-logo.add-back .left-corner.logo { left:60px;}
#header-sroll.top-nav-logo.add-back.small .left-corner.logo { left:50px;}

.top-nav-logo .left-corner { display:none}
.top-nav-logo .left-corner.logo { width:100px; left:25px; top:20px; display:block}
.top-nav-logo .left-corner.logo img { width:100%}
#header-sroll.small {height: 44px}
#header-sroll.small .left-corner { top:10px; width:15px}
#header-sroll.small .left-corner.logo { width:60px; top:10px; left:25px}
#header-sroll.small .right-corner { top:10px;  padding:0; margin:0; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;}
#header-sroll.small .right-corner .button { font-size:.8em; line-height:25px; padding-left:15px; padding-right:15px; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;}
#header-sroll.small .right-corner .button:hover { text-decoration:none; color:#FFF; background:#999999; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;}

.login-s2 .group { margin-bottom:30px}
.exp p.tandc-m { margin:0; }
.vheight { /*margin-top:5em*/ margin-top:3em }
.vheight2 { padding-top:20px; margin-bottom:0!important}
.vheight3 { margin-top:5em }

ul.main-ul { margin:0; padding:0}
ul.main-ul li { margin:0; padding:0; list-style:none; font-size:14px; list-style:square; margin-bottom:5px}
ul.main-ul li:last-child { margin-bottom:0}

.pack-logo { width:150px; margin:0 auto; margin-bottom:20px}
.pack-logo img { width:100%}

.pack-code-date { background:#eee; margin-left:-13px; width:320px}

.lang-m { text-align: center; margin-top: 20px;}
.lang-m a {color: #4D5154 }


.small-s { margin-top: 0 }
.small-s.login-s2 .group { margin-bottom: 10px }
.small-s .exp .tandc-m { font-size: 13px; line-height: 16px }
.small-s .exp label { margin-bottom: 0 }
.small-s .exp label span { width: 20px; height: 20px }
.small-s .exp label span::before { top: 9px;left: 5px; }
.small-s .exp label span::after {top: 12px;left: 6px;}
.small-s.login-screen-m p { margin-bottom: 0 }
.small-s.login-screen-m .vheight { margin-top: 1em; }

/*  LIVE CHAT */
body.livechat-s, body.livechat-s .container { background:#33058D}
.livechat-s .top-nav { display:block}
.livechat-s .top-nav .right-corner { display:none}
.livechat-s .main-logo { width:20%}
.livechat-s hgroup { margin-bottom:1em}
.livechat-s form { margin-top:4em}
.livechat-s h1 { font-size:4em; font-family:Montserrat, Open Sans, Helvetica; text-align:center; color:#FFF; font-weight:bold}
.livechat-s p { color:#FFF; font-size:16px}
.livechat-s p.term { font-size:14px; color:#C2B4DD}
.livechat-s p.term a { color:#C2B4DD; text-decoration:underline}
.livechat-s p.term a:hover { color:#e620a0}

.top-nav-logo.lang-add { background: none; height: 58px; }
.top-nav-logo.lang-add .right-corner { top: 15px; right: 15px }
.top-nav-logo.lang-add .button { font-size: 14px; padding-left: 15px; padding-right: 15px; line-height: 25px }
.top-nav-logo.lang-add .buttonFuchsia { background: #999999 }
.top-nav-logo.lang-add.small { top: -60px }


.radio {
   	display:inline-block;
   	width:15px;
   	height: 15px;
   	border-radius: 100%;
   	background-color:lightgray;
   	cursor:pointer;
   	margin: 2px 0; 
}
	
.radio-selected{
    background-color: gray;
}