@charset "utf8";
@import url("_reset.css");
@import url("fancybox/jquery.fancybox.css");
/*@import url('//fonts.googleapis.com/css?family=Mitr');*/

.fancybox-lock .fancybox-overlay { overflow-y: hidden; !important }  /* fancybox  */
body { color: #444; font-family:"Tahoma", Verdana, sans-serif; }

/* ==========================================================================
menu & btns & FB讚 & music
========================================================================== */
.menu { position: fixed; z-index: 100; left: 50%; margin-left: -876px; width: 1753px; height: 82px; background: url('../img/menu_bg.png') top center no-repeat; text-indent: -99999px; }
.menu.fixed { position: fixed; top: 0px; }
.menu ul { margin: 0 auto; width: 950px; }
.menu li { position: relative; margin-left: 2px; }
.menu li span.notyet { position: absolute; top: 5px; width: 59px; height: 53px; background: url('../img/menu_2.png') 0 0 no-repeat; opacity: 0; filter: alpha(opacity=0); }
.menu li.m2 span.notyet { left: -10px; }
.menu li.m3 span.notyet { left: -22px; }
.menu li.m4 span.notyet { left: -30px; }
.menu li, .menu li a, .menu li span.over/*,
.menu li.m2, .menu li.m3, .menu li.m4*/ { display: block; float: left; width: 156px; height: 70px; }
.menu li a, .menu li span.over/*,
.menu li.m2, .menu li.m3, .menu li.m4*/ { background: url('../img/menu.png') 0 0 no-repeat; }
.menu li a { position: absolute; z-index: 5; }
.menu li.m1 a { background-position: 0 0; }
/*.menu li.m2,*/ .menu li.m2 a { background-position: -156px 0; }
/*.menu li.m3,*/ .menu li.m3 a { background-position: -312px 0; }
/*.menu li.m4,*/ .menu li.m4 a { background-position: -468px 0; }
.menu li span.over { z-index: 4; background-position: -936px 0; opacity: 0; filter: alpha(opacity=0); }

.menu .download_win { position: absolute; top: 9px; left: 50%; margin-left: 220px; width: 170px; height: 50px;	background: url('../img/download_win.png') 0 0 no-repeat;	border:none; cursor: pointer }

.btns { position: absolute; top: 559px; left: 50%; margin-left: -368px; width: 777px; height: 88px; }
.btns li, .btns a { position: relative; display: block; float: left; width: 176px; height: 88px; text-indent: -99999px; }
.btns li span { position: absolute; top: -10px; left: -35px; width: 59px; height: 53px; background: url('../img/menu_2.png') 0 0 no-repeat; opacity: 0; filter: alpha(opacity=0); }
.btns a { position: relative; }
.btns a span { background: url('../img/btns.png') 0 0 no-repeat; opacity: 0; filter: alpha(opacity=0); }
.btns li.n3, .btns a.n1 { margin-right: 417px; }
.btns a span { display: block; margin: -16px 0 0 -2px; width: 176px; height: 88px; cursor: pointer; }
.btns .n1 span { background-position: 0 0; }
.btns .n2 span { background-position: 0 -88px; }

#fb { position: absolute; top: 750px; left: 50%; /*margin-left: 193px;*/ margin-left: 334px; width: 90px; height: 20px; }
#swf { position: absolute; top: 93px; left: 50%; margin-left: -437px; width: 80px; height: 30px; }
#mov_pop { display: none; }

/* ========================================================================== 
btn_bug
========================================================================== */
.btn_bug, .btn_bug a, .btn_bug img { position: absolute; }
.btn_bug { width: 100%; }
.btn_bug ul { position: relative; margin: 0 auto; width: 950px; }
.btn_bug a { display: block; top: 90px; right: 25px; width: 100px; height: 100px;  background: url('../img/btn_bug.png') 0 0 no-repeat; text-indent: -99999px; }
.btn_bug a:hover { background-position: 0 -100px; }

img.bug1 { top: 90px; right: 25px;
					-webkit-animation: s1 13s infinite linear;
					-moz-animation: s1 13s infinite linear;
					-ms-animation: s1 13s infinite linear;
					-o-animation: s1 13s infinite linear;
					animation: s1 13s infinite linear;
}
img.bug2 { top: 80px; right: 90px;
					 -webkit-animation: s2 9s infinite linear;
					 -moz-animation: s2 9s infinite linear;
					 -ms-animation: s2 9s infinite linear;
					 -o-animation: s2 9s infinite linear;
					 animation: s2 9s infinite linear;
}
img.bug3 { top: 75px; right: 3px;
					 -webkit-animation: s3 6s infinite linear;
					 -moz-animation: s3 6s infinite linear;
					 -ms-animation: s3 6s infinite linear;
					 -o-animation: s3 6s infinite linear;
					 animation: s3 6s infinite linear;
}

@-webkit-keyframes s1 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes s1 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
@-o-keyframes s1 { from {-o-transform: rotate(0deg); } to {-o-transform: rotate(360deg); } }
@keyframes s1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@-webkit-keyframes s2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes s2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } }
@-o-keyframes s2 { from {-o-transform: rotate(0deg); } to {-o-transform: rotate(-360deg); } }
@keyframes s2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

