body {
	font-family: "微軟正黑體","Segoe UI Semibold","Segoe UI","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
	text-align:left;
	width:100%;
	height:100%;
	margin: 0px;
	background-color: #000000;
	font-size:12px;
	color:#fff;
}

a:link, a:visited, a:active {
	color:#fff;
	text-decoration:none;
}
a:hover {
	color:#fff;
	text-decoration:underline;
}

#loadingBox {
	position:fixed;
	width:100%;
	height:100%;
	z-index:5000;
	display:none;
}
#loadingBoxBg {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000000;
}
#loadingP1 {
	position:absolute;
	top:50%;
	left:50%;
	width:160px;
	height:160px;
	margin:-80px 0 0 -80px;
	background-image:url(../images/loading_p1.png);
	background-repeat:no-repeat;
	background-position:center center;
	z-index:5002;
}
#loadingP2 {
	position:absolute;
	top:50%;
	left:50%;
	width:180px;
	height:180px;
	margin:-90px 0 0 -90px;
	background-image:url(../images/loading_p2.gif);
	background-repeat:no-repeat;
	background-position:center center;
	z-index:5001;
}

#loadingBox2 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:5000;
	display:none;
}
#loadingBoxBg2 {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000000;
	opacity: 0.5;
	filter: alpha(opacity=50);
}
#loadingP3 {
	position:absolute;
	top:50%;
	left:50%;
	width:160px;
	height:160px;
	margin:-80px 0 0 -80px;
	background-image:url(../images/loading_p3.png);
	background-repeat:no-repeat;
	background-position:center center;
	z-index:5001;
}

