@charset "utf-8";
/* CSS Document */

html, body {
  /*background: url('../images/bg-point.png') center center repeat rgb(0,0,0);*/
  overflow-x:hidden;
  background: url('../images/bg_top.jpg') center -400px no-repeat, url('../images/bg.jpg') center top repeat-y;
  background-size: cover auto; cover auto;
	font-size: 100%;
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", DFKai-SB, sans-serif;
  transition: all 0ms linear 0s;
}

H1 {font-size: 2em; font-weight: 900; display : inline; line-height: 40px;}
H2 {font-size: 1.275em; font-weight:bold; display : inline;}
H3 {font-size: 1em; display : inline; font-weight:normal;}
H4 {font-size: 0.875em; display : inline; font-weight:normal;}
H5 {font-size: 0.625em; display : inline; font-weight:normal; line-height: 24px;}

ul, li {display:block; list-style-type:none;}
a {text-decoration:none; color: black;}
a:hover {color: rgb(150,150,150); cursor: pointer;}
select {font-size: 1em;}

/* ======================= */
/* 下拉選單區塊  */
/* ======================= */
.select_language {
  z-index: 50;
  margin: 0 auto;
  padding-top: 20px; padding-right: 20px;
  text-align: right;
  width: 1000px; height: 40px;
  position:relative; top: 0px;
}

.select_language ul {
  width: 130px; text-align: left;
	display: inline-block; position: relative;
  background-color: #fff;
  border: 1px solid #616161;
  border-radius: 10px;
}

/* ======================= */
/* 下拉選單的高度－可自修改 */
/* ======================= */
.select_language ul li ul {
	display: none;
	position: absolute;
	overflow: auto;
	border-image: initial;
}

.select_languageul li ul li {
	background: #fff;
}

.select_language ul li ul li a {
	display: block;
	padding: 0 10px;
	overflow: hidden;
	line-height: 42px;
	color:#555;
}

/* ======================= */
/* 子層選單 */
/* ======================= */
.select_language ul li ul li ul.children{
	margin: 0 auto;
	display: none;
	position: inherit;
	width: 100%;
	z-index:none;
	border: 0;
	height:inherit;
}

.select_language ul li ul li ul.children li a{padding-left:30px;}

/* ======================= */
/* 當選到時－可自行修改圖示 */
/* ======================= */
.option_selected {
    height: 40px;
    color: #555;
    display: block;
    line-height: 42px;
    padding: 0 8px;
    position: relative;
}

.option_list li{
	float:none;
	width:100%;
}

/* ======================= */
/* 滑入選項變色－可自修改*/
/* ======================= */
.hovered_item{
	background: yellow;
	font-weight: bold;
	color:#333;
}
/* ===========下拉選單區塊end============ */



header {
  /*border: solid 1px rgb(190,190,190);*/
  z-index: 10;
  margin: 0 auto;
  position:relative;
  width: 100%; height: 600px;
  background: url('../images/role_cloud.png') repeat-x;
  background-size: 70% auto;
  -webkit-animation: cloud 60s steps(1440) infinite alternate;
  animation: cloud 60s steps(1440) infinite alternate;
  }
  @-webkit-keyframes cloud {
    from {background-position: 0px bottom; }
    to {background-position: 1600px top; }
    }

  @keyframes cloud {
    from {background-position: 0px top; }
    to {background-position: 1600px bottom; }
  }

header div.language {
  display: none;
    z-index: 50;
    margin: 0 auto;
    padding-top: 20px; padding-right: 20px;
    text-align: right;
    width: 1000px; height: 40px;
    position:relative; top: 0px;
  }

header div.logo_index {
    z-index: 50;
    margin: 0 auto;
    width: 1000px; height: 270px;
    position:relative; top: 200px;
    text-align: left;
  }

header div.logo_index img { width: auto; height: 100%;}

header div.main_images {
  z-index: 10;
  margin: 0 auto;
  width: 90%; height: 500px;
  position:relative; top: -340px;
}

