* {
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	-webkit-font-smoothing: antialiased;font-smoothing: antialiased;
}
body{
	background: #fff url(../images/bg.gif) center top no-repeat;
	color: #0f0f0f;
	font-family: "微軟正黑體", "微软雅黑", "Microsoft JhengHei", "新細明體", "PMingLiu", AppleGothic, Dotum, Lucida Grande, Verdana Sana-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7857;
	letter-spacing: 0.075em;
	margin: 0;
	padding: 0;
}
p {text-align: justify;text-justify: inter-word;}
a, a:active, a:hover, a:focus, a:visited { text-decoration:none;}
img {
	display: block;
	width: 100% \9;
	max-width: 100%;
	height: auto;
}
ul { padding: 0;list-style: none;}
.bullColor { color: #df0002;}
.bearColor { color: #19b500;}
.text-center { text-align: center;}

/* start preloader */
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row nowrap;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background: none repeat scroll 0 0 #fff;
}
.sk-spinner-rotating-plane.sk-spinner {
    width: 135px;
    height: 60px;
    background:url(../images/load-icon.png) center center no-repeat;
    margin: 0 auto;
    -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
    animation: sk-rotatePlane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotatePlane {
  0% {
	  -webkit-transform: perspective(120px) rotateY(0deg);
	  transform: perspective(120px) rotateY(0deg);}
  50% {
	  -webkit-transform: perspective(120px) rotateY(-180.1deg);
	  transform: perspective(120px) rotateY(-180.1deg);}
  100% {
	  -webkit-transform: perspective(120px) rotateY(-180deg);
	  transform: perspective(120px) rotateY(-180deg);}
}

@keyframes sk-rotatePlane {
  0% {
	  -webkit-transform: perspective(120px) rotateY(0deg);
	  transform: perspective(120px) rotateY(0deg);}
  50% {
	  -webkit-transform: perspective(120px) rotateY(-180.1deg);
	  transform: perspective(120px) rotateY(-180.1deg);}
  100% {
	  -webkit-transform: perspective(120px) rotateY(-180deg);
	  transform: perspective(120px) rotateY(-180deg);}
}

/* BRANDBar */
#logo-bar {
	width:980px;
	height:56px;
	background: url(../images/logo.gif) 0 0 no-repeat;
	margin:0 auto;
}
.submenu {
	width:320px;
	height:20px;
	font-size:12px;
	letter-spacing:1px;
	margin-top:30px;
	float:right;
	text-align:center;
}
.submenu a { color:#fff;}
.submenu > a:hover { border-bottom:1px solid #E6F6F9;}
.submenu span {font-size:10px;margin:0 5px 0;color:#135d9b;}

/*header area*/
.top-header{
	background:transparent;
	position: fixed;
	width: 100%;
	z-index: 999;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
}
.top-header img.logo{
	margin-top: -10px;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
}
.navbar-default {
  background-color: transparent;
  border-color: transparent;
  margin-bottom: 0;
}
.nav-bar{
	width: 70%;
	margin: 1% auto 0;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
}
.navbar-default .navbar-nav>li>a {
	color: #fff;
	font-size: 120%;
	text-transform: capitalize;
	-webkit-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
	-moz-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
	-o-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
	text-shadow: 0 1px 3px rgba(0,0,0,0.8);
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
	padding: 8px 0;
	margin:0 15px;
	font-weight: 600;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{ color:#FFFF00; border-bottom: 2px solid #eb6100;}
.navbar-default .navbar-nav>li>a.active{border-bottom: 2px solid #eb6100;}
.navbar-default .navbar-toggle { border-color: #fff;}

/*home area*/
#home, #eloHome {height: 96vh;text-align: center;position: relative;}
#home {
	background: url(../images/home.jpg) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#home h1{width: 480px;margin:20% auto 0;}
#home h2{
	color:#fffc00;
	font-size: 560%;
	font-weight: 900;
	letter-spacing: 0;
	margin: 50px auto 0;
}
#home p {
	color: #fff;
	font-size: 135%;
	letter-spacing: 1.5em;
	text-align: center;
	margin-bottom: 4%;
}

.bull, .bear {position: absolute;bottom: 5%;}
.bull { left:0;}
.bear { right:0;}
.bear img { float: right;}
#eloHome {
	background: url(../images/home3.jpg) no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow: hidden;
}
#eloHome.boxing {
	background: url(../images/home2.jpg) no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: all .1s ease;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
	-ms-transition: all .1s ease;
}
#eloHome h1{width: 520px;margin:5% auto 25%;}
#eloHome .slogan {position: absolute;left: 38%;bottom: 5%;}
#eloHome h2 { width: 420px;}

/*offer area*/
section { padding-top: 80px;padding-bottom: 50px;}
section h3{
	color: #1a1a1a;
	font-size: 250%;
	font-weight: 600;
	margin-bottom: 25px;
	margin-top: 0;
	text-align: center;
	position: relative;
}
section h3::after, section h3::before{
	content: '';
	position: absolute;
	width: 20px;
	height: 3px;
	top:50px;
}
section h3::after { left: 48%;}
section h3::before{ left: 50%;}
section h5{
	border-bottom: 2px dashed #181d23;
	font-size: 185%;
	font-weight: 600;
	padding-bottom: 6px;
	text-align: center;
}

#offer h3::after,#offer h3::before { background-color: #00b7ee;}

.product h5{color: #0068b7;	padding-top: 28px;}
.product p, .actDate p { font-size: 180%;}
.product p strong { font-size: 180%;}

/*detail area*/
#detail { background-color: #f5f5f5;}
#detail h3::after,#detail h3::before { background-color: #e5004f;}

.actDate h5 { color: #0088b4; padding-top: 14px;}
.actDate p strong {
	font-size: 150%;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin-left: 8px;
}
.actInfo {
	background-color: #fff;
	border-radius: 50px;
	padding: 50px;
	margin-top: 2em;
	position: relative;
}
.actInfo h5 {
	color: #eb3e16;
	position: absolute;
	padding-left: 2em;
	padding-right: 2em;
	top:-25px;
	left: 95px;
}
.actInfo>p {
	font-size: 175%;
	font-weight: 600;
	letter-spacing: 0.2em;
	margin-bottom: 1em;
}
.gift img { margin: 0 auto 20px;}
.gift p {
	font-size: 130%;
	font-weight: 600;
	line-height: 1.25em;
	text-align: center;
}

/*AwardTab area*/
#AwardTab { background-color: #f5f5f5; padding-top: 0; text-align: center;}
#AwardTab h3::after,#AwardTab h3::before { background-color: #008b98;}
#AwardTab h4, .modal-body h4 {
	border-bottom: 2px dashed #212121;
	font-size: 160%;
	font-weight: 600;
	padding: 10px 20px;
}
.winner { width: 90%; margin: 20px auto;}
.winner span {padding: 3px 20px;}
.winner span:last-of-type {font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";}
.winner p { text-align: center;padding: 10px 20px; font-size: 150%;}
.thisPot li { display: inline-block; width: 45%; margin: 10px 2%; font-size: 150%;}
.thisPot li:nth-child(3), .thisPot li:nth-child(4), .thisPot li:nth-child(7), .thisPot li:nth-child(8){background-color: #fff;}

/*limited area*/
#limited {
	display: none;
	background: url(../images/paralax.jpg) bottom center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	padding-top: 120px;
	padding-bottom: 120px;
}
#limited h3{ color: #fffc00;}
#limited h3::after, #limited h3::before { background-color: #fff;}

#limited h5 {color: #efefef; border-bottom: 2px dashed #f7f7f7;}
.limitDate p {
	color: #fff;
	font-size: 200%;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	letter-spacing: 0.15em;
}
.limitInfo p {
	color: #fff;
	font-size: 180%;
	font-weight: 600;
	letter-spacing: 0.1em;
}
.limitInfo p>span { color: #c6ff00; font-size: 75%;}

/*notic area*/
.notic {
	padding: 0 1em;
	width: 90%;
	margin: 0 auto;
}
.notic h5 {
	border-bottom: 1px solid #b3b3b3;
	color: #ee063c;
	font-size: 135%;
	text-align: left;
	padding: 0 20px 10px;
}
.notic ol { font-size: 110%;}
.notic>ol>li {color: #00328d;font-weight: 600;margin-top: 20px;}
.notic ol li>ul { font-size: 90%;}
.notic ol li>ul li {
	color: #0f1113;
	font-weight: 500;
	text-align: justify;
	text-justify: inter-word;
	line-height: 1.5em;
	margin-top: 0.6em;
	position: relative;
}
.notic ol li>ul li::before {
	position: absolute;
	content: '\f046';
	font-family: FontAwesome;
	font-size: 80%;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	top:2px;
	left: -20px;
}

/* elo area*/
#elo h3::after { background-color: #df0002;}
#elo h3::before { background-color: #19b500;}

.eloSlogan p {
	font-size: 220%;
	letter-spacing: 0.1em;
	text-align: center;
}
.eloSlogan p>span {font-size: 150%;font-weight: 600;}
.bullUp {
	background: url("../images/load-icon.png") left center no-repeat;
	display: inline-block;
	width: 65px;
	height: 60px;
}
.bearDown {
	background: url("../images/load-icon.png") right center no-repeat;
	display: inline-block;
	width: 65px;
	height: 60px;
}
.progress{
    background-color: #292929;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #b3b3b3;
	height: 36px;
	margin: 2.5em auto;
    position: relative;
}
.progress .bar {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
    border-radius: 20px;
	height: 32px;
    border:  none;
	position: absolute;
	top:1px;
	z-index: 2;
}
.progress .bull-bar {
	background-color:#df0002;
	left: 1px;
    -webkit-animation: animate-bull 4s infinite;
    animation: animate-bull 4s infinite;
}
@-webkit-keyframes animate-bull{
    0% { width: 10%; }
	50% { width: 90%; }
	100% { width: 10%; }
}
@keyframes animate-bull{
    0% { width: 10%; }
	50% { width: 90%; }
	100% { width: 10%; }
}
.progress .bear-bar{
	background-color:#19b500;
	right: 1px;
    -webkit-animation: animate-bear 4s infinite;
    animation: animate-bear 4s infinite;
}
@-webkit-keyframes animate-bear{
    0% { width: 90%;}
	50% { width: 10%;}
	100% { width: 90%;}
}
@keyframes animate-bear{
    0% { width: 90%;}
	50% { width: 10%;}
	100% { width: 90%;}
}
.progress .bull-bar::before, .progress .bear-bar::after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 36px;
	height: 36px;
	bottom:0;
	z-index: 100;
}
.progress .bull-bar::before {
	background:url("../images/bull-bear.png") left center no-repeat;
	right: 0;
}
.progress .bear-bar::after {
	background:url("../images/bull-bear.png") right center no-repeat;
	left: 0;
}

/* feature area */
#feature { background-color: #f5f5f5;}
#feature h3::after, #feature h3::before { background-color: #eb6100;}
#feature h3 { margin-bottom: 2em;}
.feature {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
    border-radius: 20px;
	text-align: center;
	padding: 20px 10px 120px;
	position: relative;
}
.feature i {
	bottom: -35px;
	left: 20%;
	position: absolute;
	z-index: 1;
}
.feature i.two { left: 15%;}
.feature h4 {font-size: 200%;font-weight: 600;}
.feature h4.one { color:#d60d75;}
.feature h4.two { color:#00859d;}
.feature h4.three { color:#eb3e01;}
.feature h4.four { color:#0d34b2;}
.feature p {font-size: 120%;line-height: 1.3em;text-align: center;}
.feature p small, p.ps { color: #D00B0E; display: block;}

/* contract area */
#contract h3::after, #contract h3::before { background-color: #f39800;}
#contract table {
	border-top:5px solid #313131;
	border-bottom:6px solid #313131;
	width: 100%;
	margin: 30px auto;
	font-size: 135%;
}
#contract table th {
	background-color:#093A7C;
	color:#f7f7f7;
	font-weight: 600;
	padding: 8px;
	text-align: center;
	border:1px solid #fff;
}
#contract table tr.odd th {background-color:#0D7CB1;}
#contract table td {background-color:#ececec;padding: 8px;border:1px solid #fff;}
#contract table tr.odd td {background-color:#f5f5f5;}

/*fund area*/
#fund h3 { margin-bottom: 2em;}
#fund h3::after, #fund h3::before { background-color: #3e99e2;}
.fundHeading {text-align: center;margin-bottom: 3em;}
.fundHeading h1 {color: #005BAC;font-weight: 800;}
.fundHeading h2 {
	color: #eb6100;
	font-size: 160%;
	letter-spacing: 0.2em;
}
.fundHeading h2>span{
	color: #161616;
	font-weight: 600;
	margin-right: 10px;
}
.fundBox { margin-bottom: 50px;}
.fundBox div.date p {
	font-size: 230%;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 800;
}
.fundBox div.date p>small{color:#565656; font-size: 40%;}
.fundBox div.date p>span {
	background-color: #151515;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
    border-radius: 20px;
	color: #fff;
	display: block;
	text-align: center;
	font-size: 50%;
	font-weight: 300;
}
.acer, .brother{ position: relative;}
.acer::after, .brother::after{
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-o-border-radius:40px;
    border-radius: 40px;
	font-weight: 600;
	text-align: center;
	line-height: 80px;
	width: 80px;
	height: 80px;
	position: absolute;
	right: 0;
	bottom: -30px;
}
.acer::after{
	background-color: #26B8AD;
	content: "哇係ㄟ捨";
}
.brother::after{
	background-color: #ffef01;
	content: "權證小哥";
}
.fundBox h4 {
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	-o-border-radius: 16px;
    border-radius: 16px;
	background-color:#ffba00;
	font-size: 180%;
	font-weight: 600;
	padding: 5px 20px;
}
.fundBox h4.second {background-color:#5aa8e6;}
.fund table {font-size: 110%;margin-left: 5px;}
.fund table th {
	border-right: 1px dotted #333;
	border-bottom: 10px solid #fff;
	white-space: nowrap;
	text-align: right;
	padding: 0 10px;
}
.fund table td { padding-left: 10px;}
.fund table td i { margin: 0 5px;}

.sign p {text-align: center;font-size:125%;padding: 8px;}
.sign p i { color: #FFC600; margin-right: 6px;}
.btn {
	padding: 10px 20px;
	margin: 5px 10px;
	font-size: 120%;
	font-weight: 500;
}
.btn:hover, .btn:focus {
	background-color:#fff;
	border: 2px solid #3e99e2;
	color:#E30F44;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
}
.btn-sign { background-color: #ffd02d;border: 2px solid #ffd02d;}
.btn-other { background-color:#004DAA;border: 2px solid #004DAA;color: #fff;}

/* online area */
#online h3::after, #online h3::before { background-color: #9ac642;}
.platform { margin: 50px auto;}
.platform a { font-size: 200%;text-align: center; position: relative;}
.facebook i{ color: #44619d; margin-right: 6px;}
.youtube i{ color: #dd0101; margin-right: 6px;}
.platform a:hover::after {
	content: "\f00c";
	color:#EC282B;
	font-family: FontAwesome;
	position: absolute;
	font-size: 75%;
	top:30%;
}
.facebook:hover::after {right: 15%;}
.youtube:hover::after {right: 5%;}

.lector {padding: 0;text-align: center;}
#online .first { background-color: #f27078;}
#online .second { background-color: #3e99e2;}
#online .third { background-color: #a6cd58;}

.lector h1 {
	background-color: rgba(0,0,0,0.1);
	color:#fff;
	font-weight: 600;
	padding: 20px 0;
	margin-bottom: 0;
}
.lector h1>span{ display: block; font-size: 70%; margin-top: 10px;}
#online .first, #online .third { position: relative;}
#online .first::before, #online .third::before{
	-webkit-border-radius: 16px 0 0 16px;
	-moz-border-radius: 16px 0 0 16px;
	-o-border-radius: 16px 0 0 16px;
    border-radius: 16px 0 0 16px;
	background-color: #F30004;
	content: "LIVE直播";
	color: #FFF;
	display: block;
	position: absolute;
	font-size: 110%;
	width:100px;
	height: 30px;
	top:5px;;
	right: -2px;
	z-index: 10;
}
.lector p {
	background-color: rgba(0,0,0,0.2);
	border-bottom: 1px dotted rgba(0,0,0,0.5);
	font-size: 90%;
	text-align: center;
	padding: 10px;
}
.lector p>span {
	background-color: rgba(255,255,255,0.5);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
    border-radius: 10px;
	padding: 2px 10px;
	margin-right: 6px;
}
.lector table th {
	background-color: rgba(0,0,0,0.35);
	border-bottom: 1px solid rgba(255,255,255,0.5);
	color: #fff;
	white-space: nowrap;
	padding: 0 6px;
}
.lector .photo { margin-top: 2em;}
.lector .photo img { margin: 0 auto;}
.lector table td {text-align: left;padding: 6px;}
.lector table td.speaker {font-size: 180%;font-weight: 600;}
.lector table td.speaker span {display: block;font-size: 60%;}
#online .third table td.speaker {padding-top: 36px;}

/* start footer */
footer {
	padding-bottom: 20px;
	background-color: #005BAC;
	border-top:6px solid #eb6100;
	color: #fff;
}
footer p { padding: 0.5em 6em 0;}
footer p:last-child {
	text-align: center;
	margin: 0 auto;
}
footer a:hover { text-decoration: underline;}