#container {
	position:relative;
	width:100%;
	height:auto;
}
.contentTR {
	position:relative;
	width:100%;
	height:auto;
	font-size:0;
	line-height:0;
}
.contentTR img {
	position:relative;
	width:100%;
	height:auto;
}
#logo1 {
	position:absolute;
	top:30%;
	left:4.5%;
	width:30%;
	height:45%;
    z-index:999;
}
#logo2 {
	position:absolute;
	top:30%;
	left:36%;
	width:27%;
	height:28%;
    z-index:999;
}
#logo3 {
	position:absolute;
	top:30%;
	left:66%;
	width:29%;
	height:28%;
    z-index:999;
}
#defaultJoinBtn {
	position:absolute;
	left:24%;
	width:52%;
	height:auto;
}
#defaultJoinBtn img {
	position:absolute;
	width:100%;
	height:auto;
	z-index:1000;
}
#videoPlayBtn {
	position:absolute;
	left:12%;
	width:75%;
	height:auto;
}
#videoPlayBtn img {
	position:absolute;
	width:100%;
	height:auto;
	z-index:1000;
}
#videoShareBtn {
	position:absolute;
	width:100%;
	height:auto;
}
#videoShareBtn img {
	position:absolute;
	left:23%;
	width:53%;
	height:auto;
	z-index:1001;
}
.ruleH1 {
	position:relative;
	left:5%;
	width:90%;
	font-weight:bold;
	font-size:24px;
	line-height:30px;
	color:#ffde00;
	padding:10px 0 3px 0;
}
.ruleT1 {
	position:relative;
	left:5%;
	width:88%;
	font-size:18px;
	line-height:24px;
	color:#ffffff;
	padding:5px 0 10px 0;
}
.ruleT1 p {
	text-indent:-20px;
	margin:5px 0 5px 20px;
}
.ruleT1 span {
	color:#ffde00;
}
.ruleT1 a {
	color:#fff000;
}
.ruleH2 {
	position:relative;
	left:5%;
	width:90%;
	font-weight:bold;
	font-size:15px;
	line-height:20px;
	color:#ffffff;
	padding:10px 0 3px 0;
}
.ruleT2 {
	position:relative;
	left:5%;
	width:88%;
	font-size:13px;
	line-height:18px;
	color:#ffffff;
	padding:5px 0 10px 0;
}
.ruleT2 p {
	text-indent:-22px;
	margin:5px 0 5px 22px;
}
.ruleT2 a {
	color:#fff000;
}
#cardMask {
	position:absolute;
	width:100%;
	height:auto;
	z-index:1000;
	overflow:hidden;
}
#cardSlide {
	position:relative;
	width:2000%;
	height:auto;
	clear:both;
    left:-100%;
}
.cardBox {
	position:relative;
	width:5%;
	height:auto;
	display:inline-block;
}
.cardTop {
	position:relative;
	width:100%;
	height:auto;
}
.cardTop img {
	position:relative;
	width:100%;
	height:auto;
}
.cardCenter {
	position:relative;
	width:100%;
	height:auto;
}
.cardCenter img {
	position:relative;
	width:100%;
	height:auto;
}
.cardBottom {
	position:relative;
	width:100%;
	height:auto;
}
.cardBottom img {
	position:relative;
	width:100%;
	height:auto;
}
.cardImgMask {
	position:absolute;
	width:85%;
	height:auto;
	left:6.8%;
	z-index:1000;
	overflow:hidden;
}
.cardImgSlide {
	position:relative;
	width:1000%;
	height:auto;
	clear:both;
}
.cardImgSlide img {
	position:relative;
	width:10%;
	height:auto;
	display:inline-block;
	margin:0;
}
#productPrevBtn {
	position:absolute;
	left:0%;
	width:15%;
	height:auto;
}
#productPrevBtn img {
	position:absolute;
	width:100%;
	height:auto;
	z-index:2000;
}
#productNextBtn {
	position:absolute;
	right:0%;
	width:15%;
	height:auto;
}
#productNextBtn img {
	position:absolute;
	width:100%;
	height:auto;
	z-index:2000;
}
#btnMenu {
	position:absolute;
	width:10.5%;
	right:2%;
	height:auto;
	z-index:3000;
}
#btnMenu img {
	position:absolute;
	width:100%;
	height:auto;
}
.newsPrevBtn {
	position:absolute;
	top:30%;
    left:0%;
	width:12%;
	height:auto;
}
.newsPrevBtn img {
	position:absolute;
	width:100%;
	height:auto;
	z-index:2000;
}
.newsNextBtn {
	position:absolute;
    top:30%;
	right:0%;
	width:12%;
	height:auto;
}
.newsNextBtn img {
	position:absolute;
	width:100%;
	height:auto;
	z-index:2000;
}
#newsVideoShareBtn {
	position:absolute;
    top:75%;
	right:5%;
	width:21%;
	height:auto;
}
#newsVideoShareBtn img {
	position:absolute;
	width:100%;
	height:auto;
	z-index:2000;
}
#newsVideoMask {
    position:absolute;
    left:11%;
    width:77.7%;
	height:100%;
    overflow:hidden;
    z-index:1000;
}
#newsVideoSilde {
    position:absolute;
    width:1000%;
	height:100%;
}
.newsVideoBox {
    position:relative;
    width:10%;
	height:100%;
    display:inline-block;
}
.newsVideoBox img {
    width:100%;
	height:auto;
}
#newsGameImgMask {
    position:absolute;
    left:9%;
    width:31.5%;
	height:100%;
    overflow:hidden;
    z-index:1000;
}
#newsGameImgSilde {
    position:absolute;
    width:1000%;
	height:100%;
}
.newsGameImgBox {
    position:absolute;
    top:0px;
    left:0px;
    width:10%;
	height:100%;
    display:inline-block;
}
.newsGameImgBox img {
    width:100%;
	height:auto;
}
#newsGameContentMask {
    position:absolute;
    left:42.5%;
    width:47%;
	height:100%;
    overflow:hidden;
    z-index:1000;
}
#newsGameContentSilde {
    position:absolute;
    width:1000%;
	height:100%;
}
.newsGameContentBox {
    position:relative;
    width:10%;
	height:100%;
    display:inline-block;
    
}
.newsGameText {
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    color:#fff;
    text-align:left;
    font-weight:bold;
    line-height:38px;
    font-size:30px;
}
@media screen and (max-width: 800px) {
    .newsGameText {
        line-height:30px;
        font-size:24px;
    }
}
@media screen and (max-width: 600px) {
    .newsGameText {
        line-height:24px;
        font-size:18px;
    }
}
@media screen and (max-width: 550px) {
    .newsGameText {
        line-height:20px;
        font-size:15px;
    }
}
@media screen and (max-width: 360px) {
    .newsGameText {
        line-height:15px;
        font-size:12px;
    }
}
@media screen and (max-width: 300px) {
    .newsGameText {
        line-height:13px;
        font-size:10px;
    }
}
#newsProductMask {
    position:absolute;
    left:3%;
    width:94%;
	height:100%;
    overflow:hidden;
    z-index:1000;
}
#newsProductSilde {
    position:absolute;
    width:1000%;
	height:100%;
}
.newsProductBox {
    position:relative;
    width:10%;
	height:100%;
    display:inline-block;
}
.newsProductImg {
    position:absolute;
    top:1%;
    width:30%;
	left:5%;
}
.newsProductImg img {
    width:100%;
    height:auto;
}
.newsProductText {
    position:absolute;
    top:2%;
    left:38%;
    width:55%;
    height:100%;
    overflow:hidden;
    color:#fff;
    text-align:left;
    font-weight:normal;
    line-height:38px;
    font-size:30px;
}
.newsProductTitle {
    width:100%;
    margin:3% 0 3% 0;
    padding-bottom:2%;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-color:#fff;
    font-weight:bold;
    font-size:32px;
}
@media screen and (max-width: 800px) {
    .newsProductText {
        line-height:30px;
        font-size:24px;
    }
    .newsProductTitle {
        font-size:26px;
    }
}
@media screen and (max-width: 600px) {
    .newsProductText {
        line-height:24px;
        font-size:18px;
    }
     .newsProductTitle {
        font-size:20px;
    }
}
@media screen and (max-width: 550px) {
    .newsProductText {
        line-height:20px;
        font-size:15px;
    }
     .newsProductTitle {
        font-size:17px;
    }
}
@media screen and (max-width: 360px) {
    .newsProductText {
        line-height:15px;
        font-size:12px;
    }
     .newsProductTitle {
        font-size:14px;
    }
}
@media screen and (max-width: 300px) {
    .newsProductText {
        line-height:13px;
        font-size:10px;
    }
     .newsProductTitle {
        font-size:12px;
    }
}
#newsEventMask {
    position:absolute;
    left:3%;
    width:94%;
	height:100%;
    overflow:hidden;
    z-index:1000;
}
#newsEventSilde {
    position:absolute;
    width:1000%;
	height:100%;
}
.newsEventBox {
    position:relative;
    width:10%;
	height:100%;
    display:inline-block;
}
.newsEventImg {
    position:absolute;
    top:2%;
    width:35%;
}
.newsEventImg img {
    width:100%;
    height:auto;
}
.newsEventText {
    position:absolute;
    top:2%;
    left:38%;
    width:55%;
    height:100%;
    overflow:hidden;
    color:#fff;
    text-align:left;
    font-weight:normal;
    line-height:38px;
    font-size:30px;
}
.newsEventTitle {
    width:100%;
    margin:3% 0 3% 0;
    padding-bottom:3%;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-color:#fff;
    font-weight:bold;
    font-size:32px;
    color:#66c7ff;
}
@media screen and (max-width: 800px) {
    .newsEventText {
        line-height:30px;
        font-size:24px;
    }
    .newsEventTitle {
        font-size:26px;
    }
}
@media screen and (max-width: 600px) {
    .newsEventText {
        line-height:24px;
        font-size:18px;
    }
     .newsEventTitle {
        font-size:20px;
    }
}
@media screen and (max-width: 550px) {
    .newsEventText {
        line-height:20px;
        font-size:15px;
    }
     .newsEventTitle {
        font-size:17px;
    }
}
@media screen and (max-width: 360px) {
    .newsEventText {
        line-height:15px;
        font-size:12px;
    }
     .newsEventTitle {
        font-size:14px;
    }
}
@media screen and (max-width: 300px) {
    .newsEventText {
        line-height:13px;
        font-size:10px;
    }
     .newsEventTitle {
        font-size:12px;
    }
}