@-webkit-keyframes s3 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes s3 {  from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } }
@-o-keyframes s3 { from {-o-transform: rotate(0deg); } to {-o-transform: rotate(-360deg); } }
@keyframes s3 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }



/* ========================================================================== 
icon
========================================================================== */
.icon { position: fixed; z-index: 99; top: 230px; right: 0; padding-top: 12px; width: 44px; height: 143px; background :url('../img/icon_bg.png') 0 0 no-repeat; text-indent: -99999px; }
.icon a, .icon li { display: block; margin: 0 auto 5px; width: 25px; height: 29px; background: url('../img/icon.png') 0 0 no-repeat; }
.icon a.b1 { background-position: 0 0; }
.icon a.b2 { background-position: -25px 0; }
.icon a.b3, .icon li.b3 { background-position: -50px 0; }
.icon a.b4, .icon li.b4 { background-position: -75px 0; }
.icon a:hover.b1 { background-position: 0 -29px; }
.icon a:hover.b2 { background-position: -25px -29px; }
.icon a:hover.b3 { background-position: -50px -29px; }
.icon a:hover.b4 { background-position: -75px -29px; }


/* ========================================================================== 
banner
========================================================================== */
/* for carouFredSel 輪撥 */
#banner { position: absolute; top: 780px; left: 50%; margin-left: -421px; width: 843px; height: 87px; }
#banner ul { width: 843px; height: 87px; margin-left: -7px; overflow: hidden; }
#banner ul a { position: relative; display: block; float: left; margin: 0 7px; }
#banner a img { width: 272px; height: 87px; }
#banner a:hover img { opacity: 0.7; filter: alpha(opacity=70); }
#banner #prev, #banner #next { position: absolute; z-index: 10; display: block; top: 0; width: 18px; height: 87px; background :url('../img/ban_nav.png') 0 0 no-repeat; text-indent: -99999px; }
#banner #prev { left: -30px; background-position: 0 0; }
#banner #next { right: -31px; background-position: -18px 0; }
/*
#banner { position: absolute; top: 785px; left: 50%; margin-left: -290px; width: 570px;  height: 87px; } /*margin-left: -434px; width: 868px;
#banner ul { margin: 0 auto; }
#banner a { display: inline-block; margin: 0 7px; }
#banner a img { width: 272px; height: 87px; }
#banner a:hover img { opacity: 0.7; filter: alpha(opacity=70); }
*/

