@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 'Martel', "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; }


/*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; font-family: 'Martel', serif; background: url(../images/fullbg.jpg) no-repeat center top; }

.wrapper { position: relative; width: 1002px; margin: 0 auto; }
.header { position: relative; height: 580px; }
.content { position: relative; }

/*header*/
.logo { position: absolute; top: 70px; left: 220px; width: 240px; }
.logo img { width: 100%; }
a.playvideo { position: absolute; top: 390px; left: 290px; display: block; width: 125px; height: 108px; background: url(../images/btns.png) no-repeat -7px -12px; }
a.playvideo:hover { background-position: -7px -126px; }
.section { position: relative; }

/*content*/
h2 { height: 78px; line-height: 78px; text-align: center; overflow: hidden; }
.thide { text-indent: -999em; }
.background { padding-bottom: 160px; }

.weapon, .skill, .soulrune, .slide {border: 1px solid #e3d0a4; padding: 9px 6px; margin: 20px 0; }
.weapon:after, .skill:after, .soulrune:after { position: absolute; bottom: -12px; left: 50%; margin-left: -12px; display: block; content: ""; width: 24px; height: 12px; background: url(../images/darrow.png) no-repeat 0 0; }
.slide:after { position: absolute; top: -12px; left: 50%; margin-left: -12px; display: block; content: ""; width: 24px; height: 12px; background: url(../images/uarrow.png) no-repeat 0 0; }

.mainw, .minorw { float: left; width: 458px; height: 270px; margin: 0 3px; padding: 10px 15px; }
.mainw { background: url(../images/w1.png) no-repeat 0 0; color: #ebcea4; }
.minorw { background: url(../images/w2.png) no-repeat 0 0; color: #8fb9ce; }

.txt { width: 280px; line-height: 20px; }
.title { position: relative; font-size: 20px; font-weight: bold; height: 36px; line-height: 36px; }
.title.tc { text-align: center; padding-bottom: 5px; }
.guide .title { font-size: 24px; }
.line1 { width: 100%; height: 11px; background: url(../images/btns.png) no-repeat -186px -150px; }
.line2 { width: 100%; height: 11px; background: url(../images/btns.png) no-repeat -186px -211px; }
.line3 { width: 100%; height: 11px; background: url(../images/btns.png) no-repeat center -585px; }
.c1 { color: #eacf8e; }
.c2 { color: #5ce3e7; }
.c3 { color: #99c4e9; }
.wmore { position: absolute; right: 0; top: 5px; display: block; width: 73px; height: 26px; line-height: 28px; text-align: center; color: #d0b799; background: url(../images/btns.png) no-repeat -181px -104px; font-size: 16px; font-weight: normal; }
.wmore:hover { color: #99c4e9; }


.skillicon { float: left; width: 190px; }
.skillicon li { float: left; margin: 5px; width: 68px; height: 68px; padding: 4px; border: 1px solid #cce0f1; /*border-radius: 41px;*/ cursor: pointer; }
.skillicon li img { width: 64px; height: 64px; border: 2px solid #cce0f1; /*border-radius: 41px;*/ opacity: 0.5; filter: alpha(opacity=50); }
.skillicon li.on img, .skillicon li:hover img, .skillicon li.on, .skillicon li:hover { border-color: #d8c79d; opacity: 1; filter: alpha(opacity=100); }
.skillcont { float: left; width: 753px; height: 398px; background: #161f28; padding: 15px; margin: 5px 0 5px 10px; color: #8fb9ce; }
p#skilldes { padding-top: 10px; line-height: 28px; } 

.skillcont .txt { float: left; width: 340px; padding-right: 28px; }
.skillcont .txt.full { padding-right: 0; width: 100%; }
.video { float: left; width: 339px; height: 190px; padding: 79px 18px; background: url(../images/videobg.png) no-repeat 0 0; }

.soul, .rune { background: #161f28; float: left;width: 458px; margin: 0 3px; padding: 10px 15px 0 15px;}
.soulrune .txt { width: 100%; color: #8fb9ce; }
.imgtxt { padding: 10px 0; height: 120px; }
.imgtxt p.img { width: 63px; height: 63px; padding: 12px 8px; background: url(../images/iconbg.png) no-repeat 0 0; margin-right: 10px; }
.imgtxt p.img img { width: 63px; height: 63px; }
.imgtxt p { float: left; width: 368px; }
a.smore { display: inline-block; *display: inline; *zoom: 1; width: 27px; height: 18px; background: url(../images/btns.png) no-repeat -185px -388px; text-align: center; color: #d0b799; font-size: 20px; }
a.smore:hover { color: #99c4e9; }

.guide { width: 100%; height: 370px; padding: 15px 0; background: url(../images/subbg.jpg) no-repeat center top; }
.guide .txt { width: 660px; padding-left: 340px; }


.mainnav { position: fixed; z-index: 2; width: 128px; padding: 8px; left: 10px; top: 50%; margin-top: -122px; border: 1px solid #e3d0a4; }
.mainnav a {display: block;width: 128px;height: 32px; padding: 4px 0 3px 0; margin:5px 0;background: url(../images/btns.png) no-repeat -179px -10px;text-align: center; line-height: 32px; font-weight: bold; color: #809bb1; text-align: center; }
.mainnav a.sp { line-height: 16px; }
.mainnav a:hover, .mainnav a.on { background-position: -179px -57px; color: #f7d9b4; }

.pagenav { position: fixed; z-index: 2; right: 10px; top: 50%; margin-top: -325px; }
.pagenav a { display: block; width: 88px; height: 44px; padding: 55px 33px; line-height: 22px; background: url(../images/btns.png) no-repeat 0 -262px; text-align: center; color: #809bb1; margin: -20px 0; }
.pagenav a:hover { background-position: 0 -424px; color: #82bceb; }
.pagenav a.sp { line-height: 44px; }

.slidetabs { width: 331px; float: left; padding: 0 5px; }
.slidetabs a { display: block; width: 331px; height: 49px; background: url(../images/btns.png) no-repeat -185px -317px; color: #b4dcfb; text-align: center; line-height: 49px; margin: 5px 0; }
.slidetabs a:hover, .slidetabs a.on { background-position: -185px -262px; color: #fbefd1; }

.slideurl { float: left; width: 637px; padding: 5px; }
.slideurl img { width: 100%; height: 318px; }

.dec i { display: block; position: absolute; width: 9px; height: 9px; background: url(../images/1.png) no-repeat 0 0; }
.dec i.d1 { left: 0; top: 0; background-image: url(../images/1.png); }
.dec i.d2 { right: 0; top: 0; background-image: url(../images/2.png); }
.dec i.d3 { right: 0; bottom: 0; background-image: url(../images/3.png); }
.dec i.d4 { left: 0; bottom: 0; background-image: url(../images/4.png); }




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


.mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1112;}
.commonbox { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:1112; }
.videobox { position: relative; width: 780px; height: 440px; margin: 0 auto; z-index: 1113; }
.videobox a.close { position: absolute; right: -30px; top: 0; width: 30px; height: 30px; background: #000; text-align: center; line-height: 37px; color: #fff; font-size: 32px; }
.videobox a.close:hover { background: #809bb1; }
.notes { position: absolute; left: 40px; top: 580px; width: 460px; padding: 10px; border: 1px solid #4bd2d8; background: url(../images/obg2.png) repeat 0 0; }
.notes a { color: #f59a22; }
.notes a:hover { text-decoration: underline; }
#videobox { top: 50%; margin-top: -220px; }


.tipbox{position: relative; margin: 0 auto; z-index: 1113;color: #a4cef1; background: #18212a; border: 1px solid #e3d0a4; }
.box1{width: 440px;}
.box2{width: 680px;}
.box3{width: 460px;}
.box4{width: 980px;}

.tip_t{ position: relative; z-index: 2; text-align: center; }
.tip_t a.close{ position: absolute; top: 20px; right: 15px; width: 40px; height: 40px; line-height: 30px; color: #fff; font-size: 40px; }
.tip_t a.close:hover{ color: #a4cef1; }
.tip_t h2{ color: #a4cef1; padding: 10px 0; font-size: 30px; text-align: center; }
.tip_c{ position: relative; z-index: 1; font-family: "Roboto", sans-serif;}
.tip_con{width: 88%; margin: 0 auto; padding: 20px 0 5px 0; position: relative; }
.tip_con span{ color: #e7d9b4;}
.tip_con p{ padding: 7px 0; line-height: 16px;}
.tip_con table{width: 100%; margin: 10px auto;}
.tip_con table td, .tip_con table th{text-align: center; border: 1px solid #2e3c48; line-height: 20px; padding: 5px; }
.tip_con table td.t_left { text-align: left; }
.tip_con table td img { vertical-align: middle; }
.tip_con table th { background: #15293e; border-bottom: 2px solid #425c74; line-height: 24px; padding: 10px; }
.tip_db{padding-bottom: 10px; text-align: center;}
.tip_db ul{margin: 0 auto; width: 380px;}
.tip_db li{float: left; width: 170px; margin: 0 10px;}
.tip_db p{padding-bottom: 5px; }
.tip_db p a{color: #22c3bb; font-family: "Roboto", sans-serif;}
.tip_db p a:hover{text-decoration: underline;}
.tip_db a.btn_tip {  display: block; width: 112px; height: 36px; margin: 10px auto; color: #fff; background: #22c3bb; line-height: 36px; font-size: 20px; text-transform: uppercase;  border-radius: 8px; }
.tip_db a.btn_tip:hover { background:#ff7d74; text-decoration: none;}

.boxtabs { text-align: center; padding-bottom: 20px; }
.boxtabs a { height: 36px; line-height: 36px; width: 140px; font-weight: bold; font-size: 18px; display: inline-block; *display: inline; *zoom: 1; background: #a4cef1; color: #18212a; margin: 0 20px; text-align: center; }
.boxtabs a:hover, .boxtabs a.on { background: #e3d0a4; }

.tip_con.skillbox, .tip_con.runescroll { width: 96%; max-height: 500px; overflow-y: auto; padding: 0; margin-bottom: 50px; }
.tip_con.skillbox table, .tip_con.runescroll table { width: 96%; }
.weapontable { height: 500px; overflow-y: auto; }