header div.main_images img {width: 100%; height: auto;}
header div.main_images div.role_before {
  z-index: 20;
  width: 700px; height: 680px;
  position:absolute; top: -80px; right:10%;
}

div.role_03 {margin-top: -50px;}
div.role_04 {margin-top: 10px;}

header div.main_images div.role_after {
  z-index: 15;
  width: 450px; height: 519px;
  position:absolute; top: 0px; left:15%;
}


/****************role_animation****************/
div.role_before div, div.role_after div {
    position: absolute;top: 0; left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}
div.role_before div, div.role_after div {
    -webkit-animation: round 10s linear infinite;
            animation: round 10s linear infinite;
}

@-webkit-keyframes round {
    4% {opacity: 1; filter: alpha(opacity=100);}
    20% {opacity: 1; filter: alpha(opacity=100);}
    24% {opacity: 0; filter: alpha(opacity=0);}
}
@keyframes round {
    4% {opacity: 1; filter: alpha(opacity=100);/*淡入*/}
    20% {opacity: 1; filter: alpha(opacity=100);/* 靜止*/}
    24% {opacity: 0; filter: alpha(opacity=0);/*淡出*/}
}

div.role_before div:nth-child(2), div.role_after div:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

div.role_before div:nth-child(1), div.role_after div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}
/****************role_animation****************/



/****************nav start****************/
div.m_nav{display: none;}

nav {
  z-index: 100;
  margin: 0 auto;
  text-align: center;
  width: 1000px; height: 100px;
  position:relative; top: -320px;
}

nav ul li{
  display:inline-block;
  margin: 20px 3px 0px 3px;
  width: 190px; height: 55px;
  border-radius: 7px;
  -webkit-transition: background-color 0.3s;
          transition: background-color 0.3s;
}

