@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: #d5c39b; color: #643414; 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; color: #643414; }
 
.wrapper { position: relative; width: 1002px; margin: 0 auto; }
.header { position: relative; height: 637px; }
.content { position: relative; }

/*header*/
.logo { position: absolute; top: 75px; left: 560px; width: 240px; }
.logo img { width: 100%; }
.section1 { height: 632px; }
.section2 { height: 656px; padding: 40px 0; }
.section3 { padding: 40px 0; }

/*content*/
h2 { height: 78px; line-height: 78px; text-align: center; overflow: hidden; }
.thide { text-indent: -999em; }
.basictabs { width: ; margin: 0 auto; }
.basictabs a { float: left; margin: 0 42px; display: block; width: 200px; height: 200px; background: url(../images/btns.png) no-repeat 0 0; text-align: center; line-height: 205px; font-size: 24px; color: #816f62; font-weight: bold; }
.basictabs a:hover, .basictabs a.on { background-position: 0 -234px; color: #f3e7cc; }
.basictabs a.middle { margin: 0 111px; }
.basiccont { width: 940px; height: 325px; padding: 20px 30px; margin: 30px 0 0 0; background: url(../images/part1bg.png) no-repeat center top; }
.basiccont li { float: left; }
.basiccont .bscc1 li { width: 40%; margin: 0 5%; }
.basiccont .bscc2 li { width: 20%; margin: 0 5%; }
.basiccont .bscc3 li { width: 20%; margin: 0 5%; }

.pic img { vertical-align: middle; }
.bscc1 .pic img { height: 250px; }
.pic { text-align: center; padding: 10px 0 0 0; }
/*.bscc3 .pic img { height: 220px; }*/
.bscc2 .pic, .bscc2 table { float: left; }
.bscc2 .pic { margin-right: 25px; padding: 0; }
.bscc2 table img { vertical-align: middle; }
.bscc2 .pic img { height: 322px; }
.basiccont .bscc2 table { width: 600px; }


.basiccont table { width: 100%; text-align: center; line-height: 36px; margin: 5px 0 10px 0; }
.basiccont th { background: #9d8c70; color: #e5dac1; border: 1px solid #806e50; }
.basiccont td { border: 1px solid #9d8c70; }

.tailtabs a { float: left; display: block; width: 80px; height: 171px; padding: 20px 5px; background: url(../images/beastbg.png) no-repeat center top; text-align: center; margin: 0 10px; opacity: .6; filter: alpha(opacity=60); }
.tailtabs a:hover, .tailtabs a.on { opacity: 1; filter: alpha(opacity=100); }
.tailtabs a.on { cursor: default; }
.tailtabs a span { width: 60px; margin: 0 auto; display: inline-block; *display: inline; *zoom: 1; border-top: 1px solid #67645d; font-size: 20px; margin-top: 10px; padding-top: 10px; line-height: 30px;  }

.tailcont { width: 990px; margin: 30px auto; background: url(../images/obg1.png) repeat 0 0; border: 2px solid #c5b591; color: #c5b591; }
.tailtitle { font-size: 30px; text-align: center; background: url(../images/obg1.png) repeat 0 0; } 
.tailtitle i { display: inline-block; *display: inline; *zoom: 1; width: 290px; height: 0; border-top: 1px solid #423829; vertical-align: middle; }
.tailcont th, .tailcont td { border: 1px solid #524c3f; line-height: 38px; text-align: center; }
.tailcont table { width: 100%; }
.tailcont th { border-bottom: 2px solid #524c3f; border-top: 2px solid #c5b591; line-height: 44px; }

.pagenav { position: fixed; z-index: 2; right: 10px; top: 50%; margin-top: -250px; }
.pagenav a { display: block; width: 79px; height: 35px; padding: 32px 10px; line-height: 18px; background: url(../images/btns.png) no-repeat -308px 0; text-align: center; color: #816f62; font-size: 13px; font-weight: bold; }
.pagenav a:hover { background-position: -308px -105px; color: #f3e7cc; }
.pagenav a.sp { line-height: 35px; }

.subtitle { position: relative; color: #4c2407; font-size: 22px; font-weight: bold; height: 40px; line-height: 40px; }

.subtitle:after { position: absolute; top: 10px; margin-left: 8px; width: 0; height: 0; content: ""; border: 8px solid transparent; border-left-color: #a88761; }
/*.subtitle:after { left: 95px; }
.subtitle:before { left: 106px; }*/

.tailc1 { height: 350px; overflow-y: auto; }


/*footer*/
.footer{ width: 100%; padding: 50px 0 20px 0; position: relative; }
.footer table{ width: 100%; color: #716053; margin: 0 auto;}
.footer table a{ margin: 0 5px; color: #716053; }
.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; }

.txt { padding-top: 20px; }