/* ========================================================================== 
page
========================================================================== */
#wrap { position: relative; width: 100%; min-width: 980px; }
#top, #page_1, #page_2, #page_3 /*, #page_4, #page_5*/ { position: relative; width: 100%; }
#top, #page_3 /*, #page_4*/ { height: 955px; }
#top { background: url('../img/bg.jpg') center top no-repeat; }
#page_1 { background: url('../img/bg_1.jpg') center top no-repeat; height: 1192px; }
#page_2 { background: url('../img/bg_2.jpg') center top no-repeat; height: 1192px; }
#page_3 { background: url('../img/bg_3.jpg') center top no-repeat;  height: 813px; }
/*#page_4 { background: url('../img/bg_4.jpg') center top no-repeat; }*/
/*#page_5 { background: url('../img/bg_5.jpg') center top no-repeat; height: 788px; }*/
img.title { display: block; margin: 0 auto; padding: 125px 0 60px; }
.mode { position: relative; margin: 0 auto; width: 950px; height: 100%; }
.mov { position: absolute; top: 291px; left: 50%; margin-left: -382px; border: 5px #fff solid; }
.form { position: absolute; top: 220px; left: 50%; width: 600px; height: 345px; margin-left: -300px; }
.form .download { position: absolute; top: -80px; left: 540px }
.form .regist_form { position: relative; top: -31px; left: 160px; width: 328px; height: 244px; }
.form .regist_form ul { margin-bottom: 20px }
.form .regist_form li input { width: 324px; height: 30px; font-size: 15px; text-align: center; background-color: transparent; border: 0; color: #ffffff }
.form .regist_form li input::placeholder {	color: #ffffff; }
.form .regist_form li input:focus::placeholder { color: transparent; }
.form .regist_form textarea:focus, input:focus{ outline: none; }
.form .regist_form li selection { border: 0 }
.form .regist_form .getotp {	position: absolute; top: 260px; left: 150px; background : url(../img/btn_getotp.png); border: none; width: 105px; height: 30px; cursor: pointer; }
.form .regist_form input[type=submit] { position: absolute; top: 316px; left: -10px; background : url(../img/btn_confirm.png) no-repeat center center; width: 160px; height: 46px; cursor: pointer; border : none; color : transparent; font-size : 0}
.form .regist_form input[type=reset] { position: absolute; top: 316px; left: 170px; background : url(../img/btn_reset.png) no-repeat center center; width: 160px; height: 46px; cursor: pointer;border : none; color : transparent; font-size : 0}
#top .entersite { position: absolute; top: 844px; left: 50%; margin-left: -225px; }
#top .register { position: absolute; top: 844px; left: 50%; margin-left: 15px; }
#page_1 .count_registered { position: absolute; top: 580px; left: 50%; margin-left: -200px; width: 406px; height: 91px; color: #FFFFFF; font: 54px Tahoma, Verdana; z-index: 20; text-align: center }
#page_1 .process { position: absolute; top: 827px; left: 50%; margin-left: 437.5px; width: 14px; height: 14px }
#page_1 .dragon-fly { position: absolute; top: 660px; left: 50%; margin-left: 370px; width: 182px; height: 138px }
#page_2 .classic_balanced { position: absolute; top: 230px; left: 50%; margin-left: -510px; width: 491px; height: 229px ; cursor: pointer}
#page_2 .multi_channel { position: absolute; top: 230px; left: 50%; margin-left: 20px; width: 491px; height: 222px; cursor: pointer }
#page_2 .new_anticheat { position: absolute; top: 480px; left: 50%; margin-left: -510px; width: 491px; height: 222px; cursor: pointer }
#page_2 .dragon_league { position: absolute; top: 480px; left: 50%; margin-left: 20px; width: 491px; height: 222px; cursor: pointer }
#page_3 .discord { position: absolute; top: 640px; left: 50%; margin-left: -100px; width: 240px; height: 80px }

/* ========================================================================== 
職業介紹
========================================================================== */
#page_2 .mode { width: 1488px; padding-top: 170px; }
#page_2 .case { position: relative; padding: 0 25px; clear: both; }
#page_2 a:hover img { opacity: 0.7; filter: alpha(opacity=70); }
.role_L, .role_R { position: relative; width: 215px; height: 248px; }
.role_L { float: left; margin-left: 180px; margin-right: -120px; }
.role_R { float: left; margin-left: 60px; }
.role_over, .case a, .case span { position: absolute; }
.role_over { top: 8px; left: 8px; width: 200px; height: 231px; }
span.zoom_off, span.zoom_on { top: 44px; right: -15px; width: 34px; height: 39px; background: url('../img/btn_role.png') no-repeat; }
span.zoom_off { background-position: 0 0; }
span.zoom_on { background-position: 0 -39px; }


/* ========================================================================== 
遊戲特色
========================================================================== */
.bg_cover { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: 350px; background: url('../img/bg_3-2.png') repeat-x; }
#page_3 .mode { padding-top: 200px; }
.box_L, .box_R { position: absolute; width: 403px; }
.box_L { left: 24px; }
.box_R { right: 24px; }
#page_3 .case { position: relative; z-index: 3; margin-bottom: 30px; }
.h1 { position: absolute; z-index: 3; top: 220px; left: 18px; width: 365px; height: 32px; font-size: 18px; color: #fff; line-height: 32px; text-align: center; background: url('../img/h1_bg.png') no-repeat; }
.slider, .txts { background: #fff; border: 1px #92b1c0 solid; }
.slider { width: 401px; height: 236px; overflow: hidden; border-bottom-width: 0; }
.slider img { width: 401px; height: 236px; }
.slider, .slider img {
			-webkit-border-radius: 10px 10px 0 0;
			-moz-border-radius: 10px 10px 0 0;
			-ms-border-radius: 10px 10px 0 0;
			-o-border-radius: 10px 10px 0 0;
			border-radius: 10px 10px 0 0;	
}
.txts { padding: 30px 25px 20px; width: 351px; font-size: 14px; line-height: 26px; font-weight: normal; text-align: center; border-top-width: 0;
			-webkit-border-radius: 0 0 10px 10px;
			-moz-border-radius: 0 0 10px 10px;
			-ms-border-radius: 0 0 10px 10px;
			-o-border-radius: 0 0 10px 10px;
			border-radius: 0 0 10px 10px;
}


/* ========================================================================== 
最新消息
========================================================================== */
.bg_cover2 { width: 100%; min-height: 880px; background: url('../img/bg_5.png') center bottom no-repeat; }
/*#page_5 .mode { width: 843px; }*/
.list li { padding-bottom: 30px; }
.list a { position: relative; display: block; padding: 26px 60px 0 32px; height: 95px; text-decoration: none; background: #fff url('../img/bg_newsList.png') 797px 40px no-repeat; }
.list a, .list_in .content { 
	border: 1px #92b1c0 solid;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
 }
.list a:hover { padding: 24px 58px 0 30px; height: 93px; border-color: #0189ca; border-width: 3px; background-color: #ecfffd; background-position: 800px 38px; }
.list a span, .list_in > div > span { position: absolute; z-index: 4; width: 106px; height: 24px; font-size: 14px; color: #fff; line-height: 24px; text-align: center; font-family: Tahoma; background: url('../img/bg_date.png') no-repeat; }
.list a span { top: -12px; left: 23px; }
.list a:hover span { top: -14px; left: 21px; }
.list a h1, .list_in h1 { margin-bottom: 16px; color: #0189ca; font-weight: normal; }
.list a h1 { width: 749px; height: 18px; font-size: 18px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; }
.list a p, .list_in p { font-size: 15px; color: #555; font-weight: bold; }
.list a p { height: 45px; line-height: 22px; overflow: hidden; }

.list_in .content { padding: 22px 32px; min-height: 518px; background: #fff; }
.list_in > div > span { top: -11px; left: 24px; }
.list_in > div > h1 { font-size: 21px; line-height: 26px; }
.list_in p { margin-bottom: 15px; line-height: 26px; text-align: justify; }
.list_in p img { padding: 15px 0; max-width: 778px; }
.list_in p a { color: #2ba1d9; }
.list_in p a:hover { text-decoration: none; }
.btn_back { padding: 20px 0 30px; }
.btn_back a { display: block; margin: 0 auto; width: 106px; height: 24px; font-size: 15px; color: #fff; line-height: 24px; text-align: center; text-decoration: none; font-family: Tahoma; background: url('../img/btn_back.png') 0 0 no-repeat; }
.btn_back a:hover { background-position: 0 -24px; }

/*.list:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; !important } 
* html .list,*:first-child+html .list { zoom: 1; !important }*/


/* ==========================================================================
Bug
========================================================================== */
#bug { background: url('../img/bg_bug.jpg') center 45px no-repeat; }
.head { height: 267px; text-indent: -99999px; }
a.logo_bug, #bug a.register, #bug a.download { position: absolute; display: block; }
a.logo_bug { top: 90px; left: 25px; width: 245px; height: 130px; }
#bug a.register, #bug a.download { top: 28px; width: 126px; height: 30px; background: url('../img/btn_bug2.png') 0 0 no-repeat; }
#bug a.register { right: 155px; background-position: 0 0; }
#bug a.download { right: 20px; background-position: -126px 0; }
#bug a:hover.register { background-position: 0 -30px; }
#bug a:hover.download { background-position: -126px -30px; }

.content2 { position: relative; padding: 40px 28px; }
img.title2 { position: absolute; top: 21px; left: 75px; }
.detail { padding: 30px 75px 20px; border: 3px #92b1c0 solid;
			-webkit-border-radius: 15px;
			-moz-border-radius: 15px;
			-ms-border-radius: 15px;
			-o-border-radius: 15px;
			border-radius: 15px;
}
img.h2 { margin: 10px 0 15px; }
.section { margin-bottom: 12px; font-weight: bolder; }
.section label { display: inline-block; margin-right: 10px; font-size: 16px; }
.textField { padding: 0 15px; width: 380px; height: 30px; font-size: 16px; line-height: 30px; }
.textField,
textarea.qmemo { font-size: 16px; color: #1D5D7B; background: #DEF0F0; font-family:"Tahoma", Verdana, sans-serif;
	-webkit-border-radius: 5px;  
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}
.ps, .ps2 { display: inline-block; color: #DD457F; line-height: 23px; }
.ps { padding: 5px 0 7px 78px; }
.ps2 { padding-left: 0; width: 300px; }
textarea.qmemo { padding: 7px 15px; margin: 10px 0 10px 78px; width: 630px; height: 120px; line-height: 21px; }
input[type="file"] { font-size: 16px; font-weight: bolder; font-family:"Tahoma"; }
.btnBox { margin: 0 auto; width: 400px; }
.btnBox a { display: inline-block; margin: 0 10px; width:177px; height: 42px; background: url('../img/btn_bug3.png') 0 0 no-repeat; text-indent: -99999px; }
a.reset { background-position: 0 0; }
a.submit { background-position: -177px 0; }
a:hover.reset { background-position: 0 -42px; }
a:hover.submit { background-position: -177px -42px; }


/* ==========================================================================
footer
========================================================================== */
.footer { width: 100%; height: 85px; background: black; }
.footer ul { width: 930px; margin: 0 auto; padding-top: 16px; }
.footer li { float: left; }
.footer li.logo_cr { margin: 4px 21px 0 100px; width: 200px; height: 43px; background: url('../img/logo_cr.png') no-repeat; }
.footer li.txt { margin: 22px 0 0 30px; width: 534px; font-size: 12px; color: #fff; font-family: Tahoma; }
.footer li.R15 { width: 236px; height: 43px; background: url('../img/15%2b.png') no-repeat; }

/* ==========================================================================
new
========================================================================== */