nav ul li.btn_fb{
  background: url('../images/btn_fb.png') center center no-repeat;
  background-size: 100% auto;
  background-color: rgb(0, 0, 0);
}
nav ul li.btn_fb_en{
  background: url('../images/btn_fb_en.png') center center no-repeat;
  background-size: 100% auto;
  background-color: rgb(0, 0, 0);
}
nav ul li.btn_fb:hover, nav ul li.btn_fb_en:hover {background-color: #3b5998;}

nav ul li.btn_baha{
  background: url('../images/btn_baha.png') center center no-repeat;
  background-size: 100% auto;
  background-color: rgb(0, 0, 0);
}
nav ul li.btn_baha:hover{background-color: #117e96;}

nav ul li.btn_apk{
  background: url('../images/btn_apk.png') center center no-repeat;
  background-size: 100% auto;
  background-color: rgb(0, 0, 0);
}
nav ul li.btn_apk:hover{background-color: #c00000;}

nav ul li.btn_gp{
  background: url('../images/btn_gp.png') center center no-repeat;
  background-size: 100% auto;
  background-color: rgb(0, 0, 0);
}
nav ul li.btn_gp:hover{background-color: #6f6f6f;}

nav ul li.btn_ios{
  background: url('../images/btn_ios.png') center center no-repeat;
  background-size: 100% auto;
  background-color: rgb(0, 0, 0);
}
nav ul li.btn_ios:hover{
  background: url('../images/btn_ios.png') center center no-repeat, -webkit-linear-gradient(top, #1d8ef8, #2130ec);
  background: url('../images/btn_ios.png') center center no-repeat, -moz-linear-gradient(top, #1d8ef8, #2130ec);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1d8ef8', endColorstr='#2130ec');
}
/****************nav end****************/



/****************section&article start****************/
section {
  z-index: 200;
  margin: 0 auto;
  width: 100%; height: auto;
  }

article {
  z-index: 200;
  margin: 0 auto;
  width: 1000px;
  background: url('../images/bg_frame_01.png') left top no-repeat, url('../images/bg_frame_02.png') right top no-repeat, url('../images/bg_frame_03.png') left bottom no-repeat, url('../images/bg_frame_04.png') right bottom no-repeat;
  background-size: 133px 138px;
  }
section#category H2, section#inside H2 {font-size: 1.275em; font-weight:100 ; display : inline;}
section#category H2 span, section#inside H2 span {font-size: 1.475em; font-weight:bold; display : inline; color: rgb(180, 0, 0);}
section#category article {height: 1270px; text-align: center;margin-top: 40px; margin-bottom: 60px;}
section#inside article {height: auto; text-align: center;margin-top: 40px; margin-bottom: 160px; padding-bottom: 40px;}

/*------article news start------*/
article div.news {
  width: 300px; height: 330px;
  margin-top: 20px; padding: 15px;
  float: left;
  -webkit-transition: all 0.2s;
          transition: all 0.2s;
  /*border: solid 1px rgb(190,190,190);*/
  }
article div.news_pic {
  width: 300px; height: 225px;
  background: url('../images/logo.png') center center no-repeat;
  background-color: #fff;
  background-size: 280px auto;
  -webkit-transition: all 0.5s;
          transition: all 0.5s;
  }
article div.tag {margin: 10px auto; width: 90px; color: #fff; display: inline-block; border-radius:8px; /*三個分類框框*/}
article div.ns {background-color: rgb(0, 84, 255); /*新聞底色*/}
article div.notice {background-color: rgb(96, 178, 0); /*公告消息底色*/}
article div.event {background-color: rgb(180, 0, 0); /*最新活動底色*/}
article div.date {color: gray; /*文章日期*/}
article div.depiction {width: 300px; height: 100px;text-align: center;line-height: 24px; color: #434343; /*標題敘述*/}
article div.depiction div.news_title {width: 100%; text-align: left;}
article div.news:hover {background-color: rgba(255, 216, 0, 0.5);}
article div.news:hover .news_pic {border-radius: 15px; background-color: rgb(238, 238, 238);}
article div.news:hover .depiction {color: black;}
article ul.more {width: 100%; height: 50px; margin-top: 20px; float: left;}
article ul.more li {height: 20px; padding:10px 10px; display: inline-block; color: rgb(0, 0, 0); font-size: 1em;font-weight:normal;}
article ul.more li:hover {color: rgb(180, 0, 0);text-decoration:underline; font-size: 1.275em; font-weight:bold; cursor: pointer;}
/*------article news end------*/

/*------change tab start------*/
ul, li {margin: 0 auto;padding: 0;list-style: none;}

.abgne_tab {margin: 0 auto; width: 100%;clear: left;}

ul.tab {width: 100%; height: 50px;}
ul.tab span {font-size: 1.475em;}

ul.tab li {
  display: inline-block;
  height: 50px;
  line-height: 55px;
  overflow: hidden;
  position: relative;
}

ul.tab li a {
  font-size: 1em;
  display: inline-block;
  height: 49px;
  padding: 0 10px;
  color: #000;
  text-decoration: none;
}
ul.tab li a:hover {font-size: 1.275em; color: rgb(180, 0, 0);border-bottom: 2px solid rgb(180, 0, 0);}
ul.tab li.active  {font-size: 1.275em; color: rgb(180, 0, 0);border-bottom: 2px solid rgb(180, 0, 0);}
ul.tab li.active a:hover {font-size: 1.275em; color: rgb(180, 0, 0);border-bottom: 2px solid rgb(180, 0, 0);}
div.tab_container {width: 100%; }
div.tab_container .tab_content {padding-top: 20px;}
/*------change tab end------*/

/*------article words start------*/
article div.inside {width: 900px; margin: 40px 50px 0px 50px; text-align: left;}
article div.inside img {width: 100%; height: auto; }
article div.words {line-height: 36px; margin-bottom: 60px;}
/*------article words end------*/
/****************section&article end****************/



/****************footer start****************/
footer {
  z-index: 999;
  margin: 0 auto;
  position: relative; bottom: 0px; text-align: center;
  width: 100%; height: 120px;
  color: #FFF; background-color: rgb(25,25,25);
  }

footer ul {
  margin: 0 auto;
  width: 1000px; height: auto;
  position: relative; left: 50px;
  /*border: solid 1px rgb(190,190,190);*/
  }

footer li.stargames {
  display: inline-block;
  position: relative; top:10px;
  width: 220px; height: 100px;
  margin: 0 auto;
  background: url('../images/logo_stargames.png') center center no-repeat;
  background-size: 80% auto;
}

footer li.happyday {
  display: inline-block;
  position: relative; top:10px;
  width: 220px; height: 100px;
  margin: 0 auto;
  background: url('../images/logo_joypiegame.png') center center no-repeat;
  background-size: 100% auto;
}

footer li.tips {display: inline-block;height: 80px;}

footer li.tips ul {
  width: 440px; height: 70px;
  position: relative; top:-10px;
  margin: 10px; margin-right: none; padding-left: 80px;
  background: url('../images/logo_12.png') left center no-repeat;
  background-size: auto 100%; text-align: left; line-height: 24px;
}

/****************footer end****************/



/****************GO TOP-start****************/
  .hide{display:none;}
  .to-top {
    z-index: 999;
    width: 200px; height: 220px;
    position: fixed; bottom: 10px;right: 10px;
    border-radius: 15px;
    text-align: center;
    background:url('../images/QR_code.png') center -10px no-repeat;
    background-size: auto auto;
    background-color: rgba(0, 0, 0, 0.7);
  }
  .to-top a{
  	display:block;
    width: 200px; height: 20px;
    padding-top: 15px;
    color: white;
  }
  .to-top a:hover{ color: yellow; }
/****************GO TOP-end****************/



/****************RWD start****************/
/*當螢幕寬度在1600px以上*/
@media screen and (min-width:1200px) and (max-width: 1499px){
  header div.main_images div.role_before {top: -50px; right:5%;}
  header div.main_images div.role_after {top: 0px; left:10%;}
}

/*當螢幕寬度在1000px~1499px之間*/
@media screen and (min-width: 1000px) and (max-width: 1199px){
  header div.main_images div.role_before {top: -50px; right:-5%;}
  header div.main_images div.role_after {width: 441px; height: 509px; left:-5%;}
  /****************nav start****************/
  nav {width: 950px;}
  nav ul li{ width: 180px;}
  nav ul li.btn_ios:hover{background-size: 100% auto;}
  /****************nav end****************/

}

/*當螢幕寬度在320px~999px -device- 之間*/
@media screen and (min-width: 320px) and (max-width: 999px){
    html, body {background: url('../images/bg_top.jpg') center -200px no-repeat, url('../images/bg.jpg') center top repeat-y;}

    H1 {font-size: 2.5em; line-height: 48px;}
    H2 {font-size: 1.7em; font-weight:bold; display : inline;}
    H3 {font-size: 1.5em; display : inline; font-weight:normal;}
    H4 {font-size: 1.5em; display : inline; font-weight:normal;}
    H5 {font-size: 1.2em; display : inline; font-weight:normal; line-height: 24px;}

    select {font-size: 1.7em; background-color: yellow;}
    .select_language {display: none;}
    header {width: 100%; height:900px;}
    header div.language {display: block; width: 100%; right: 50px; top:50px; }
    header div.logo_index {margin: 0 70px; width: 550px; height: 300px; top: 0px;}
    header div.logo_index img {width: auto; height: 100%;}
    header div.main_images { height: 700px; top: -200px;}
    header div.main_images img {width: 100%; height: auto;}
    header div.main_images div.role_before { width: 800px; height: 777px;top: 0px; right:-10%;}
    div.role_03 {margin-left:100px;}
    div.role_04 {margin-left:-100px;}
    header div.main_images div.role_after { width: 400px; height: 462px;top: 100px; left:0%;}

    /****************nav start****************/
    nav {display: none;}
    div.m_nav {display: block; width: 100%; height: 120px;position:fixed; z-index: 9999;bottom: 0px;}
    div.m_nav ul li{display: inline-block; margin: 0px -4px 0px 0px; width: 20%; height: 120px; border-radius: 0px;}
    div.m_nav ul.less li {display: inline-block; margin: 0px -4px 0px 0px; width: 25%; height: 120px; border-radius: 0px;}
    div.m_nav ul li.btn_fb{background: url('../images/btn_fb_m.png') center center no-repeat; background-size: auto 100%;  background-color: #3b5998;}
    div.m_nav ul li.btn_fb_en{background: url('../images/btn_fb_m_en.png') center center no-repeat; background-size: auto 100%;  background-color: #3b5998;}
    div.m_nav ul li.btn_baha{background: url('../images/btn_baha_m.png') center center no-repeat; background-size: auto 100%; background-color: #117e96;}
    div.m_nav ul li.btn_apk{background: url('../images/btn_apk_m.png') center center no-repeat; background-size: auto 100%; background-color: #c00000;
    }
    div.m_nav ul li.btn_gp{background: url('../images/btn_gp_m.png') center center no-repeat; background-size: auto 100%; background-color: #6f6f6f;}
    div.m_nav ul li.btn_ios {
      background: url('../images/btn_ios_m.png') center center no-repeat;
      background-size: auto 100%;
      background: url('../images/btn_ios_m.png') center center no-repeat, linear-gradient(top, #1d8ef8, #2130ec);
      background: url('../images/btn_ios_m.png') center center no-repeat, -webkit-linear-gradient(top, #1d8ef8, #2130ec);
      background: url('../images/btn_ios_m.png') center center no-repeat, -moz-linear-gradient(top, #1d8ef8, #2130ec);
      background: url('../images/btn_ios_m.png') center center no-repeat, filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1d8ef8', endColorstr='#2130ec');
    }
    /****************nav end****************/

    article {width: 100%; background-size: 133px 138px;/*border: solid 1px rgb(190,190,190);*/}
    section#category H2, section#inside H2 {font-size:2.5em; font-weight:100 ; display : inline;}
    section#category H2 span, section#inside H2 span{font-size: 2em; font-weight:bold; display : inline; color: rgb(180, 0, 0);}
    section#category article {height: 2650px; text-align: center;margin-top: 40px; margin-bottom: 100px; padding-bottom: 40px;}
    section#inside article {margin-bottom: 100px; padding-bottom: 80px;}

    /*------article news start------*/
    article div.news {width: 100%; height: 225px;}
    article div.news_pic {float: left;margin-left: 5%;}
    article div.tag {margin: 20px auto; width: 150px; /*三個分類框框*/}
    article div.depiction {float: left; margin-left: 20px; width: 500px; height: 225px; line-height: 28px;/*標題敘述*/}
    article ul.more li {height: 20px; padding:10px 10px; font-size: 2em;}
    article ul.more li:hover {font-size: 2.275em;}
    /*------article news end------*/

    /*------article words start------*/
    article div.inside {width: 90%;}
    article div.inside img {width: 100%; height: auto; }
    article div.words {line-height: 36px; margin-bottom: 60px;}
    /*------article words end------*/

    /*------change tab start------*/
    ul.tab {width: 100%; height: 80px;padding-top: 20px;}
    ul.tab span {color:rgb(180, 0, 0);}
    ul.tab li {height: 70px; line-height: 75px;}
    ul.tab li a:hover {border-bottom: 0px;}
    ul.tab li.active  {border-bottom: 5px solid rgb(180, 0, 0);}
    ul.tab li.active a:hover {border-bottom: 0px;}
    /*------change tab end------*/

    /****************footer start****************/
    footer {width: 100%; height: 400px;}
    footer ul {width:100%; left: 0px; ;}
    footer li.stargames,footer li.happyday {width: 300px; height: 150px;}
    footer li.tips {display: inline-block;height: 80px;}
    footer li.tips ul {width: 100%; top:0px;}
    /****************footer end****************/



    /****************GO TOP-start****************/
      .to-top h2 {font-size: 3em; line-height: 2em;}
      .to-top {height: 120px; bottom: 140px; background:none; background-color: rgba(100, 100, 100, 0.7);}
      .to-top a{height: 120px;}
    /****************GO TOP-end****************/
}
/****************RWD end****************/