@charset "utf-8";
/*------------------Copyright-------------------
tw.dragonsprophet.com
Copyright © 2015 Runewaker. All rights reserved.
Author: Mildred Hung
----------------------------------------------*/

body { font: 13px "微軟正黑體", Arial, Tahoma, Verdana, sans-serif; margin:0; padding:0; color:#bebebe; line-height:170%; background:#000;}

h1,h2,h3,h4,h5,img,section,form { margin:0; padding:0;border:none;}
h4.title, label {font-size:15px; color:#ffeb7f;}
h4.game_name {font-size:16px;color:#efa626;}/* slider 2.10*/
h4.game_name em {font-size: 15px;color: #ffeb7f;}/* slider 2.10*/
.slide p {color:#bebebe;}/* slider 2.10*/

h5.subtitle { font-size:15px; color:#ffeb7f; word-spacing:2px; padding:2px 0 0 25px; margin-bottom:10px; width:150px; height:28px; background:url(../images/h5.png) no-repeat;}
h1,h2,h3,ul#menu li:first-child a, #social a, title_news{ text-indent: 100%; white-space: nowrap; overflow: hidden;} /*隱藏文字*/
footer h3{ display:none;} /*h3區塊隱藏*/

ul#menu, ul#menu li { margin:0; padding:0; list-style:none;}
.clear {clear:both;}
a { color:#FFF; text-decoration: none;}
a:hover { position:relative;top:1px;left:1px;}
a.btn_more { color:#ffe9b4; font-weight:bolder; text-align:center;}
a.btn_enter { color:#ffe9b4; font-size:15px; font-weight:bolder; text-align:center;}
a.read { color:#ffe9b4;}
.news_game a{ color:#ffe9b4; margin-right:5px;}
.news a {color:#dd4335; font-weight:bold;}

#slideshow a { display:block; opacity: 0.9; color:#efa626;} /* slider 2.10*/
#slideshow a:hover {top:0;left:0; opacity: 1; }/* slider 2.10*/
#slideshow a img {border:1px #eaac58 solid; border-radius:5px;}/* slider 2.10*/
#slideshow a img:hover {border:1px #fac072 solid;}/* slider 2.10*/

table {border-collapse:collapse; margin:auto;}
td .resize { line-height:1px;}
th, td {padding:2px 4px;}

#wrap {width:100%; position:relative;}

/*------------menu----------------*/
nav {position:absolute; z-index:77777; left:50%; margin-left:-490px; width:980px; height:105px; background:url(../images/nav.png) no-repeat;}

h1#logo a { display: block; width: 339px; height: 105px;} 

ul#menu { position: absolute; top: 24px; left: 339px;}
ul#menu li{ float:left;}

ul#menu li.on{ color:#FFF; display: block; padding:33px 16px 7px; width:64px; height:22px; text-align:center; background:url(../images/ch/element.png) -44px -68px no-repeat;}

ul#menu li a{ display: block; padding:33px 16px 7px; width:64px; height:22px; text-align:center; background:url(../images/ch/element.png) -44px -6px no-repeat;}
ul#menu li a:hover{ top:0;left:0; padding:34px 16px 6px; background:url(../images/ch/element.png) -44px -68px no-repeat;}

ul#menu li:first-child a{ display: block; padding:0; width:44px; height:62px; background:url(../images/ch/element.png) 0 -6px no-repeat;}
ul#menu li:first-child a:hover{ top:0;left:0; background:url(../images/ch/element.png) 0 -68px no-repeat;}

.language { position: absolute; top: 20px; left: 864px; padding:40px 0 0 16px; width:93px; height:26px;}
.language:hover { background:url(../images/ch/element.png) -141px -64px no-repeat; }

.language a { display:block; float:left; margin-right:8px;}

/*---------------footer---------------*/
footer {width:960px; height:56px; margin:0 auto 5px; text-align:right;}
#runewaker {float:left; width:127px; height:56px; margin-right:10px;}
#gamewaker {float:left; width:174px; height:56px;}

/*------------index----------------*/
.box_bg {width:1000px; height:667px; margin:0 auto 10px; background:url(../images/ch/boxbg.png) no-repeat;}
.banner { position:absolute; z-index:1; width: 100%; height:410px; }
/* .control_area {position:absolute; z-index:3; top:379px; left:50%; margin-left:-107px; width:214px; height:55px; background:url(../images/element.png) 0 -130px no-repeat;}*/

.content_bg { position:absolute; z-index:2; top:410px; width:100%; background:url(../images/bg.jpg) no-repeat;}
.bg_top {  width:100%; height:8px; background:url(../images/bg_top.png) repeat-x;}


/*------------index_game-------------*/
#game_index { padding: 17px 30px 3px 0px; width:930px; height:160px;} /*slider 2.10 */
.game_index { float:left; width: 310px; height:100px;}
.game_index:last-child { margin:0;}

/*------------index_news--------------*/
.news_box { float:left; padding-left:30px; margin-right:30px; width:620px; height:400px;}
.news_box article {margin-bottom:35px;height: 110px;}
.news_img { float:left; margin-top:4px; border:1px #eaac58 solid; border-radius:5px; margin-right:10px; width:150px; height:100px;}
.news_title  { float:left; width:455px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
a.btn_more { display:block; float:right; margin-top:-25px; padding-top:3px; width:110px; height:37px; background:url(../images/ch/element.png) 0 -185px no-repeat;}
a.btn_more:hover { background:url(../images/ch/element.png) -110px -185px no-repeat;}

/*-----------index_social------------*/
#social { float:left; padding-left:40px; margin-bottom:15px; width:280px; height:145px;}
#social a { display:block; float:left; width:62px; height:62px; margin-right:15px;}
a.forum { background:url(../images/ch/element.png) 0 -225px no-repeat;}
a.facebook { background:url(../images/ch/element.png) -62px -225px no-repeat;}
a.youtube{ background:url(../images/ch/element.png) -124px -225px no-repeat;}

/*----------index_activity-----------*/

#activity { float:left; width:300px; height:250px;}
.activity { padding:5px; width:290px; height:110px; margin-bottom:15px; background:url(../images/ch/element.png) 0 -287px no-repeat;}
.activity img{ border-radius:5px;}

/*-------------page---------------*/

.content_page_bg { position:absolute; z-index:2; top:310px; width:100%; background:url(../images/bg.jpg) no-repeat;}
.page_bg { width:1000px; padding-top:50px; margin:0 auto 10px;}
.title_about { position:absolute; z-index:3; top:-3px; width:211px; height:49px; margin-bottom:10px; background:url(../images/ch/element.png) 0 -407px no-repeat;}
.title_news { position:absolute; z-index:3; top:-3px; width:211px; height:49px; margin-bottom:10px; background:url(../images/ch/element.png) 0 -456px no-repeat;}
.title_products { position:absolute; z-index:3; top:-3px; width:211px; height:49px; margin-bottom:10px; background:url(../images/ch/element.png) 0 -505px no-repeat;}
.title_awards { position:absolute; z-index:3; top:-3px; width:211px; height:49px; margin-bottom:10px; background:url(../images/ch/element.png) 0 -554px no-repeat;}
.title_contact { position:absolute; z-index:3; top:-3px; width:211px; height:49px; margin-bottom:10px; background:url(../images/ch/element.png) 0 -603px no-repeat;}

.banner_about {height:495px;}
.banner_news { position:absolute; z-index:1; width:100%; height:310px; background:url(../images/banner/banner_news.jpg) top center no-repeat; }
.banner_page { position:absolute; z-index:1; width:100%; height:310px; background-repeat:no-repeat; background-position:top center;}
.banner_awards { position:absolute; z-index:1; width:100%; height:310px; background:url(../images/banner/banner_awards.jpg) top center no-repeat; }
.banner_contact { position:absolute; z-index:1; width:100%; height:310px; background:url(../images/banner/banner_contact.jpg) top center no-repeat; }

/*-------------page_news---------------*/

.news_title_bg { padding:0 10px; width:980px; height:50px; background:url(../images/news_title.png) no-repeat;}

.title { float:left; padding-top:5px; padding-left:8px; width:640px; height:30px; }

.select_date { float:right; padding:5px 0 0 10px; height:35px; margin-right:20px; }
.select_date select {font: 13px "微軟正黑體", Arial, Tahoma, Verdana, sans-serif; background:#FFC; font-weight:bold;}
.news_content {min-height: 460px; padding:0 20px 0; padding-left:30px; width:950px; background:url(../images/news_bg.png) repeat-y;}
.news { float:left; width:620px; margin-right:20px; color:#333;}
.news_list {float:left;}
.news_list article { width:310px; height:110px; padding-bottom:5px; margin-bottom:5px; border-bottom:1px #715a3a dotted;}
.news_list article:last-child {border-bottom:none; padding-bottom:0px;}

.news_right_title  { float:left; width:145px; height:45px;  overflow: hidden;}
.news_bottom { clear:both; width:1000px; height:30px; background:url(../images/news_bottom.png) no-repeat;}

.news img, .news p img { max-width:600px; height:inherit; width:expression(document.body.clientWidth>600?"600px""auto");/*若圖片寬大於600px時調整，for IE6*/ overflow:hidden;}

/*------------page_game-------------*/
#game {  width:960px; height:260px;} /* slider 2.10*/
.game { float:left; width: 300px; height:250px;} /* slider 2.10*/

.game_name { width:290px;}
.game p{ width:300px; padding:0 5px;}
.title span {font-size:14px; color:#CCC;}
.game_title {width:802px;}
.game_title_bg {  padding:0 10px; width:980px; height:50px; background:url(../images/game_title.png) no-repeat;}
.game_video { float:left; padding:6px 0 0 5px; width:610px; height:350px; margin-top:5px; margin-right:10px; background:url(../images/youtube_frame.png) no-repeat;}
.game_news {padding:5px 10px 0; background:#2c3638;}
a.btn_enter { display:block; float:right; padding-top:6px; width:170px; height:30px;}

.eg_img { border:1px #eaac58 solid; border-radius:5px;}

/*------------page_contact-------------*/
.page_title {  padding:0 10px; width:980px; height:50px; background:url(../images/page_title.png) no-repeat;}
.page_content { padding:0 20px 0; width:960px; background:url(../images/page_bg.png) repeat-y;} /*contact 共用*/
.page_bottom { clear:both; width:1000px; height:30px; background:url(../images/page_bottom.png) no-repeat;}

.runewaker { padding:5px; width:280px; height:110px; margin-bottom:15px; background:url(../images/ch/element.png) 0 -287px no-repeat;}
.runewaker img{ border-radius:5px;}

/*------------page_about-------------*/

.video{ margin:auto; padding-top:110px; width:650px; text-align:center;} /*影片Popup寬度*/
.feature {position: relative; width: 100%; height: 495px; background:url(../images/banner/video.jpg) top left no-repeat; opacity: 0; overflow: hidden; white-space: nowrap;   z-index: 1;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.feature video { display: block; width:100%; height:495px;  position: absolute; left: 0; top: 0; z-index: 3;}
.feature h6 { position: relative; display: table-cell; margin: auto 0; vertical-align: middle; width: 1902px;  z-index: 5; color: #fff;  font: normal 60px/60px  'AvenirLT-Medium', 'Helvetica Neue','微軟正黑體', helvetica, arial, sans-serif;text-align: center; background: transparent url(../images/raster.png) top left repeat;}

@media screen and (max-width: 1902px) {
  .feature video {
    display: none;
    height: 0 !important;
  }
}