@charset "UTF-8";

/*--通用設定----------------------------------------------*/

html,body{
	background:#12041c;
	font-size:20px;
	font-style: normal;
	font-weight: normal;
	font-family:Helvetica , Arial, '微軟正黑體', 'Microsoft JhengHei';
}
.flex{margin:0 auto; max-width:1920px; min-width:1100px;} /*頁面固定寬*/
.lightbox{display: none;}
.grid{padding-top:1px;/*修正 margin 無效的 bug*/}













/*--主視覺----------------------------------------------*/
.lay-main{background: url(../image/background.jpg) no-repeat top center; position: relative; height:1636px;}
.logo{display:block; margin:0 auto; padding-top:20px; width:439px;}
.share, .share li{margin:0; padding:0; list-style: none}
.share{z-index:999999999; transition:box-shadow .3s; position: fixed; right:20px; margin:5% 0 0 0; padding:30px 10px; background:#1d1031; width:60px; border-radius: 40px;}
.share:hover{box-shadow: 0 0 5px rgba(140,66,192,1);}
.share li{display:inline-block;}
.share li a{display:block; width:60px; height:60px; transition:all 0.3s;}
.share li a:hover{transition:all 0.3s;}
.share li a span{display:none;}
.share li:nth-child(1) a{background:url(../image/share-1-fb.png) no-repeat 0 0;}
.share li:nth-child(1) a:hover{background:url(../image/share-1-fb.png) no-repeat -60px 0;}
.share li:nth-child(2) a{background:url(../image/share-2-android.png) no-repeat 0 0;}
.share li:nth-child(2) a:hover{background:url(../image/share-2-android.png) no-repeat -60px 0;}
.share li:nth-child(3) a{background:url(../image/share-3-apk.png) no-repeat 0 0;}
.share li:nth-child(3) a:hover{background:url(../image/share-3-apk.png) no-repeat -60px 0;}
.share li:nth-child(4) a{background:url(../image/share-4-apple.png) no-repeat 0 0;}
.share li:nth-child(4) a:hover{background:url(../image/share-4-apple.png) no-repeat -60px 0;}
.share li:nth-child(5) a{background:url(../image/share-5-windows.png) no-repeat 0 0;}
.share li:nth-child(5) a:hover{background:url(../image/share-5-windows.png) no-repeat -60px 0;}
.share li:nth-child(6) a{background:url(../image/share-6-baha.png) no-repeat 0 0;}
.share li:nth-child(6) a:hover{background:url(../image/share-6-baha.png) no-repeat -60px 0;}
.root{position:relative; height:1600px;}
.description{position:absolute; top:470px; left:100px; width:900px; color:#e09562; text-align:center; line-height: 1.75em; text-shadow:0 2px 2px rgba(0,0,0,.7);}
.description span{display:inline; color:#ffca23; background:#1d1031; font-weight:normal;}


/*--stargames 平台-------------------------------------------*/
.stargames{position:absolute; top:800px; left:320px; width:450px; color:#cc8859;}
.login, .logout{position:relative; display:none;}
.logout{display:block;}
.gold-line{border:#e09561 1px solid;}
.number{display:inline-block; padding:15px; border-right:#e09561 1px solid; text-align:center;}
.number em{font-size:1.75em;}
ul.you{position:absolute; left:120px; top:33px; margin:0; padding:0 0 0 auto;}
ul.act-date{margin:-5px 0 20px 0; padding:0 0 0 auto;}
.btn{position:absolute; top:125px; width:254px;}
a.btn-login{display:block; position:absolute; top:125px; left:100px; width:254px; background: url(../image/login.png) no-repeat; width:254px; height:64px; transition:background .5s;}
.btn-login:hover{background: url(../image/login-focus.png) no-repeat;}
a.btn-logout{display:block; position:absolute; top:125px; left:100px; width:254px; background: url(../image/logout.png) no-repeat; width:254px; height:64px; transition:background .5s;}
.btn-logout:hover{background: url(../image/logout-focus.png) no-repeat;}

/*--大師的留言------------------------------------------------*/
div[class*="master-talk-"]{position:absolute; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background:#471875; color:#dd9c51; border:#dd9c51 3px solid; padding:40px 30px; box-shadow:0 10px 20px rgba(0,0,0,.7);}
.master-talk-1{display:none; width:180px; top:150px; left:510px;}
.master-talk-1:after{content:""; display:block; width:28px; height:40px; background:url(../image/chat.png) no-repeat; right:-28px; top:25px; position: absolute;}
.master-talk-2{display:none; width:220px; top:150px; left:470px;}
.master-talk-2:after{content:""; display:block; width:28px; height:40px; background:url(../image/chat.png) no-repeat; right:-28px; top:25px; position: absolute;}
.master-talk-3{display:none; text-align:center; width:180px; top:110px; left:510px;}
.master-talk-3:after{content:""; display:block; width:28px; height:40px; background:url(../image/chat.png) no-repeat; right:-28px; top:25px; position: absolute;}
.time{family:'Montserrat'; font-weight:700; font-size:72px; line-height:72px;}


/*--撲克牌的區塊-----------------------------------------------*/
.poker-zone{position:absolute; top:775px; left:65px;}
ul.thirteen, ul.thirteen li{position: relative; display:block; margin:0; padding:0; list-style: none;}
ul.thirteen{top:350px;}
ul.thirteen li{position:absolute; top:0; cursor:pointer; -webkit-transition:top .2s ease-in-out; -moz-transition:top .2s ease-in-out; transition:top .2s ease-in-out;}
ul.thirteen li.none{display:none;}
ul.thirteen li:nth-child(1){left:0;}
ul.thirteen li:nth-child(2){left:40px;}
ul.thirteen li:nth-child(3){left:80px;}
ul.thirteen li:nth-child(4){left:120px;}
ul.thirteen li:nth-child(5){left:160px;}
ul.thirteen li:nth-child(6){left:200px;}
ul.thirteen li:nth-child(7){left:240px;}
ul.thirteen li:nth-child(8){left:280px;}
ul.thirteen li:nth-child(9){left:320px;}
ul.thirteen li:nth-child(10){left:385px;}
ul.thirteen li:nth-child(11){left:450px;}
ul.thirteen li:nth-child(12){left:515px;}
ul.thirteen li:nth-child(13){left:580px;}
ul.thirteen li:hover{top:-50px;}

/*--魔術師選牌的位置-------------------------------*/
.master{
	position:absolute;
	top:-5px;
	left:-5px;
  width:183px;
}

/*--玩家選牌的位置--------------------------------*/
.player{
	position:absolute;
	top:350px;
	left:787px;
	width:183px;
}

/*--翻牌的效果-------------------------------------*/

#flip {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  width: 183px;
  height: 279px;
}

.front,
.back {
  position: absolute;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#flip.active .front,
#flip.active .front:after,
#flip.active .back:after {
  -webkit-animation: front 650ms 0s 1 linear forwards;
  -moz-animation: front 650ms 0s 1 linear forwards;
  -o-animation: front 650ms 0s 1 linear forwards;
  animation: front 650ms 0s 1 linear forwards;
}

#flip.active .back {
  -webkit-animation: back 650ms 0s 1 linear forwards;
  -moz-animation: back 650ms 0s 1 linear forwards;
  -o-animation: back 650ms 0s 1 linear forwards;
  animation: back 650ms 0s 1 linear forwards;
}

#flip.reverse .front {
  -webkit-transform: scale(1) rotateY(180deg);
  -moz-transform: scale(1) rotateY(180deg);
  -ms-transform: scale(1) rotateY(180deg);
  -o-transform: scale(1) rotateY(180deg);
  transform: scale(1) rotateY(180deg);
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  -o-animation-direction: reverse;
  animation-direction: reverse;
}

#flip.reverse .back {
  -webkit-transform: scale(1) rotateY(360deg);
  -moz-transform: scale(1) rotateY(360deg);
  -ms-transform: scale(1) rotateY(360deg);
  -o-transform: scale(1) rotateY(360deg);
  transform: scale(1) rotateY(360deg);
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  -o-animation-direction: reverse;
  animation-direction: reverse;
}

/*
.flip{
	width:183px;
	height: 279px;
	position: relative;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}
.flip div{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 1s ease;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.flip div.front{
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	transform:rotateY(0deg);
}

.flip div.back{
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	transform:rotateY(180deg);
}
.flip:hover div.front{
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}
.flip:hover div.back{
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
*/


/*--壓大或壓小--*/
.big{position:absolute; top:1438px; left:214px; cursor:pointer; width:184px; height:84px; background: url(../image/big-blur.png) no-repeat; transition:all .3s;}
.big:hover{background:url(../image/big-focus.png) no-repeat;}
.small{position:absolute; top:1439px; left:693px; cursor:pointer; width:184px; height:84px; background: url(../image/small-blur.png) no-repeat; transition:all .3s;}
.small:hover{background:url(../image/small-focus.png) no-repeat;}
.none{display:none;}


/*--滿版訊息框-------------------------------------------------*/
a.magic{background:#0c0035; color:yellow; text-decoration: none;}
.full-page{position:fixed; z-index:9999999999999; width:100%; height:100%; background: rgba(0,0,0,.85);}
.msg-box{transform:translateY(-50%); top:50%; margin:0 auto; padding:50px 0; background:#471875; color:#dd9c51; border:#dd9c51 3px solid; border-radius:20px; position:relative; line-height:150%;}
.msg-box p{margin:0 0 20px 0; text-align:center;}
.msg-box a.link{color:#fff; text-decoration: none; border-bottom: 1px #fff dotted;}
.msg-box a.link:hover{color:yellow; border-bottom: 1px yellow dotted;}
.close-box{position:absolute; top:-80px; right:-15px; display:block; background: url(../image/close.png) no-repeat; width:50px; height:50px;}
.x{position:absolute; top:120px; text-align: center; width:100%; animation:jump .5s ease-in infinite;}



}
@media all and (max-width: 749px) {
	.msg-box{ width:90vw;}
}
@media all and (min-width: 750px) {
	.msg-box{ width:750px;}
}
.msg-box-1, .msg-box-2, .msg-box-3, .msg-box-4, .msg-box-5, .msg-box-6{display:none;}




/*--注意事項--------------------------------------------*/
.lay-foo{padding:50px 0; background:#ccc;}
.lay-foo header{text-align:center;}


/*--footer---------------------------------------------*/
.lay-footer{margin-top:-2px; padding:0 0 50px 0; text-align:center; background:#ccc;}
.mini{font-size:12px; line-height: 24px;}
.lay-footer a{color:#00f861;}


/*--PC 的使用者----------------------------------------*/
.lay-pc-player{padding:50px 0; background:#000; text-align:center;}


/*--webfont--*/
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-regular-webfont.eot");
  src: url("../fonts/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-regular-webfont.woff2") format("woff2"), url("../fonts/montserrat-regular-webfont.woff") format("woff"), url("../fonts/montserrat-regular-webfont.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/montserrat-bold-webfont.eot");
  src: url("../fonts/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-bold-webfont.woff2") format("woff2"), url("../fonts/montserrat-bold-webfont.woff") format("woff"), url("../fonts/montserrat-bold-webfont.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}