/*reset*/
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu { margin: 0; padding: 0; }
header, footer, section, article, aside, nav, hgroup, address, figure, figcaption, menu, details { display: block; }
table { border-collapse: collapse; border-spacing: 0; }
html, body, fieldset, img, iframe, abbr { border: 0; }
i, cite, em, var, address, dfn { font-style: normal; }
li { list-style: none; }
h1, h2, h3, h4, h5, h6, small { font-size: 100%; }
sup, sub { font-size: 83%; }
pre, code, kbd, samp { font-family: inherit; }
q:before, q:after { content: none; }
textarea { overflow: auto; resize: none; }
label, summary { cursor: default; }
a, button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, em, strong, b { font-weight: bold; }
del, ins, u, s, a, a:hover { text-decoration: none; }
body, textarea, input, button, select, keygen, legend { font: 14px/1.14 "Microsoft Yahei", "Hiragino Sans GB", SimSun, Arial, "Helvetica Neue", Helvetica; color: #202020; outline: 0; }
body { font-family: "Microsoft Yahei", "Hiragino Sans GB", SimSun, Arial, "Helvetica Neue", Helvetica; min-width: 1200px; background: #f8f8f8; color: #202020 }
a { color: #202020; }
button { outline: none; border: none; }
* { box-sizing: border-box; }
:-moz-placeholder { color: #909090; opacity: 1; }
::-moz-placeholder { color: #909090; opacity: 1; }
input:-ms-input-placeholder { color: #909090; }
input::-webkit-input-placeholder { color: #909090; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 9999s; -webkit-transition: color 9999s ease-out, background-color 9999s ease-out; }

/*basic*/
[v-cloak] { display: none; }
.fl { float: left }
.fr { float: right }
.clearfix { *zoom: 1 }
.clearfix:before, .clearfix:after { content: ""; display: table }
.clearfix:after { clear: both }
.container { width: 1200px; padding: 0 15px; margin: 0 auto; position: relative; }
.bg-white { background: #fff !important; }
.btn-basic { padding: 8px 12px; line-height: 1; color: #fff; background: #ffba68; font-size: 14px; }
.btn-basic:active { -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .125); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .125); }

/*header*/
#header-pc { width: 100%; height: 90px; background-color: #fff; position: relative; z-index: 100 }
#header-pc.header-fixed { display: block; position: fixed; left: 0; top: 0; z-index: 100; min-width: 1200px; }
#header-pc.header-static { display: block; position: absolute; left: 0; top: 0; z-index: 100; background-color: transparent; border-bottom: 0 }
#header-pc .container { margin-top: 20px; }
#header-pc .logo { background: url(../images/logo-black.png) no-repeat 0 0; height: 50px; width: 240px; }
#header-pc.header-static .logo {background: url(../images/logo-white.png) no-repeat 0 0;height: 50px; width: 240px;  }
.header-static .top-search:-moz-placeholder { color: #fff; opacity: 1; }
.header-static .top-search::-moz-placeholder { color: #fff; opacity: 1; }
.header-static .top-search input:-ms-input-placeholder { color: #fff; }
.header-static .top-search input::-webkit-input-placeholder { color: #fff; }
.header-fixed .top-search:-moz-placeholder { color: #707070; opacity: 1; }
.header-fixed .top-search::-moz-placeholder { color: #707070; opacity: 1; }
.header-fixed .top-search input:-ms-input-placeholder { color: #707070; }
.header-fixed .top-search input::-webkit-input-placeholder { color: #707070; }
.login_bar a { color: #000; margin-left: 20px; font-size: 16px; float: left; margin-top: 10px }
.login_bar a:first-child { margin-left: 0 }
.header-static .login_bar a { color: #fff; }
.hot-search-list { position: absolute; top: 39px; left: -1px; right: -1px; background: #fff; padding: 20px 0 10px; box-shadow: 0 0 20px rgba(144, 144, 144, .1); font-size: 16px; }
.hot-search-list dt { color: #909090; padding: 0 20px; font-size: 16px; margin-bottom: 10px }
.hot-search-list dt:before { content: ''; display: inline-block; margin-right: 10px; width: 12px; height: 16px; background: url(/images/jfGame_pc_icons.png) no-repeat -288px 0; position: relative; top: 2px; }
.hot-search-list dd { color: #000; cursor: default; padding: 10px 20px; font-size: 14px; }
.hot-search-list dd:hover { background: #f0f0f0 }
.hot-search-list dd>i { margin-right: 10px; display: inline-block; width: 12px; text-align: center; position: relative; top: 0; }

/*footer*/
#footer-pc { background: #2d2a28; height: 165px; position: relative;text-align: center;color: #fff;text-align: center; padding-top: 40px;}
#footer-pc .beian { display: block;margin: 20px auto;}


/*app-ad float box*/
.app-float-box { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 999; height: 198px; min-width: 1200px; background: url(/images/jfGame_app_float.png) no-repeat center bottom; background-size: cover; }
.app-float-box .container { height: 198px; }
.app-code { position: absolute; width: 110px; height: 110px; right: 255px; top: 10px; border: 5px solid #fff; }
.app-code .code-icon { position: absolute; top: 35px; left: 35px; width: 30px; height: 30px; border: 4px solid #fff; border-radius: 3px; margin: 0; }
.app-float-close { position: absolute; right: 38px; bottom: 43px; color: #fff; height: 26px; width: 26px; background: url(/images/jfGame_pc_icons.png) no-repeat -202px 0; z-index: 99999; cursor: pointer; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.app-float-close:hover { transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); }

.fullSlide{position:relative;background:#000;margin:0 auto;height: 950px; overflow: hidden;}
.fullSlide .bd{position:relative;z-index:0;}
.fullSlide .bd li img{width:100%;vertical-align:top;}
.fullSlide .hd { width: 100%; bottom: 450px; position: absolute; z-index: 2; overflow: hidden; }
.fullSlide .hd ul { text-align: right; width: 1170px; margin: 0 auto; position: relative; }
.fullSlide .hd ul li { display: inline-block; height: 10px; width: 10px; text-indent: 10000px;background: #fff; position: relative; margin-right: 10px; cursor: pointer; }
.fullSlide .hd ul li.on { background: #ff8246 }
.fullSlide .hd ul li.on:before { border-color: transparent #ff8246 #ff8246 transparent; }
.fullSlide .hd ul li.on:after { border-color: #ff8246 transparent transparent #ff8246; }

/*best-game*/
.best-game { position: absolute; bottom: 0; height: 420px; width: 100%; z-index: 3 }
.best-game .left-con { float: left; width: 200px; height: 420px; background: rgba(32, 32, 32, 0.9); text-align: center; }
.best-icon { width: 68px; height: 59px; margin: 137px auto 32px; background: url(../images/zuanshi.png) no-repeat }

.left-con h2 { font-size: 30px; color: #fff; font-weight: normal; margin-bottom: 10px; }
.left-con p { font-size: 15px; color: #707070; }
.best-game .center-con { float: left; width: 630px; height: 420px; overflow: hidden; }
.best-game-bg-list { float: left; }
.best-game-bg-list li { float: left; width: 630px; height: 420px; overflow: hidden; }
.best-game-bg-list li img { width: 100%; height: 100%; }
.best-game .right-con { float: left; width: 340px; }
.best-game .right-con li { float: left; width: 170px; height: 140px; background: rgba(32, 32, 32, .9); text-align: center; border-left: 1px solid #282627; border-bottom: 1px solid #121212; border-right: 1px solid #121212; border-top: 1px solid #282627; cursor: pointer; }
.best-game .right-con li:nth-child(2n) { border-right: none; }
.best-game .right-con li:nth-child(2n+1) { border-left: none; }
.best-game .right-con li:hover { background: rgba(21, 21, 21, .9); }
.best-game .right-con li:hover h3 { font-weight: bold }
.best-game .right-con li.active { background: rgba(21, 21, 21, .9); }
.best-game .right-con li.active h3 { font-weight: bold }
.best-game .right-con li img { display: block; margin: 20px auto; width: 60px; height: 60px; border-radius: 10px; }
.best-game .right-con li h3 { font-size: 16px; font-weight: normal; color: #fff; margin-bottom: 10px; padding: 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.best-game .right-con li p { color: #707070; width: 120px; margin: 0 auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.sub-title { font-size: 22px; font-weight: normal; color: #202020; margin-bottom: 20px; padding-left: 14px; position: relative; }
.sub-title:before { content: ""; position: absolute; left: 0; bottom: 2px; height: 20px; width: 4px; background: #ff8246; }
.sub-title .more { float: right; margin-top: 5px; font-size: 14px; }
.new-game { width: 100%; float: left; margin: 50px 0; }
.new-game-item { box-shadow: 0 2px 10px #f0efee; float: left; width: 270px; margin-right: 30px; margin-bottom: 30px }
.new-game .new-game-item:nth-child(4n) { margin-right: 0; }
.new-game .new-game-item:nth-child(n+4) { margin-bottom: 0; }
.new-game-pic-wrap { height: 135px; overflow: hidden; cursor: pointer; position: relative; }
.new-game-pic-wrap img { width: 100%; height: 100%; }
.new-game-pic-wrap:hover .new-game-code { top: 0; opacity: 1; transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); }
.new-game-code { width: 270px; height: 135px; background: rgba(255, 183, 58, .8); position: absolute; top: 100px; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; opacity: 0; }
.new-game-code img { width: 80px; height: 80px; float: left; margin-left: 30px; margin-top: 28px; }
.QR-code-box { float: left; border: 5px solid #fff; position: relative; }
.QR-code-box .code-icon { position: absolute; top: 23px; left: 23px; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 5px; margin: 0; }
.new-game-code .QR-code-box { width: 80px; height: 80px; float: left; border: 5px solid #fff; margin-left: 30px; margin-top: 28px; }
.new-game-code .qrcode { width: 70px; height: 70px; }
.new-game-code .des { float: left; font-size: 16px; font-weight: bold; color: #fff; margin-left: 25px; margin-top: 45px; }
.new-game-code .des p { margin-bottom: 10px; }
.new-game-info { padding: 20px 18px; background: #fff; text-align: left; }
.new-game-info h3 { font-size: 18px; font-weight: normal; margin-bottom: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.new-game-info p { color: #707070; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.week-game { float: left; width: 270px; margin-left: 30px; margin-top: 50px; }
.week-game-list { box-shadow: 0 2px 10px #f0efee; padding: 21px 20px; background: #fff; }
.week-game-list li { margin-bottom: 32px; }
.week-game-list li>a { display: block; }
.week-game-list li:last-child { margin-bottom: 0; }
.week-game-list img { width: 60px; height: 60px; border-radius: 10px; float: left; }
.week-game-list .info { margin-left: 15px; width: 155px; float: left; }
.week-game-list .info h3 { font-size: 18px; font-weight: normal; margin: 8px 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.week-game-list .info p { color: #707070; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.hot-game { margin: 50px 0; }
.hot-game-item { box-shadow: 0 2px 10px #f0efee; float: left; width: 370px; margin-right: 30px; margin-bottom: 30px }
.hot-game-item:nth-child(3n) { margin-right: 0; }
.hot-game-item:nth-child(n+3) { margin-bottom: 0; }
.hot-game-pic-wrap { height: 185px; overflow: hidden; cursor: pointer; position: relative; }
.hot-game-pic-wrap:hover>img { transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); }
.hot-game-pic-wrap>img { width: 100%; height: 100%; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; }
.hot-game-info { padding: 20px 18px; background: #fff }
.hot-game-info h3 { font-size: 18px; font-weight: normal; margin-bottom: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.hot-game-info p { min-height: 15px; color: #707070; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.hot-game-pic-wrap:hover .hot-game-code { top: 0; opacity: 1; transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); }
.hot-game-code { width: 370px; height: 185px; background: rgba(255, 183, 58, .8); position: absolute; top: 100px; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; opacity: 0; }
.hot-game-code img { width: 80px; height: 80px; float: left; margin-left: 30px; margin-top: 28px; }
.hot-game-code .qrcode { width: 70px; height: 70px; }
.hot-game-code .QR-code-box { width: 80px; height: 80px; float: left; border: 5px solid #fff; margin-left: 80px; margin-top: 52px; }
.hot-game-code .des { float: left; font-size: 16px; font-weight: bold; color: #fff; margin-left: 25px; margin-top: 70px; }
.hot-game-code .des p { margin-bottom: 10px; }