@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/*basic*/
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dt, dd, ul, ol, li, fieldset, form, tr, th, td, center, input, button, textarea { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
button, input, select, textarea { font: 14px/1.8 "Roboto", sans-serif; }
li { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
body { background: #000c1c; color: #f0ecec; font: 14px/1.8 "Roboto", sans-serif; /*font: 14px/1.8 "Roboto", sans-serif;*/ }

.fl { float: left; }
.fr { float: right; }
.t_hide { height: 0; overflow: hidden; }
.mt10 { margin-top: 10px; }
.t_center { text-align: center; }
.t_left { text-align: left; }
.t_right { text-align: right; }
.p_relative { position: relative; }
.clearfix:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; }
a { color: #fff; text-decoration: none; }
a, a:active { outline: none; }
.hidden { visibility: hidden; }
.pd-common1 { padding: 30px 0; }
.pd-common2 { padding: 40px 0; }
.pd-common3 { padding-bottom: 20px; }
.mt-common1 { margin-top: 30px; }

/*share*/
.sharethis { width: 100%; height: 30px; padding: 0; padding-bottom: 3px; line-height: 30px; text-align: center; background: #fefced; overflow: hidden; }
.sharethis a { color: #88878c; line-height: 30px; }
.sharethis img { vertical-align: middle; }

/*nav*/
.nav { position: relative; z-index: 2; width: 990px; height: 40px; margin: 0 auto; }
.nav li { position: relative; float: left; width: 90px; text-align: center; }
.nav li a { display: block; width: 90px; height: 40px; margin: 0 auto; line-height: 40px; color: #fcf8f3; font-weight: bold; }
.nav li a:hover, .nav li.on a { text-decoration: none; background: #e49804; }
.subnav { display: none; position: absolute; left: 0px; top: 40px; background: #cca847; background: rgba(204,168,71,.9); filter:alpha(opacity=90); white-space: nowrap; }
.subnav li { float: none; width: auto; padding: 0 5px; transition: all 0.2s ease-in-out 0s; }
.subnav li a { width: auto; height: 34px; line-height: 34px; border: none; font-weight: normal; font-family: "Roboto", sans-serif; overflow: visible; }
.subnav li a:hover, .subnav li.on a, .nav li.on li a { background: none; color: #fff;}
.nav li.on li a:hover{ color: #021027; }
.subnav li:hover { background: #e49804; background: rgba(228,152,4,.9); filter:alpha(opacity=90);}

/*main*/
.fullbg { position: relative; z-index: 1; width: 100%; max-width: 1920px; min-width: 1002px; margin: 0 auto; overflow: hidden; background: url(../images/fullbg.jpg) no-repeat center top #0e0b16; font-family: 'Lora', serif; }

.wrapper { position: relative; width: 1002px; margin: 0 auto; }
.header { position: relative; height: 1000px; z-index: 2; }
.content { position: relative; }


/*header*/
.logo { position: absolute; top: 160px; left: 50%; width: 320px; margin-left: -120px; }
.logo img { width: 100%; }
.video { width: 638px; height: 358px; position: absolute; left: 21px; top: 418px; }

/*content*/
.fixedbtns { position: fixed; bottom: 0; left: 0; z-index: 59; width: 100%; height: 134px; padding: 13px 0; background: url(../images/obg.png) repeat 0 0; }
.fixedbtns a { float: left; display: block; width: 134px; height: 134px; background: url(../images/btns.png) no-repeat -140px -325px; text-align: center; line-height: 134px; font-size: 28px; color: #0e0e11; font-weight: bold; }
.fixedbtns a:hover { background-position: 0 -325px; color: #b19256; }
.fixedbtns ul { padding-top: 35px; margin: 0 auto; width: 888px; }
.fixedbtns li { float: left; }
.fixedbtns li { padding: 0 10px; }
.fixedbtns li a { display: block; width: 200px; height: 64px; line-height: 64px; background: url(../images/btnbg.jpg) no-repeat 0 0; font-size: 20px; color: #0e0e11; border: 1px solid transparent; }
.fixedbtns li a:hover { background: none; border: 1px solid #b19256; color: #b19256; }

/*content*/
.screen { position: relative; }
.screen p { padding: 10px 0; }
.screen4 {   }
.screen2 { /*height: 2000px;*/ }
.title { height: 70px; width: 600px; margin: 60px auto 20px auto; background: url(../images/btns.png) no-repeat 5px 0; text-align: center; font-size: 26px; color: #ac8d53; line-height: 70px; font-weight: bold; }



.screen1 .relictabs { position: relative; z-index: 2; width: 311px; height: 516px; background: url(../images/trail.png) no-repeat 0 0; }
.relictabs a { position: absolute; display: block; width: 93px; height: 93px; background: url(../images/icons.png?v1) no-repeat; }

.relictabs a.rlt1 { left: 175px; top: 0; background-position: -3px 0;}
.relictabs a.rlt1:hover, .relictabs a.rlt1.on { background-position: -3px -113px; }

.relictabs a.rlt2 {left: 49px;top: 87px;background-position: -101px -3px;}
.relictabs a.rlt2:hover, .relictabs a.rlt2.on { background-position: -101px -116px; }

.relictabs a.rlt3 {left: 12px;top: 211px;background-position: -199px -3px;}
.relictabs a.rlt3:hover, .relictabs a.rlt3.on { background-position: -199px -116px; }

.relictabs a.rlt4 {left: 56px;top: 337px;background-position: -298px -3px;}
.relictabs a.rlt4:hover, .relictabs a.rlt4.on { background-position: -298px -116px; }

.relictabs a.rlt5 {left: 175px;top: 415px;background-position: -397px -3px;}
.relictabs a.rlt5:hover, .relictabs a.rlt5.on { background-position: -397px -116px; }

.part1 { position: relative; }
.screen1 .reliccont { width: 784px; height: 732px; position: absolute; right: 0; top: -60px; z-index: 1; }
.screen1 .reliccont > div { width: 784px; height: 502px; padding-top: 230px; position: absolute; left: 0; top: 0; }
.screen1 .reliccont p { width: 200px; }
.screen1 .rlc1 { background: url(../images/r1.png) no-repeat 0 0; }
.screen1 .rlc2 { background: url(../images/r2.png) no-repeat 0 0; }
.screen1 .rlc3 { background: url(../images/r3.png) no-repeat 0 0; }
.screen1 .rlc4 { background: url(../images/r4.png) no-repeat 0 0; }
.screen1 .rlc5 { background: url(../images/r5.png) no-repeat 0 0; }

.screen2 .relictabs { width: 570px; margin: 0 auto; padding-top: 20px; }
.screen2 .relictabs a { position: relative; float: left; margin: 0 10px; }
.screen2 .relictabs a.rlt1, .screen2 .relictabs a.rlt2, .screen2 .relictabs a.rlt3, .screen2 .relictabs a.rlt4, .screen2 .relictabs a.rlt5 { left: auto; top: auto; }
.reliccont .red { color: red; }
.reliccont .yellow { color: yellow; }
.reliccont .blue { color: blue; }
.screen.screen2 p { line-height: 22px; padding: 2px; }
.screen2 .reliccont { width: 60%; margin: 0 auto; padding: 30px 0; }

.screen p strong { font-size: 22px; color: #bc9d5e; }
.screen p.sp { padding: 10px 0 20px 0; }

.screen3 li { width: 40%; padding: 20px 5%; float: left; }
.walkthrough { width: 90%; margin: 0 auto; }

/*footer*/
.footer{ width: 100%; padding: 120px 0 180px 0; position: relative; }
.footer table{ width: 100%; color: #fff;  margin: 0 auto;}
.footer table a{ margin: 0 5px; color: #fff; }
.footer table a:hover{text-decoration: underline;}


/*pop box*/
.mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1112;}
.msg_form_class, .bugs_form_class, .suggest_form_class { display:none; width: 100%; height: 100%; position: fixed; left: 0; top: 36%; }
.msg_form_class { z-index:1114; }
.bugs_form_class, .suggest_form_class { z-index:1112; }
.commonbox { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.tipbox{position: relative; margin: 0 auto; z-index: 1113;color: #cecece;background: #060607; border: 4px solid #bb933b; }
.box1{width: 440px;}
.box2{width: 680px;}
.box3{width: 460px;}
.box4{width: 860px;}
.levelintro { height: 600px; overflow-y: auto; }
.tip_t{height: 50px; text-align: center;}
.tip_t a.close{ position: absolute; top: 5px; right: 5px; display: block; width: 30px; height: 30px; color: #047aa1; line-height: 26px; text-align: center; font-size: 40px; }
.tip_t a.close:hover{color: #fff; }
.tip_c{font-family: "Roboto", sans-serif;}
.tip_con{width: 88%; margin: 0 auto; padding: 20px 0 5px 0; position: relative;}
.tip_con.sp{width: 96%;}
.tip_con p{ line-height: 20px; padding: 6px 0; }
.tip_con table{width: 100%; margin: 0 auto;}
.tip_con table td, .tip_con table th{text-align: center; border: 1px solid #483918; line-height: 24px;}
.tip_con form ul{padding: 0 20px;}
.tip_con form ul li{padding: 3px;}
.tip_con form label{font-size: 16px; text-transform: capitalize; width: 90px; display: inline-block; text-align: right;}
.tip_con form input.ipt{ *border:none; border: 1px solid #3c382d; height: 26px; width: 200px; background: #e9e9e9;}
.tip_con form input.code{width: 120px;}
.tip_con form select.slt{border:none; border: 1px solid #3c382d; background: #e9e9e9; height: 26px; width: 200px;}
.tip_db{padding-bottom: 10px; text-align: center;}
.tip_db ul{margin: 0 auto; width: 346px;}
.tip_db li{float: left; width: 153px; margin: 0 10px;}
.tip_db p{padding-bottom: 5px; }
.tip_db p a{color: #047aa1; font-family: "Roboto", sans-serif;}
.tip_db p a:hover{text-decoration: underline;}
.tip_db a.btn_tip{ display: block; color: #fff; background: #41a7c5; width: 112px; height: 34px; line-height: 34px; margin: 10px auto; font-size: 20px; text-transform: uppercase; border-radius: 17px; }
.tip_db a.btn_tip:hover{color: #fff; background: #31bfe8;}
.tip_t h2{color: #047aa1; height: 50px; line-height: 50px; width: 96%; margin: 0 auto; font-size: 30px; text-align: center; font-family: 'benguiat_bk_btbold', "Roboto", sans-serif;}
.tip_con textarea{font-family: "Roboto", sans-serif; font-size: 14px; width: 100%; height:160px; background: #e9e9e9; color: #000; border: none; }
.tip_t h2.sp{font-size: 20px; font-weight: normal;}
.tip_con span{color: red;}


.loading{width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 56px;
    color: #fff;
    padding-left: 60px;
    font-size: 15px;
    background: #000 url(../images/loader.gif) no-repeat 45% 50%;
    opacity: 0.7;
    z-index: 10000;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

.tip_con .historylist li { position: relative; height: 36px; background: #6c6543; }
.tip_con .historylist li:nth-child(2n){ background: #b1a046; }
.tip_con .historylist span { display: block; height: 36px; line-height: 36px; color: #feeaad; }
.tip_con .historylist span.time { position: absolute; right: 0; top: 0; width: 150px; text-align: center; }
.tip_con .historylist span.txt { width: 435px; padding-left: 5px; }

.ruletabs {width: 100%; text-align: center; margin: 10px auto; }
.ruletabs a { display: inline-block; *display: inline; *zoom: 1; width: 100px; margin: 0 20px; text-align: center; height: 26px; line-height: 26px; background: #9B8712; }
.ruletabs a:hover, .ruletabs a.on { background: #504922; }

.rulecont { height: 700px; overflow-y: auto; }


.sidebtns { position: fixed; right: 20px; top: 50%; z-index: 6; width: 134px; height: 380px; margin-top: -190px; }
.sidebtns a { display: block; margin: 5px 0; }
.sidebtns a.sb1 { width: 134px; height: 180px; background: url(../images/sidebtn.png) no-repeat -157px 0; }
.sidebtns a.sb1:hover, .sidebtns a.sb1.on { background-position: -1px 0; }
.sidebtns a.sb2 { width: 134px; height: 180px; background: url(../images/sidebtn.png) no-repeat -157px -218px; }
.sidebtns a.sb2:hover, .sidebtns a.sb2.on { background-position: -1px -218px; }