@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: #0e0909; 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: #ef2315; 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; background: url(../images/fullbg.jpg) no-repeat center top; font-family: 'Lora', serif; }

.wrapper { position: relative; width: 1002px; margin: 0 auto; }
.header { position: relative; height: 390px; z-index: 2; }
.content { position: relative; color: #5d3419; }


/*header*/
.logo { position: absolute; top: 50px; right: 230px; width: 180px; }
.logo img { width: 180px; }

a.playvideo { position: absolute; top: 90px; left: 0; display: block; width:300px; height: 200px; background: url(../images/video.jpg) no-repeat 0 0; }





.pages { text-align: center; padding: 10px 0; }
.pages a { display: inline-block; *display: inline; *zoom: 1; margin: 0 10px; color: #fff; }
.pages a:hover, .pages a.on, .pages a.page_cur { text-decoration: underline; color: #ff7600; }
.page_cur { text-decoration: underline; color: #ff7600; }


/*footer*/
.footer{ width: 100%; padding: 20px 0; position: relative; }
.footer table{ width: 100%; color: #000;  margin: 0 auto;}
.footer table a{ margin: 0 5px; color: #000; }
.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: #fff; background: #371265; border: 4px solid #9e1fa9; border-radius: 20px; }
.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: #9e1fa9; 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 #e6bf6a; 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: #fff; font-family: "Roboto", sans-serif;}
.tip_db p a:hover{text-decoration: underline;}
.tip_db a.btn_tip{ display: block; color: #fff; background: #be36cf; width: 112px; height: 34px; line-height: 34px; margin: 10px auto; font-size: 20px; text-transform: uppercase; border-radius: 17px; text-decoration:none;}
.tip_db a.btn_tip:hover{ background: #dec272; color: #111315;}
.tip_t h2{color: #be36cf; height: 50px; line-height: 50px; width: 96%; margin: 0 auto; font-size: 30px; text-align: center; }
.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;
    color: #fff;
    background: #000 url(../images/loader.gif) no-repeat center 46%;
    opacity: 0.7;
    z-index: 10000;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}


.sidebtns { position: fixed; right: 20px; top: 50%; z-index: 6; width: 247px; /*height: 380px;*/  margin-top: -290px;  }
.sidebtns a { display: inline-block; width: 247px; height: 44px; margin: 2px 0; background: url(../images/btns.png?v1) no-repeat -199px -3px; text-align: center; 
line-height: 44px; font-size: 14px; color:#fff;  position:relative;}
.sidebtns a span { display:inline-block; width:34px; height:34px; background: url(../images/btns.png?v1) no-repeat -479px -6px; vertical-align: top;}
.sidebtns a.sp { line-height: 15px; }
.sidebtns a:hover, .sidebtns a.on { background-position: -199px -54px; }

.sidebtns a i { display:none; background: #000; color:#fff; width:247px; height:44px; text-align: center; line-height: 44px; position:absolute; left:0; top:0; z-index:10;}
.sidebtns a:hover i { display:block;}


.tabs { width: 1000px; margin:16px auto 0 auto; text-align: center; }
.tabs a { display: inline-block; *display: inline; *zoom: 1; width: 80px; height: 62px; margin: 0 35px; line-height: 25px; color: #b91317; background: url(../images/btns.png?v1) no-repeat 0 0; text-align: center; font-size: 15px; padding: 20px 0 41px 0; }
.tabs a:hover, .tabs a.on { background-position: -91px 0; text-decoration: none; color:#fff; }
.tabs a.tab5{ font-size:14px;}
/*.tabs a.tab6{ font-size:14px; padding: 13px 0 41px 0; line-height: 20px; height: 69px;}*/

.setcont { padding-top: 20px;  width: 90%;  margin: 0 auto; color:#5d3419; height:460px; font-size:16px;}
.setcont h3 { color:#a90f00; font-size:24px; font-weight:bold;}
.setcont table { width: 100%; margin: 30px auto; background:#ffffff; }
.setcont table th, .setcont table td { border: 1px solid #8f4202; text-align: center;  line-height: 32px; }

.part2 { padding-top:40px; height:850px;}
.textcont h2{ color:#b91317; font-size:28px; line-height:40px; }
.textcont h2 span { display:inline-block; width:41px; height:41px; background: url(../images/btns.png?v1) -197px -4px no-repeat; vertical-align:middle;}

.cont { width:930px; margin:0 auto;}
.cont1 .textcont { margin-left:30px; width:650px;}
.cont2 .textcont { width:400px; margin-top:15px; position:relative;}
.cont2 .piccont { margin-left:30px;}
.cont2 .piccont img {   margin-top: 30px;}
.cont3 .textcont { margin-left:30px; width:470px;}
.cont3 { padding-top:20px;}

a.morebtn { display:block; width:90px; height:30px; line-height:30px; text-align:center; color:#fff; background:#a90f00; }
a.morebtn:hover { background:#b84034;}

.part3 h2{ color:#b91317; font-size:28px; line-height:40px; text-align:center;}
.part3 h2 span { display:inline-block; width:41px; height:41px; background: url(../images/btns.png?v1) -197px -4px no-repeat; vertical-align:middle;}
.part3 table { width: 100%; margin: 30px auto; background:#ffffff; }
.part3 table th, .part3 table td { border: 1px solid #8f4202; text-align: center;  line-height: 32px; }


/*sidenav*/
.sidenav { position: fixed; right: 20px; top: 25%; z-index: 10; width: 110px; height: 300px; }
.sidenav a { display: block; width: 110px; height: 62px; text-align: center; font-size: 26px; background: url(../images/btns.png?v1) no-repeat; text-indent: -999em;}
.sidenav a:hover {  background: url(../images/btns.png?v1) no-repeat;}
.sidenav a.s1 { background-position:0 -130px;  }
.sidenav a.s1:hover { background-position: -114px -130px;}

.sidenav a.s2 { background-position: 0 -192px; height: 60px;}
.sidenav a.s2:hover { background-position: -114px -192px; }

.sidenav a.s3 { background-position: 0 -252px; height: 60px;}
.sidenav a.s3:hover { background-position: -114px -252px;}

.sidenav a.s4 { background-position: 0 -312px; height: 60px;}
.sidenav a.s4:hover { background-position: -114px -312px;}

.sidenav a.s5 { background-position: 0 -372px; height: 60px; }
.sidenav a.s5:hover { background-position:-114px -372px;}

.sidenav a.s6 { background-position: 0 -432px; height: 60px; }
.sidenav a.s6:hover { background-position:-114px -432px;}



.mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; filter: alpha(opacity=60); 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; }