@charset "UTF-8";

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

html,body{
	background:#fff;
	font-size:24px;
	font-style: normal;
	font-weight: normal;
	font-family:Helvetica , Arial, '微軟正黑體', 'Microsoft JhengHei';
}












/*--主視覺的部分-------------------------------------------*/
.lay-main{background:url(../../image/kv-background.jpg) no-repeat top center; background-size: cover; transition:all .5s;}
.lay-main article{background:url(../../image/firework.png) no-repeat center top;/*火花*/}
.lay-main h1 a span, .lay-news-kv h1 a span{display:none;}
.lay-main header{height:700px;}
.lay-main h1, .lay-main h1 a, .lay-news-kv h1, .lay-news-kv h1 a{padding-top:120px; display:block; height:100%; text-align:center;}
.lay-main h1{background:url(../../image/logo-hk.png) no-repeat center 120px;}


/*--新聞頁主視覺-----------------------------------------*/
.lay-news-kv{background:url(../../image/kv-news-background.jpg) no-repeat top center; background-size:cover; width:100%; height:452px; transition:all .5s;}
.lay-news-kv header{height:452px;}
.lay-news-kv h1{background:url(../../image/logo-hk.png) no-repeat center 70px; }


/*--選擇語言---------------------------------------------*/
.lang-flag{display:block; position:absolute; top:0; right:0; width:99px; height:99px; cursor:pointer;}
.options-lang{display:none; position:absolute; top:0; padding:20px 5% 25px 5%; width:90%; background:rgba(255,255,255,.8); text-align:center; box-shadow:0 2px 5px rgba(0,0,0,.1); border-bottom:#fff 1px solid; }
.language, .language li{display:block; margin:0; padding:0; list-style: none;}
.language li{display:inline-block; text-align: left;}
.language li a{display:block; padding:10px 10px 10px 50px; width:140px; color:#000; text-decoration:none; transition:all .2s;}
/*--印尼文--*/
.language li:nth-child(1) a{background: url(../../image/lang-min-id.gif) no-repeat left center;}
/*--英文--*/
.language li:nth-child(2) a{background: url(../../image/lang-min-en.gif) no-repeat left center;}
/*--泰文--*/
.language li:nth-child(3) a{background: url(../../image/lang-min-th.gif) no-repeat left center;}
/*--日文--*/
.language li:nth-child(4) a{display:none; background: url(../../image/lang-min-jp.gif) no-repeat left center;}
/*--簡中--*/
.language li:nth-child(5) a{background: url(../../image/lang-min-cn.gif) no-repeat left center;}
/*--繁中--*/
.language li:nth-child(6) a{background: url(../../image/lang-min-hk.gif) no-repeat left center;}
.language li a:hover, .language li a:focus{background-position: left 8px; transition:all .2s;}



/*--APP下載及社群分享-------------------------------------*/
.share{position:relative; background:rgba(36,28,38,.8); text-align:center;}
ul.app-share, ul.app-share li{margin:0; padding:0; list-style: none; display:block;}
ul.app-share li, ul.app-share li a{display:inline-block;}
ul.app-share li a{margin:50px 0; width:90px; height:90px; text-decoration: none;}
ul.app-share li a, ul.app-share li a:hover, ul.app-share li a:focus{transition:all .5s;}
ul.app-share li a span{display:none;}



/*--遊戲簡介---------------------------------------------*/
.lay-description-share{background:#201614 url(../../image/game-description-background.jpg) no-repeat center top; color:#fff;}
.lay-description-share header{padding-top:78px;background: url(../../image/game-title-background.png) no-repeat center; height:120px; font-size:0.65em; color:#241c26; text-shadow: 0 1px 0 rgba(255,255,255,.4);}
.lay-description-share h2, .lay-description-share p{text-align:center;}
.lay-description-share p{text-shadow:0 1px 5px rgba(0,0,0,1);}
.lay-description-share  p:nth-last-child(1){padding-bottom:50px;}



/*--800x600特色圖---------------------------------------*/
.lay-big-picture{
/* 背景漸層 */
background: rgb(78,77,84); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(78,77,84) 0%, rgb(209,207,216) 85%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgb(78,77,84) 0%,rgb(209,207,216) 85%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgb(78,77,84) 0%,rgb(209,207,216) 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4d54', endColorstr='#d1cfd8',GradientType=0 ); /* IE6-9 */
padding:80px 0;
}
.white-shadow{background: url(../../image/800x600-white-light.png) no-repeat center center; width:100%;}
.obj-3{background:url(../../image/object-3.png) no-repeat; width:632px; height:504px; position:absolute; left:0; bottom:0;}
.obj-4{background:url(../../image/object-4.png) no-repeat; width:652px; height:248px; position:absolute; top:0; right:0;}
.obj-5{background:url(../../image/object-5.png) no-repeat; width:354px; height:476px; position:absolute; right:0; bottom:80px;}

/* 首頁 slider */
.slider {width: 100%; margin: 0 auto;}
.slick-slide {margin: 0;}
.slick-slide img {width: 100%;}
.slick-prev:before,
.slick-next:before {color: black;}
.rwd800x600{width:800px; height: auto;}
.slick-dotted.slick-slider{margin-bottom: 0;/*取消 desktop 的 margin-bottom 設定*/}
.slick-dots{bottom: 15px;/*調整小點點的位置*/}


/*--新聞區塊-------------------------------------------*/
.lay-news{padding:80px 0; background: url(../../image/news-background.jpg) no-repeat bottom center fixed; background-size:cover; text-align:center;}
ul.news,ul.news li{display:inline-block; margin:0; padding:0; list-style: none;}
ul.news li{margin-bottom: 20px;}
.white-border:hover, .white-border:focus{box-shadow:0 5px 20px rgba(249,89,166,1); transition:all .5s;}
.white-border{display:block; margin:0 10px 20px 10px; width:300px; background:#fff; text-decoration: none; color:#000; transition:all .5s;}
.news header{padding:20px;}
.white-border h4{display:block; font-size:24px; text-align: center;}
.news-more{display:inline-block; margin:20px auto; padding:20px 30px; background:#ff674e; text-align:center; font-size:36px; font-weight:bold; border-radius: 50px; transition: all 0.3s; text-decoration: none; color:#fff;}
.news-more:hover, .news-more:focus{border-radius: 20px; transition: all 0.3s;}
hgroup.title{text-align:center;}
hgroup.title h2{margin-bottom:0; font-size:46px; color:#000;}
hgroup.title h3{margin:30px 0; font-size:22px;}



/*--新聞列表頁-----------------------------------------*/
.lay-news-list{background:#d1d0d7; padding:50px 0; font-size:22px; color:#666;}
.nav, .nav li{margin:0; padding:0; list-style: none; overflow: hidden;}
.nav{border:#fff 3px solid; margin:0 auto 50px auto; width:960px;}
.nav li{display:block; float:left; width:33.33333333334%;}
.nav li a{display:block; padding:20px 0; font-size:30px; color:#545559; text-align:center; text-decoration: none;}
.nav li a:hover, .nav li a.focus{background:#fff; color:#ff674e;}

.article-list {
	display: flex; /*display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; width:33%; flex-wrap: wrap;*/ 
	justify-content: space-between;
  display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
  display: -moz-box;      /* OLD: Firefox (buggy) */
  display: -ms-flexbox;   /* MID: IE 10 */
  display: -webkit-flex;  /* NEW, Chrome 21?28, Safari 6.1+ */
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;

}
.article-list figcaption, .article-list figure{margin:0; padding:0;}
.article-list > a {position: relative; display: inline-block; margin:0 auto 100px auto; padding:0; width: 300px; background:#fff; color:#666; text-decoration: none;}
/* iOS 相容設定 -------------------------------------------------------------*/
.article-list a:nth-child(1){order: 1; -webkit-order: 1;}
.article-list a:nth-child(2){order: 2; -webkit-order: 2;}
.article-list a:nth-child(3){order: 3; -webkit-order: 3;}
.article-list a:nth-child(4){order: 4; -webkit-order: 4;}
.article-list a:nth-child(5){order: 5; -webkit-order: 5;}
.article-list a:nth-child(6){order: 6; -webkit-order: 6;}
.article-list a:nth-child(7){order: 7; -webkit-order: 7;}
.article-list a:nth-child(8){order: 8; -webkit-order: 8;}
.article-list a:nth-child(9){order: 9; -webkit-order: 9;}
.star, .cal{display:inline-block; width:20px; height:15px; background-position: left center;}
.star{background:url(../../image/star.png) no-repeat;}
.cal{background:url(../../image/cal.png) no-repeat;}
.message, .message li{margin:0; padding:0; list-style: none; overflow:hidden;}
.message{padding:15px 20px; border-bottom:#f1f1f3 1px solid;}
.message li{display:inline-block; float:left; font-size:14px;}
.message li:nth-child(2){float:right;}
.tc{padding:20px; font-size:22px;}
.tc h4{font-size:30px; color:#000;}
.more-msg{position: absolute; bottom:-70px; padding:20px 0; background:#fff; width:300px; text-align:center; border-top:#f1f1f3 1px solid; color:#ff674e;}
.more-icon{display:inline-block; background: url(../../image/more-icon.png) no-repeat left center; width:25px; height:20px;}



/*--分頁----------------------------------------------*/
.page-bar{background:#d1d0d7; padding:0 0 80px 0; text-align: center;}
.page, .page li{margin: 0; padding: 0; list-style: none; display:inline-block;}
.page{background:#fff; border-radius: 20px;}
.page li a{display:inline-block; padding:8px; width:25px; height:25px; border-radius: 20px; text-decoration: none; color:#000; transition:all .3s;}
.page li a:hover, .page li a.focus{background:#ff674e; color:#fff; transition:all .3s;}
.prev-next{margin-top:20px;}
.prev-next a{display:block; float:left; padding:10px 20px; background:#ff674e; color:#fff; border-radius: 30px; text-decoration: none; transition:all .3s;}
.prev-next a:hover, .prev-next a:focus{background:#fff; color:#ff674e; transition:all .3s;}
.prev-next a.next{float:right;}


/*--scroll top & QRcode-------------------------------*/
.scrollToTop{width:130px; height:130px; text-decoration: none; position:fixed; bottom:4em; right:2em; transition:all .3s; display:none;}



/*--youtube影片---------------------------------------*/
.lay-youtebe {background:#d1d0d7;}
.movie{margin:80px auto;}



/*--footer---------------------------------------------*/
/*.lay-footer{padding:80px 0; background:#fff; text-align:center;}
.line{background:url(../../image/line.gif) repeat-x; text-align:center;}
.lay-footer p{line-height:160%; font-size:.5em; color:#ccc;}*/
.lay-footer{padding:50px 0; text-align:center; font-size:1em; background:white;}
.mini{font-size:12px; line-height: 24px;}


/*--動畫設定-------------------------------------------*/
@keyframes share-move {
  from {bottom:-120px;}
  to {bottom:0;}
}
.car-animation{position: absolute; top:150px; left:calc(50% - 800px);}
.obj-1{ position: relative; background:url(../../image/object-1.png) no-repeat; width: 282px; height: 291px; animation:car 2s ease 0s infinite alternate;}
.obj-1:after{content:''; position:absolute; top:280px; left:0; background:url(../../image/object-shadow-1.png) no-repeat; width:282px; height:291px; animation:car-shadow 2s ease 0s infinite alternate;}
@keyframes car{
  from { margin-top: 20px;}
  to { margin-top: 80px;}
}
@keyframes car-shadow{
  from { margin-top: 100px; -webkit-filter:blur(10px) opacity(50%);}
  to { margin-top: 0; -webkit-filter:blur(5px);}
}
.hello-ferry{position:absolute; top:30px; right:calc(50% - 500px);}
.ferry-animation{position:relative;}
.ferry-shadow{position:absolute; top:20px; left:20px; background:url(../../image/object-shadow-2.png) no-repeat center bottom; width:223px;  min-height:221px; animation:ferry-obj-2-shadow .7s linear 0s infinite alternate;}
.obj-2{position:absolute; top:0; left:0; background:url(../../image/object-2.png) no-repeat top center; width:223px; height:221px; animation:ferry-obj-2 .7s linear 0s infinite alternate;}
@keyframes ferry-obj-2{
	from{margin-top:10px;}
	to{margin-top:0;}
}
@keyframes ferry-obj-2-shadow{
	from{margin-top:0;}
	to{margin-top:5px; -webkit-filter:blur(2px) opacity(80%);}
}





/*RWD設定----------------------------------------------*/

/* 桌面 */
@media all and (min-width: 1000px) {
  body{font-size: inherit;}

  /*--戰士--*/
  .warrior{position: absolute; left:calc(50% - 800px); bottom:0; width:707px; height:700px; background:url(../../image/warrior.png) no-repeat; transition:all 1s;}
  .lay-main:hover .warrior{left:calc(50% - 700px);}
  /*--船長--*/
  .pirate{position: absolute; right:calc(50% - 950px); bottom:0; width:1096px; height:700px; background:url(../../image/pirate.png) no-repeat; transition:all 1s;}
  .lay-main:hover .pirate{right:calc(50% - 850px);}

  *[class*="face-"]{position:absolute;}
	/*--女爵--*/
	.face-1{background:url(../../image/face-1.png) no-repeat; left:calc(50% - 500px); bottom:0; width:259px; height:297px;}
	/*--阿拉伯商人--*/
	.face-2{background:url(../../image/face-2.png) no-repeat; right:calc(50% - 480px); bottom: 200px; width:175px; height:214px;}
	/*--水手--*/
	.face-3{background:url(../../image/face-3.png) no-repeat; right:calc(50% - 400px); bottom: 30px; width:202px; height:230px;}

	/*--facebook--*/
	.icon-1 a, .icon-1 a:hover, .icon-1 a:focus{background:url(../../image/share-icon-1.png) no-repeat 0 0;}
	.icon-1 a:hover, .icon-1 a:focus{background-position:0 -90px;}
	/*--android--*/
	.icon-2 a, .icon-2 a:hover, .icon-2 a:focus{background:url(../../image/share-icon-2.png) no-repeat 0 0;}
	.icon-2 a:hover, .icon-2 a:focus{background-position:0 -90px;}
	/*--APK Download--*/
	.icon-3 a, .icon-3 a:hover, .icon-3 a:focus{background:url(../../image/share-icon-3.png) no-repeat 0 0;}
	.icon-3 a:hover, .icon-3 a:focus{background-position:0 -90px;}
	/*--Apple--*/
	.icon-4 a, .icon-4 a:hover, .icon-4 a:focus{background:url(../../image/share-icon-4.png) no-repeat 0 0;}
	.icon-4 a:hover, .icon-4 a:focus{background-position:0 -90px;}
	/*--首頁--*/
	ul.app-share .icon-5{display:none;}
	.icon-5 a, .icon-5 a:hover, .icon-5 a:focus{background:url(../../image/share-icon-5.png) no-repeat 0 0;}
	.icon-5 a:hover, .icon-5 a:focus{background-position:0 -90px;}
	/*--巴哈姆特--*/
	.icon-6 a, .icon-6 a:hover, .icon-6 a:focus{background:url(../../image/share-icon-6.png) no-repeat 0 0;}
	.icon-6 a:hover, .icon-6 a:focus{background-position:0 -90px;}
}


/* 平板 & 手機共用 */

@media all and (max-width: 999px) {
  .grid{width: 100%;}
  .grid *[class*="col_"]{
      float:none;
      width:auto;
      clear:both;
      display:block;
  }
  .lay-main{background:url(../../image/kv-mobile-background.jpg) no-repeat top center; transition:all .5s;}
  .lay-news-kv{background:url(../../image/kv-news-mobile-background.jpg) no-repeat top center; background-size:cover; width:100%; height:550px; transition:all .5s;}
  .lay-main header{height:550px;}
  .lay-main article{background:none;}
  .lay-main h1{background-position: center 50px;}
  .lay-description-share{background-position:center -200px;}
  .lay-big-picture{padding:0;}
  .lay-footer{padding-top:30px; padding-bottom:100px;}
  .game-content, .grand-cruise{padding:0 5%;}
  .nav{width:90%; margin-left:5%; margin-right:5%;}
  hgroup.title{padding:0 5%;}
  .share {position: fixed; bottom:0; background:rgba(36,28,38,1); animation:share-move .7s 1; width:100%; z-index:9999999;}
  ul.app-share li a{margin:10px 0; width:40px; height:40px;}

  /*--facebook--*/
	.icon-1 a, .icon-1 a:hover, .icon-1 a:focus{background:url(../../image/share-icon-min-1.png) no-repeat 0 0;}
	.icon-1 a:hover, .icon-1 a:focus{background-position:0 -40px;}
	/*--android--*/
	.icon-2 a, .icon-2 a:hover, .icon-2 a:focus{background:url(../../image/share-icon-min-2.png) no-repeat 0 0;}
	.icon-2 a:hover, .icon-2 a:focus{background-position:0 -40px;}
	/*--APK Download--*/
	.icon-3 a, .icon-3 a:hover, .icon-3 a:focus{background:url(../../image/share-icon-min-3.png) no-repeat 0 0;}
	.icon-3 a:hover, .icon-3 a:focus{background-position:0 -40px;}
	/*--Apple--*/
	.icon-4 a, .icon-4 a:hover, .icon-4 a:focus{background:url(../../image/share-icon-min-4.png) no-repeat 0 0;}
	.icon-4 a:hover, .icon-4 a:focus{background-position:0 -40px;}
	/*--首頁--*/
	.icon-5 a, .icon-5 a:hover, .icon-5 a:focus{background:url(../../image/share-icon-min-5.png) no-repeat 0 0;}
	.icon-5 a:hover, .icon-5 a:focus{background-position:0 -40px;}
	.app-share li.icon-6{display:none;}
	.movie{margin:0;}
}




/* 平板 */

@media all and (min-width: 750px) and (max-width: 999px) {

}


/* 手機 */

@media all and (max-width: 749px) {
	.scrollToTop{width:130px; height:130px; text-decoration: none; position:fixed; bottom:-130px; right:2em; transition:all .3s; display:none;}
  .nav li a{font-size:24px;}
}
@media all and (max-width: 400px) {
  .nav li a{font-size:20px;}
}